angularjs和localStorage更改事件

Question

我将一些数据存储在localStorage中

我在angularjs应用程序中想要的是,当localStorage中的数据发生变化时,应用程序会重新呈现应用程序,我该怎么做？

Answer 1

有一个有角度的localStorage模块:

https://github.com/grevory/angular-local-storage

var DemoCtrl = function($scope, localStorageService) {

  localStorageService.clearAll();

  $scope.$watch('localStorageDemo', function(value){
    localStorageService.add('localStorageDemo',value);
    $scope.localStorageDemoValue = localStorageService.get('localStorageDemo');
  });

  $scope.storageType = 'Local storage';

  if (!localStorageService.isSupported()) {
    $scope.storageType = 'Cookie';
  }

};

进一步思考后,您可能需要将模块更改为在setItem上广播,以便在localStorage已更改时收到通知.也许叉和50号线:

localStorage.setItem(prefix+key, value);
$rootScope.$broadcast('LocalStorageModule.notification.setItem',{key: prefix+key, newvalue: value});  // you could broadcast the old value if you want

或者在最近版本的库中更改了外壳

$rootScope.$broadcast('LocalStorageModule.notification.setitem',{key: prefix+key, newvalue: value}); 

然后在您的控制器中,您可以:

$scope.$on('LocalStorageModule.notification.setItem', function(event, parameters) {
   parameters.key;  // contains the key that changed
   parameters.newvalue;  // contains the new value
});

这是第二个选项的演示:演示:http: //beta.plnkr.co/lpAm6SZdm2oRBm4LoIi1

**更新**

我分叉了这个项目,并在你想要使用这个项目的事件中包含了这些通知:https: //github.com/sbosell/angular-local-storage/blob/master/localStorageModule.js

我相信原来的图书馆接受了我的公关.我喜欢这个库的原因是它有一个cookie备份,以防浏览器不支持本地存储.

Answer 2

顺便说一下,我为AngularJS创建了另一个名为ngStorage的 localStorage模块:

https://github.com/gsklee/ngStorage

用法非常简单:

JavaScript的

$scope.$storage = $localStorage.$default({
    x: 42
});

HTML

<button ng-click="$storage.x = $storage.x + 1">{{$storage.x}}</button>

每个更改都会自动同步 - 甚至在其他浏览器标签中发生更改!

查看GitHub项目页面以获取更多演示和示例;)

Answer 3

我最近创建了一个模块,允许您简单地将localStorage键绑定到$ scope变量,还可以直接在localStorage中存储Objects,Arrays,Booleans等.

Github localStorage模块