如何在angularjs中永久存储数据

我发现每当我刷新页面时，angular都会重建整个模块。那么有没有办法永久存储一些数据呢。cookie服务是唯一的方法吗？

您也可以这样使用：

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

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');
}]);

---

我建议使用

角度本地存储

。它提供了使用本地存储或会话存储的选项

我认为您可以使用$rootScope。它是最顶级的范围。一个应用程序只能有一个$rootScope，它将在应用程序的所有组件之间共享。因此，它就像一个全局变量。所有其他$scope都是$rootScope的子项。

如果您的站点不必支持IE7或更低版本，那么使用

localStorage

或

sessionStorage

就可以很简单地做到这一点，而无需引入其他库

这里有一个简单的例子

写入本地存储或会话存储：

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

阅读

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

删除和清除

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

localStorage和sessionStorage只能存储字符串，因此对象值在保存时必须序列化，在访问时必须反序列化

在Angular中，最好将其包装在类似于以下内容的服务中：

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;
}]);

注意：要使用上述服务，应用程序模块必须包括

'WebStorage'

等：

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

现在有一种一致的方法可以将任何数据类型保存到web存储中，可以这样使用：

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

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');
}]);

---

若要添加此功能，您应该首先检查客户端浏览器是否支持此相对较新的功能。当页面刷新时，您会丢失

$rootScope

的内容