Comment puis-je stocker des données dans le stockage local en utilisant Angularjs?
actuellement j'utilise un service pour effectuer une action, à savoir récupérez les données du serveur, puis enregistrez les données sur le serveur lui-même.
au lieu de cela, je veux mettre les données dans le stockage local au lieu de les stocker sur le serveur. Comment dois-je faire?
9 réponses
c'est un peu mon code qui stocke et récupère des locaux de stockage. j'utilise les évènements de diffusion pour sauvegarder et restaurer les valeurs dans le modèle.
app.factory('userService', ['$rootScope', function ($rootScope) {
var service = {
model: {
name: '',
email: ''
},
SaveState: function () {
sessionStorage.userService = angular.toJson(service.model);
},
RestoreState: function () {
service.model = angular.fromJson(sessionStorage.userService);
}
}
$rootScope.$on("savestate", service.SaveState);
$rootScope.$on("restorestate", service.RestoreState);
return service;
}]);
si vous utilisez $window.localStorage.setItem(key,value) pour stocker, $window.localStorage.getItem(key) pour récupérer et $window.localStorage.removeItem(key) pour supprimer, alors vous pouvez accéder aux valeurs dans n'importe quelle page.
vous devez passer le service $window au contrôleur. Bien Qu'en JavaScript, l'objet window est disponible dans le monde entier.
en utilisant $window.localStorage.xxXX() l'Utilisateur a le contrôle sur la valeur localStorage . La taille des données dépend du navigateur. Si vous n'utilisez que $localStorage , alors la valeur reste aussi longtemps que vous utilisez fenêtre.emplacement.href pour naviguer vers une autre page et si vous utilisez <a href="location"></a> pour naviguer vers une autre page, alors votre valeur $localStorage est perdue dans la page suivante.
pour le stockage local il y a un module pour que regarder ci-dessous url:
https://github.com/grevory/angular-local-storage
et autre liaison pour le stockage local HTML5 et angularJs
http://www.amitavroy.com/justread/content/articles/html5-local-storage-with-angular-js /
Utilisez ngStorage Pour Tous Vos Besoins Locaux De Stockage AngularJS. Veuillez noter qu'il ne s'agit pas d'une partie native du cadre Angulaire Js.
ngStorage contient deux services: $localStorage et $sessionStorage.
angular.module('app', [
'ngStorage'
]).controller('Ctrl', function(
$scope,
$localStorage,
$sessionStorage
){});
cocher la Case Démo
il y a un module alternatif de plus qui a plus d'activité que ngStorage
angulaires-le stockage local:
selon vos besoins, comme si vous voulez laisser les données expirer ou fixer des limites sur le nombre d'enregistrements à stocker, vous pouvez également regarder https://github.com/jmdobry/angular-cache qui vous permet de définir si le cache se trouve en mémoire, stockage local, ou stockage de session.
j'ai écrit (encore un autre) service de stockage angulaire HTML5. Je voulais garder les mises à jour automatiques rendues possibles par ngStorage, mais rendre les cycles de digest plus prévisibles/intuitifs (au moins pour moi), ajouter des événements à gérer lorsque les états de rechargement sont requis, et aussi ajouter le stockage de session de partage entre les onglets. J'ai modélisé L'API après $resource et l'ai appelé angular-stored-object. Il peut être utilisé comme suit:
angular
.module('auth', ['yaacovCR.storedObject']);
angular
.module('auth')
.factory('session', session);
function session(ycr$StoredObject) {
return new ycr$StoredObject('session');
}
API: http://yaacovcr.github.io/angular-stored-object/docs/#/api
Repo: https://github.com/yaacovCR/angular-stored-object
Espère que cela aide quelqu'un!
vous pouvez utiliser localStorage à cet effet.
Suit:
add ngStorage.min.js in your file
add ngStorage dependency in your module
add $localStorage module in your controller
use $localStorage.key = value
il faut utiliser un script tiers pour cela appelé ngStorage voici un exemple d'utilisation.Il met à jour localstorage avec des changements dans la portée/vue.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<!-- CDN Link -->
<!--https://cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.6/ngStorage.min.js-->
<script src="angular.min.js"></script>
<script src="ngStorage.min.js"></script>
<script>
var app = angular.module('app', ['ngStorage']);
app.factory("myfactory", function() {
return {
data: ["ram", "shyam"]
};
})
app.controller('Ctrl', function($scope, $localStorage, $sessionStorage, myfactory) {
$scope.abcd = $localStorage; //Pass $localStorage (or $sessionStorage) by reference to a hook under $scope
// Delete from Local Storage
//delete $scope.abcd.counter;
// delete $localStorage.counter;
// $localStorage.$reset(); // clear the localstorage
/* $localStorage.$reset({
counter: 42 // reset with default value
});*/
// $scope.abcd.mydata=myfactory.data;
});
</script>
</head>
<body ng-app="app" ng-controller="Ctrl">
<button ng-click="abcd.counter = abcd.counter + 1">{{abcd.counter}}</button>
</body>
</html>