Reputation: 129
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
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
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
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
Reputation: 10882
You can also use local storage like this:
localStorage.setItem('variable', 'stored value');
alert(localStorage['variable']);
Upvotes: 1