web-dev-qa-db-fra.com

Comment puis-je stocker des données dans un stockage local en utilisant Angularjs?

Actuellement, j'utilise un service pour effectuer une action, à savoir récupérer les données du serveur, puis les stocker sur le serveur lui-même.

Au lieu de cela, je veux mettre les données dans un stockage local au lieu de les stocker sur le serveur. Comment puis-je faire cela?

angularjs
176
user2601750

c'est un peu de mon code qui stocke et récupère sur le stockage local. J'utilise les événements de diffusion pour enregistrer et restaurer les valeurs du 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;
}]);
126
Anton

Si vous utilisez $window.localStorage.setItem(key,value) pour stocker, $window.localStorage.getItem(key) pour récupérer et $window.localStorage.removeItem(key) pour le supprimer, vous pouvez accéder aux valeurs de toutes les pages.

Vous devez transmettre le service $window au contrôleur. Bien qu'en JavaScript, l'objet window soit disponible globalement.

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

102
Sunil Gouda

Pour le stockage local, il existe un module qui se penche sur 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/

56
JQuery Guru

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

ngStorage contient deux services, $localStorage et $sessionStorage

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

Vérifiez le démo

49
Jethik

Il existe encore un module alternatif plus actif que ngStorage

stockage local angulaire:

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

3
The Bndr

Vous pouvez utiliser localStorage à cette fin.

Étapes:

  1. ajoutez ngStorage.min.js dans votre fichier
  2. ajouter la dépendance ngStorage dans votre module
  3. ajoutez le module $ localStorage dans votre contrôleur
  4. utiliser $ localStorage.key = valeur
2
Sukhminder Parmar

Suivez les étapes pour stocker les données dans Angular - stockage local:

  1. Ajoutez 'ngStorage.js' dans votre dossier.

  2. Injectez 'ngStorage' dans votre angular.module

        eg: angular.module("app", [ 'ngStorage']);
  3. Ajoutez $localStorage dans votre fonction app.controller

4.Vous pouvez utiliser $localStorage à l'intérieur de votre contrôleur

Eg: $localstorage.login= true;

Ce qui précède stockera le stockage local dans votre application de navigateur.

2
sam ruben

En fonction de vos besoins, par exemple si vous souhaitez autoriser l'expiration des données ou définir un nombre limité d'enregistrements à stocker, vous pouvez également consulter https://github.com/jmdobry/angular-cache = qui vous permet de définir si le cache se trouve en mémoire, en localStorage ou en sessionStorage.

1
Aaron Morrison

Vous devez utiliser un script tiers appelé ngStorage. Voici un exemple d'utilisation. Il met à jour le stockage local avec les modifications apportées à la portée/à la 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>
1
Aniket Jha

Je suis l'auteur (encore un autre) angular service de stockage html5. Je souhaitais conserver les mises à jour automatiques rendues possibles par ngStorage, mais rendre les cycles de digestion plus prévisibles/intuitifs (du moins pour moi), ajouter des événements à gérer lorsque des recharges d'état sont requises et ajouter également un stockage de session de partage entre onglets. J'ai modélisé l'API d'après $resource et je l'ai appelée 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');
  }

L'API est ici .

Repo est ici .

J'espère que ça aide quelqu'un!

1
Yaacov