Angularjs kullanarak verileri yerel depolama alanında nasıl depolarım?

Şu anda bir eylem gerçekleştirmek için bir hizmet kullanıyorum, yani sunucudan veri almak ve sonra sunucunun kendisi veri depolamak.

Bunun yerine, verileri sunucuda depolamak yerine yerel depoya koymak istiyorum. Bunu nasıl yaparım?

Bu benim kod biraz yerel depolama depolar ve alır. Modeldeki değerleri kaydetmek ve geri yüklemek için yayın olaylarını kullanıyorum.

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

Eğer kullanırsanız $window.localStorage.setItem(key,value)mağazaya, $window.localStorage.getItem(key)almak ve $window.localStorage.removeItem(key)kaldırmak için, o zaman herhangi bir sayfada değerleri erişebilirsiniz.

Sen geçmek zorunda $windowkontrolöre hizmeti. JavaScript'te olsa da, windownesne global olarak kullanılabilir.

Kullanarak $window.localStorage.xxXX()kullanıcı üzerinde kontrol varlocalStorage değere. Verilerin boyutu tarayıcıya bağlıdır. Yalnızca kullanırsanız $localStoragedeğer , diğer sayfaya gitmek için window.location.href komutunu kullandığınız sürece kalır ve başka bir sayfaya gitmek için kullanırsanız <a href="location"></a>, $localStoragedeğer sonraki sayfada kaybolur.

Yerel depolama için aşağıdaki URL'ye bakmak için bir modül vardır:

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

ve HTML5 yerel depolama ve angularJ'ler için diğer bağlantı

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

kullanım ngStorageTüm AngularJS Yerel Depolama İhtiyaçlarınız İçin . Lütfen bunun Angular JS çerçevesinin yerel bir parçası DEĞİLDİR.

ngStorage iki hizmet içerir $localStorageve$sessionStorage

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

Demoyu Kontrol Edin

Daha fazla aktiviteye sahip bir alternatif modül daha var ngStorage

açısal yerel depolama:

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

localStorageAmaç için kullanabilirsiniz .

Adımlar:

1. dosyanıza ngStorage.min.js dosyasını ekleyin
2. modülünüze ngStorage bağımlılığı ekleyin
3. kumandanıza $ localStorage modülünü ekleyin
4. $ localStorage.key = değer kullan

Açısal html5 depolama hizmeti yazdım (yine başka). Otomatik güncellemeleri mümkün ngStoragekılmak, ancak sindirim döngülerini daha öngörülebilir / sezgisel hale getirmek (en azından benim için), durum yeniden yüklemeleri gerektiğinde işlemek için etkinlikler eklemek ve ayrıca sekmeler arasında paylaşım oturumu depolama alanı eklemek istedim. Sonra API modellenmiş $resourceve çağırdı angular-stored-object. Aşağıdaki gibi kullanılabilir:

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

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

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

API burada .

Repo burada .

Umarım birine yardım eder!

Verileri Açısal - yerel depolama alanında depolamak için adımları izleyin:

1. 'NgStorage.js' klasörüne ekleyin.

2. 'NgStorage' ı açısal.modülünüze enjekte edin

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

3. $localStorageApp.controller işlevinize ekleyin

4. $localStoragekontrolörünün içinde kullanabilirsiniz

Eg: $localstorage.login= true;

Yukarıdakiler, tarayıcı uygulamasını tarayıcı uygulamanızda saklayacaktır.

İhtiyaçlarınıza bağlı olarak, verilerin sonunda süresinin dolmasına izin vermek veya kaç kaydın saklanacağına ilişkin sınırlamalar ayarlamak istiyorsanız, https://github.com/jmdobry/angular-cache adresine , önbellek bellekte, localStorage veya sessionStorage'da oturur.

Buradaki ngStorage adı verilen bir üçüncü taraf komut dosyası kullanılmalı, bunun bir örneği.

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