Comment stocker des données dans le stockage local en utilisant Angularjs ?

Question

Actuellement, j'utilise un service pour effectuer une action, à savoir récupérer des données sur le serveur, puis les stocker 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 m'y prendre ?

Answer 1

Voici une partie de mon code qui stocke et récupère dans le stockage local. J'utilise des événements de diffusion pour enregistrer 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;
}]);

Answer 2

Si vous utilisez $window.localStorage.setItem(key,value) à stocker, $window.localStorage.getItem(key) pour récupérer et $window.localStorage.removeItem(key) à supprimer, vous pouvez alors accéder aux valeurs dans n'importe quelle page.

Vous devez passer le $window service au contrôleur. Bien qu'en JavaScript, window est disponible dans le monde entier.

En utilisant $window.localStorage.xxXX() l'utilisateur a le contrôle sur le localStorage valeur. La taille des données dépend du navigateur. Si vous utilisez uniquement $localStorage alors la valeur reste tant que vous utilisez window.location.href pour naviguer vers une autre page et si vous utilisez la fonction <a href="location"></a> pour naviguer vers une autre page, alors votre $localStorage est perdue dans la page suivante.

Answer 3

Pour le stockage local il y a un module pour cela regardez l'url ci-dessous :

https://github.com/grevory/angular-local-storage

et autre lien pour le stockage local HTML5 et angularJs

http://www.amitavroy.com/justread/content/articles/html5-local-storage-with-angular-js/

Answer 4

Utilisez ngStorage Pour tous vos besoins de stockage local AngularJS. Veuillez noter qu'il ne s'agit PAS d'une partie native du cadre Angular JS.

ngStorage contient deux services, $localStorage y $sessionStorage

angular.module('app', [
   'ngStorage'
]).controller('Ctrl', function(
    $scope,
    $localStorage,
    $sessionStorage
){});

Vérifiez le Démo

Answer 5

Il y a un autre module alternatif qui a plus d'activité que ngStorage

angular-local-storage :

https://github.com/grevory/angular-local-storage