Wie speichere ich Daten mit Angularjs im lokalen Speicher?

Derzeit verwende ich einen Dienst, um eine Aktion auszuführen, nämlich Daten vom Server abzurufen und die Daten dann auf dem Server selbst zu speichern.

Stattdessen möchte ich die Daten in einem lokalen Speicher ablegen, anstatt sie auf dem Server zu speichern. Wie mache ich das?

Dies ist ein Teil meines Codes, der im lokalen Speicher gespeichert und abgerufen wird. Ich benutze Broadcast-Ereignisse, um die Werte im Modell zu speichern und wiederherzustellen.

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

Wenn Sie $window.localStorage.setItem(key,value)zum Speichern, $window.localStorage.getItem(key)Abrufen und $window.localStorage.removeItem(key)Entfernen verwenden, können Sie auf die Werte auf jeder Seite zugreifen.

Sie müssen den $windowDienst an die Steuerung übergeben. Obwohl in JavaScript, ist das windowObjekt global verfügbar.

Durch die Verwendung hat $window.localStorage.xxXX()der Benutzer die Kontrolle über den localStorageWert. Die Größe der Daten hängt vom Browser ab. Wenn Sie nur verwenden $localStorage, bleibt der Wert so lange erhalten, wie Sie mit window.location.href zu einer anderen Seite navigieren. Wenn Sie <a href="location"></a>zu einer anderen Seite navigieren, geht Ihr $localStorageWert auf der nächsten Seite verloren.

Für die lokale Speicherung gibt es ein Modul für diesen Blick unter der folgenden URL:

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

und anderer Link für lokalen HTML5-Speicher und AngularJs

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

Verwendung ngStoragefür alle Ihre lokalen AngularJS-Speicheranforderungen. Bitte beachten Sie, dass dies KEIN nativer Teil des Angular JS-Frameworks ist.

ngStorage enthält zwei Dienste $localStorageund$sessionStorage

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

Überprüfen Sie die Demo

Es gibt ein alternatives Modul mit mehr Aktivität als ngStorage

Winkel-Lokal-Speicher:

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

Sie können localStoragefür den Zweck verwenden.

Schritte:

1. Fügen Sie Ihrer Datei ngStorage.min.js hinzu
2. Fügen Sie Ihrem Modul die ngStorage-Abhängigkeit hinzu
3. Fügen Sie Ihrem Controller das $ localStorage-Modul hinzu
4. Verwenden Sie $ localStorage.key = value

Ich habe (noch einen) eckigen HTML5-Speicherdienst erstellt. Ich wollte die automatischen Updates beibehalten ngStorage, aber Digest-Zyklen vorhersehbarer / intuitiver machen (zumindest für mich), Ereignisse hinzufügen, die behandelt werden sollen, wenn Status-Neuladungen erforderlich sind, und auch den Speicher für die gemeinsame Nutzung von Sitzungen zwischen Registerkarten hinzufügen. Ich habe die API nachempfunden $resourceund aufgerufen angular-stored-object. Es kann wie folgt verwendet werden:

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

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

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

API ist hier .

Repo ist da .

Hoffe es hilft jemandem!

Führen Sie die folgenden Schritte aus, um Daten in Angular - local storage zu speichern:

1. Fügen Sie 'ngStorage.js' in Ihren Ordner ein.

2. Injizieren Sie 'ngStorage' in Ihr angle.module

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

3. Fügen Sie $localStoragein Ihrer app.controller-Funktion hinzu

4.Sie können $localStoragein Ihrem Controller verwenden

Eg: $localstorage.login= true;

Oben wird der lokale Speicher in Ihrer Browser-Anwendung gespeichert

Abhängig von Ihren Anforderungen, z. B. wenn Sie zulassen möchten, dass die Daten irgendwann ablaufen, oder wenn Sie festlegen möchten, wie viele Datensätze gespeichert werden sollen, können Sie auch https://github.com/jmdobry/angular-cache verwenden , um zu definieren, ob Der Cache befindet sich im Speicher, localStorage oder sessionStorage.

Hierfür sollte ein Drittanbieter-Skript namens ngStorage verwendet werden. Hier ist ein Beispiel für die Verwendung. Es aktualisiert localstorage mit einer Änderung des Bereichs / der Ansicht.

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