Jak przechowywać dane w pamięci lokalnej za pomocą Angularjs?

Obecnie korzystam z usługi, aby wykonać akcję, a mianowicie pobrać dane z serwera, a następnie przechowywać je na samym serwerze.

Zamiast tego chcę umieścić dane w lokalnej pamięci zamiast przechowywać je na serwerze. Jak mam to zrobic?

to jest fragment mojego kodu, który przechowuje i pobiera do pamięci lokalnej. Używam wydarzeń rozgłoszeniowych do zapisywania i przywracania wartości w modelu.

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

Jeśli używasz $window.localStorage.setItem(key,value)do przechowywania, $window.localStorage.getItem(key)pobierania i $window.localStorage.removeItem(key)usuwania, możesz uzyskać dostęp do wartości na dowolnej stronie.

Musisz przekazać $windowusługę do kontrolera. Chociaż w JavaScript windowobiekt jest dostępny globalnie.

Używając $window.localStorage.xxXX() użytkownik ma kontrolę nad localStoragewartością. Rozmiar danych zależy od przeglądarki. Jeśli używasz tylko, $localStoragewartość pozostaje tak długo, jak długo używasz window.location.href do przechodzenia do innej strony, a jeśli używasz <a href="location"></a>do nawigacji do innej strony, twoja $localStoragewartość zostanie utracona na następnej stronie.

W przypadku przechowywania lokalnego istnieje moduł umożliwiający spojrzenie na poniższy adres URL:

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

i inny link do lokalnej pamięci HTML5 i angularJs

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

Używaj ngStoragedo wszystkich potrzeb związanych z lokalną pamięcią masową AngularJS. Należy pamiętać, że NIE jest to natywna część frameworka Angular JS.

ngStorage zawiera dwie usługi $localStoragei$sessionStorage

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

Sprawdź demo

Jest jeszcze jeden alternatywny moduł, który ma większą aktywność niż ngStorage

magazyn lokalny-kątowy:

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

Możesz użyć localStoragedo tego celu.

Kroki:

1. dodaj ngStorage.min.js do swojego pliku
2. dodaj zależność ngStorage w swoim module
3. dodaj moduł $ localStorage do swojego kontrolera
4. użyj $ localStorage.key = wartość

Jestem autorem (kolejnej) kątowej usługi przechowywania html5. Chciałem, aby automatyczne aktualizacje były możliwe ngStorage, ale uczynić cykle podsumowania bardziej przewidywalnymi / intuicyjnymi (przynajmniej dla mnie), dodać zdarzenia do obsługi, gdy wymagane są ponowne załadowania stanu, a także dodać pamięć sesji udostępniania między kartami. Modelowałem API $resourcei nazwałem je angular-stored-object. Można go używać w następujący sposób:

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

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

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

API jest tutaj .

Repozytorium jest tutaj .

Mam nadzieję, że to komuś pomoże!

Postępuj zgodnie z instrukcjami, aby przechowywać dane w Angular - pamięć lokalna:

1. Dodaj „ngStorage.js” do swojego folderu.

2. Wprowadź „ngStorage” do swojego modułu angular.module

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

3. Dodaj $localStoragefunkcję app.controller

4. możesz używać $localStoragewewnątrz kontrolera

Eg: $localstorage.login= true;

Powyższe spowoduje zapisanie lokalnego magazynu w aplikacji przeglądarki

W zależności od potrzeb, na przykład jeśli chcesz pozwolić, aby dane ostatecznie wygasły lub ustawić ograniczenia liczby zapisów do przechowywania, możesz również zajrzeć na https://github.com/jmdobry/angular-cache, która pozwala określić, czy pamięć podręczna znajduje się w pamięci, localStorage lub sessionStorage.

Do tego celu należy użyć skryptu innej firmy o nazwie ngStorage. Oto przykład użycia, który aktualizuje lokalny magazyn ze zmianą zakresu / widoku.

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