angularjs et localStorage événement de changement de

- je stocker des données dans le localStorage

ce que je veux dans mon application angularjs est que lorsque les données dans le localStorage changé, l'application rerender l'application, comment puis-je faire cela?

25
demandé sur Li Song 2013-04-22 19:00:33

4 réponses

Il y a une angulaires localStorage module:

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 mûre réflexion, vous devrez peut-être changer le module pour diffuser sur setItem afin de pouvoir être averti si le stockage local 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 de la boîte a été changé

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

puis dans votre controller 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: Demo:http://beta.plnkr.co/lpAm6SZdm2oRBm4LoIi1

** mise à Jour **

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

je crois que la bibliothèque d'origine a accepté mes relations publiques. La raison pour laquelle j'aime cette bibliothèque est qu'elle a une sauvegarde de cookie au cas où le navigateur ne supporte pas le stockage local.

29
répondu lucuma 2015-09-01 19:59:52

soit dit en passant, j'ai créé encore un autre module de stockage local 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 automatiquement synchronisé - même les changements se produisant dans d'autres onglets de navigateur!

regardez le GitHub page du projet pour plus de démos et exemples ;)

24
répondu Kay 2013-07-20 13:17:10

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

Github localStorage Module

5
répondu agrublev 2013-06-28 17:27:32
$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 appel d'événement lors de l'utilisation https://github.com/grevory/angular-local-storage#getstoragetype

en application de config

myApp.config(function (localStorageServiceProvider) {
  localStorageServiceProvider
    .setPrefix('myApp')
    .setStorageType('sessionStorage')
    .setNotify(true, true)
});
1
répondu Venkatesh TR 2015-05-11 06:14:34