web-dev-qa-db-ja.com

angularjsおよびlocalStorage変更イベント

LocalStorageにデータを保存します

私のangularjsアプリで欲しいのは、localStorageのデータが変更されたときにアプリがアプリを再レンダリングするということです、どうすればいいですか？

javascriptangularjslocal-storage
25
Li Song

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

};

さらに考えた後、localStorageが変更された場合に通知を受け取ることができるように、setItemでブロードキャストするようにモジュールを変更する必要があるかもしれません。たぶんフォークと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
});

次に、2番目のオプションのデモを示します。デモ： http://beta.plnkr.co/lpAm6SZdm2oRBm4LoIi1

** 更新しました **

私はそのプロジェクトを分岐し、このプロジェクトを使用したいイベントにここに通知を含めました： https://github.com/sbosell/angular-local-storage/blob/master/localStorageModule.js

オリジナルのライブラリが私のPRを受け入れたと思います。このライブラリが好きな理由は、ブラウザがローカルストレージをサポートしていない場合に備えて、Cookieのバックアップがあるためです。

29
lucuma

ちなみに、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プロジェクトページをご覧ください;）

26
gsklee

最近、モジュールを作成して、localStorageキーを$ scope変数にバインドし、オブジェクト、配列、ブール値などをlocalStorage内に直接格納できるようにしました。

Github localStorage Module

5
agrublev
$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)
});
1
Venkatesh TR