25

我将一些数据存储在 localStorage

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

4

4 回答 4

29

有一个角度 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 已更改时收到通知。也许 fork 和第 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

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

于 2013-04-22T15:18:39.157 回答
26

顺便说一句,我为 AngularJS 创建了另一个 localStorage 模块,称为ngStorage

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 项目页面以获取更多演示和示例;)

于 2013-07-20T13:17:10.620 回答
5

我最近创建了一个模块,允许您简单地将 localStorage 键绑定到 $scope 变量,并将对象、数组、布尔值等直接存储在 localStorage 中。

Github 本地存储模块

于 2013-05-20T23:57:29.020 回答
1
$scope.$on("LocalStorageModule.notification.setitem", function (key, newVal, type) {
      console.log("LocalStorageModule.notification.setitem", key, newVal, type);
    });

$scope.$on("LocalStorageModule.notification.removeitem", function (key, type) {
  console.log("LocalStorageModule.notification.removeitem", key, type);
});

$scope.$on("LocalStorageModule.notification.warning", function (warning) {
  console.log("LocalStorageModule.notification.warning", warning);
});

$scope.$on("LocalStorageModule.notification.error", function (errorMessage) {
  console.log("LocalStorageModule.notification.error", errorMessage);
});

使用 https://github.com/grevory/angular-local-storage#getstoragetype时调用此事件

在应用配置中

myApp.config(function (localStorageServiceProvider) {
  localStorageServiceProvider
    .setPrefix('myApp')
    .setStorageType('sessionStorage')
    .setNotify(true, true)
});
于 2015-05-11T06:08:17.367 回答