Comment stocker des données dans le stockage local à l'aide d'Angularjs?

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

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

c'est un peu 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 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;
}]);

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

Vous devez transmettre le $windowservice au contrôleur. Bien qu'en JavaScript, l' windowobjet est disponible dans le monde entier.

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

Pour le stockage local, il existe un module pour cet aspect ci-dessous url:

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/

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

ngStorage contient deux services, $localStorageet$sessionStorage

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

Consultez la démo

Il existe un module alternatif de plus qui a plus d'activité que ngStorage

stockage local angulaire:

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

Vous pouvez utiliser localStorageà cette fin.

Pas:

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. utilisez $ localStorage.key = valeur

J'ai créé (encore un autre) service de stockage angulaire html5. Je voulais garder les mises à jour automatiques rendues possibles par ngStorage, mais rendre les cycles de résumé plus prévisibles / intuitifs (du moins pour moi), ajouter des événements à gérer lorsque des recharges d'état sont nécessaires, et également ajouter un stockage de session de partage entre les onglets. J'ai modélisé l'API après $resourceet 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 là .

Repo est là .

J'espère que cela aide quelqu'un!

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. Ajouter $localStoragedans votre fonction app.controller

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

Eg: $localstorage.login= true;

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

En fonction de vos besoins, par exemple si vous souhaitez permettre aux données d'expirer éventuellement ou définir des limites sur le nombre d'enregistrements à stocker, vous pouvez également consulter https://github.com/jmdobry/angular-cache qui vous permet de définir si le cache se trouve dans la mémoire, localStorage ou sessionStorage.

On devrait utiliser un script tiers pour cela appelé ngStorage, voici un exemple d'utilisation.Il met à jour localstorage avec un changement de 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>