Come posso archiviare i dati nella memoria locale usando Angularjs?

Attualmente sto usando un servizio per eseguire un'azione, vale a dire recuperare i dati dal server e quindi archiviarli sul server stesso.

Invece di questo, voglio mettere i dati nella memoria locale invece di archiviarli sul server. Come faccio a fare questo?

questo è un po 'del mio codice che memorizza e recupera nella memoria locale. utilizzo gli eventi di trasmissione per salvare e ripristinare i valori nel modello.

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;
}]);

Se si utilizza $window.localStorage.setItem(key,value)per archiviare, $window.localStorage.getItem(key)recuperare e $window.localStorage.removeItem(key)rimuovere, è possibile accedere ai valori in qualsiasi pagina.

Devi passare il $windowservizio al controller. Sebbene in JavaScript, l' windowoggetto sia disponibile a livello globale.

Usando $window.localStorage.xxXX()l'utente ha il controllo sul localStoragevalore. La dimensione dei dati dipende dal browser. Se si utilizza solo, il $localStoragevalore rimane finché si utilizza window.location.href per passare ad un'altra pagina e se si utilizza <a href="location"></a>per navigare verso un'altra pagina, il $localStoragevalore viene perso nella pagina successiva.

Per l'archiviazione locale c'è un modulo per quello che segue sotto l'URL:

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

e altri link per l'archiviazione locale HTML5 e angularJs

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

Utilizzare ngStorageper tutte le esigenze di archiviazione locale di AngularJS. Si noti che questa NON è una parte nativa del framework JS angolare.

ngStorage contiene due servizi $localStoragee$sessionStorage

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

Controlla la demo

C'è un altro modulo alternativo che ha più attività di ngStorage

angolare-locale-storage:

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

Puoi usare localStorageper lo scopo.

passi:

1. aggiungi ngStorage.min.js nel tuo file
2. aggiungi la dipendenza ngStorage nel tuo modulo
3. aggiungi il modulo $ localStorage nel tuo controller
4. usa $ localStorage.key = valore

Ho creato (ancora un altro) servizio di archiviazione html5 angolare. Volevo mantenere gli aggiornamenti automatici resi possibili da ngStorage, ma rendere i cicli digest più prevedibili / intuitivi (almeno per me), aggiungere eventi da gestire quando sono necessari ricariche di stato e anche aggiungere la condivisione della memoria delle sessioni tra le schede. Ho modellato l'API dopo $resourcee l'ho chiamata angular-stored-object. Può essere usato come segue:

  angular
    .module('auth', ['yaacovCR.storedObject']);

  angular
    .module('auth')
    .factory('session', session);

  function session(ycr$StoredObject) {
    return new ycr$StoredObject('session');
  }

L'API è qui .

Repo è qui .

Spero che aiuti qualcuno!

Seguire i passaggi per archiviare i dati in Angular - archiviazione locale:

1. Aggiungi "ngStorage.js" nella tua cartella.

2. Iniettare 'ngStorage' nel modulo angular

       eg: angular.module("app", [ 'ngStorage']);

3. Aggiungi la $localStoragetua funzione app.controller

4.È possibile utilizzare $localStorageall'interno del controller

Eg: $localstorage.login= true;

Quanto sopra memorizzerà il deposito locale nell'applicazione browser

A seconda delle esigenze, ad esempio se si desidera consentire la scadenza dei dati o impostare limiti sul numero di record da archiviare, è possibile anche consultare https://github.com/jmdobry/angular-cache che consente di definire se la cache si trova in memoria, localStorage o sessionStorage.

Uno dovrebbe usare uno script di terze parti per questo chiamato chiamato ngStorage qui è un esempio su come usare. Aggiorna localstorage con cambiamenti in ambito / vista.

    <!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>