CODEWITHSUNDEEP
angularjs
jinxin ni
jinxin ni

Reputation: 129

How to store data permnanently in angularjs

I find whenever I refresh the page, angular will rebuild the whole module. So is there any way to store some data permanently. Is the cookie service the only way?

Upvotes: 1

Views: 832

Answers (4)

DerekMT12
DerekMT12

Reputation: 1349

If your site does not have to support IE 7 or below, then it is simple to do this using localStorage or sessionStorage without having to bring in another library.

Here's a quick example off of https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API

Writing to localStorage or sessionStorage:

localStorage.colorSetting = '#a4509b';
localStorage['colorSetting'] = '#a4509b';
localStorage.setItem('colorSetting', '#a4509b');

Reading from

alert(localStorage.colorSetting);
alert(localStorage['colorSetting']);
alert(localStorage.getItem('colorSetting'));

Deleting and clearing

localStorage.removeItem('colorSetting'); // remove only colorSetting
localStorage.clear(); // remove everything from local storage

localStorage and sessionStorage can only store strings though, so object values must be serialized when they are saved, and deserialized when they are accessed.

In Angular, it is best to wrap this in a service similar to:

angular.module('WebStorage', []).factory('storage', ['$window', function($window) {
   var service = {
       local: wrapStorageApi($window.localStorage),
       session: wrapStorageApi($window.sessionStorage) 
   };

   function wrapStorageApi(storageMethod) {
       return {
           'set': function(key, value) {
               storageMethod.setItem(key, angular.toJson(value));
           },
           'get': function(key) {
               return angular.fromJson(storageMethod.getItem(key));
           },
           'remove': function(key) {
               storageMethod.removeItem(key);
           }
           'clear': function() {
               storageMethod.clear();
           }
       };
   }

   return service;
}]);

Note: To use the above service, the app module must include 'WebStorage' like:

angular.module('myApp', ['WebStorage']);

Now there is one consistent method for saving any data type to web storage, which can be used like this:

angular.module('myApp').controller('MyAppController', ['storage', function(storage) {
   //saving item to local storage
   storage.local.set('item', { name: 'complex_object', id: 0 });   

   //getting item from local storage
   var item = storage.local.get('item');

   //removing item
   storage.local.remove('item');
}]);

Upvotes: 0

Shashank Singh
Shashank Singh

Reputation: 553

I think you can use $rootScope.It is the top-most scope. An app can have only one $rootScope which will be shared among all the components of an app. Hence it acts like a global variable. All other $scopes are children of the $rootScope.

Upvotes: 0

Mudasser Ajaz
Mudasser Ajaz

Reputation: 6257

I will suggest to use angular-local-storage, https://github.com/grevory/angular-local-storage . It gives option to use localstorage or sessionstorage.

Upvotes: 0

Jacobian
Jacobian

Reputation: 10882

You can also use local storage like this:

localStorage.setItem('variable', 'stored value');
alert(localStorage['variable']);

Upvotes: 1

Related Questions