web-dev-qa-db-fra.com

angularjs et localStorage change event

Je stocke des données dans le localStorage

ce que je veux dans mon application angularjs, c'est que lorsque les données du localStorage ont changé, l'application redirige l'application, comment faire?

javascriptangularjslocal-storage
25
Li Song

Il y a un 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';
  }

};

Après réflexion, vous devrez peut-être modifier le module pour diffuser sur setItem afin de pouvoir être averti si le localStorage a été modifié. Peut-être à la fourche et autour de la ligne 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

ou dans la version récente de la bibliothèque, le boîtier a été changé

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

Ensuite, dans votre contrôleur, vous pouvez:

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

Voici une démo de la 2ème option: Démo: http://beta.plnkr.co/lpAm6SZdm2oRBm4LoIi1

** Mis à jour **

J'ai bifurqué ce projet et j'ai inclus les notifications ici dans le cas où vous souhaitez utiliser ce projet: https://github.com/sbosell/angular-local-storage/blob/master/localStorageModule.js

Je crois que la bibliothèque d'origine a accepté mon PR. La raison pour laquelle j'aime cette bibliothèque est qu'elle a une sauvegarde des cookies au cas où le navigateur ne prend pas en charge le stockage local.

29
lucuma

Par ailleurs, j'ai créé un autre module localStorage pour AngularJS qui s'appelle ngStorage :

https://github.com/gsklee/ngStorage

L'utilisation est ultra simple:

JavaScript 

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

[~ # ~] html [~ # ~] 

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

Et chaque changement est synchronisé automatiquement - même les changements qui se produisent dans d'autres onglets du navigateur!

Consultez la page du projet GitHub pour plus de démos et d'exemples;)

26
gsklee

J'ai récemment créé un module qui vous permet de simplement lier une clé localStorage à une variable $ scope et également de stocker des objets, des tableaux, des booléens et plus directement à l'intérieur du localStorage.

Module Github localStorage

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

cet événement appelle lors de l'utilisation https://github.com/grevory/angular-local-storage#getstoragetype

dans la configuration de l'application

myApp.config(function (localStorageServiceProvider) {
  localStorageServiceProvider
    .setPrefix('myApp')
    .setStorageType('sessionStorage')
    .setNotify(true, true)
});
1
Venkatesh TR