Angularjs и localStorage change event

Ответ 1

Существует модуль angular 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, чтобы вы могли получить уведомление, если локальная хранилища была изменена. Может быть, 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, если браузер не поддерживает локальное хранилище.

Ответ 2

Кстати, я создал еще один модуль LocalStorage для AngularJS, который называется 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 для получения дополнительных демонстраций и примеров;)

Ответ 3

Недавно я создал модуль, который позволяет просто привязать ключ localStorage к переменной $scope, а также хранить объекты, массивы, булевы и многое другое непосредственно внутри localStorage.

Github localStorage Module

Ответ 4

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