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