Bagaimana cara menyimpan data di penyimpanan lokal menggunakan Angularjs?

Saat ini saya menggunakan layanan untuk melakukan tindakan, yaitu mengambil data dari server dan kemudian menyimpan data di server itu sendiri.

Alih-alih ini, saya ingin memasukkan data ke penyimpanan lokal alih-alih menyimpannya di server. Bagaimana saya melakukan ini?

ini sedikit kode saya yang menyimpan dan mengambil ke penyimpanan lokal. saya menggunakan acara siaran untuk menyimpan dan mengembalikan nilai-nilai dalam model.

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

Jika Anda menggunakan $window.localStorage.setItem(key,value)untuk menyimpan, $window.localStorage.getItem(key)untuk mengambil dan $window.localStorage.removeItem(key)menghapus, maka Anda dapat mengakses nilai di halaman mana pun.

Anda harus melewati $windowlayanan ke controller. Meskipun dalam JavaScript, windowobjek tersedia secara global.

Dengan menggunakan $window.localStorage.xxXX()pengguna memiliki kendali atas localStoragenilai. Ukuran data tergantung pada browser. Jika Anda hanya menggunakan $localStoragemaka nilainya tetap selama Anda menggunakan window.location.href untuk menavigasi ke halaman lain dan jika Anda menggunakan <a href="location"></a>untuk menavigasi ke halaman lain maka $localStoragenilai Anda hilang di halaman berikutnya.

Untuk penyimpanan lokal ada modul untuk itu lihat url di bawah ini:

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

dan tautan lain untuk penyimpanan lokal HTML5 dan angularJs

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

Gunakan ngStorageUntuk Semua Kebutuhan Penyimpanan Lokal AngularJS Anda. Harap dicatat bahwa ini BUKAN bagian asli kerangka JS Angular.

ngStorage berisi dua layanan, $localStoragedan$sessionStorage

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

Periksa Demo

Ada satu lagi modul alternatif yang memiliki lebih banyak aktivitas daripada ngStorage

penyimpanan sudut-lokal:

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

Anda dapat menggunakannya localStorageuntuk tujuan tersebut.

Langkah:

1. tambahkan ngStorage.min.js di file Anda
2. tambahkan dependensi ngStorage di modul Anda
3. tambahkan modul $ localStorage di controller Anda
4. gunakan $ localStorage.key = nilai

Saya menulis (lagi) layanan penyimpanan HTML5 sudut. Saya ingin menjaga agar pembaruan otomatis dimungkinkan ngStorage, tetapi membuat siklus intisari lebih mudah diprediksi / intuitif (setidaknya untuk saya), tambahkan acara untuk ditangani saat memuat ulang keadaan diperlukan, dan juga menambahkan penyimpanan sesi berbagi antar tab. Saya memodelkan API setelahnya $resourcedan menyebutnya angular-stored-object. Dapat digunakan sebagai berikut:

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

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

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

API ada di sini .

Repo ada di sini .

Semoga ini bisa membantu seseorang!

Ikuti langkah-langkah untuk menyimpan data dalam Angular - penyimpanan lokal:

1. Tambahkan 'ngStorage.js' di folder Anda.

2. Suntikkan 'ngStorage' di angular.module Anda

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

3. Tambahkan $localStoragefungsi app.controller Anda

4. Anda dapat menggunakan $localStoragedi dalam controller Anda

Eg: $localstorage.login= true;

Di atas akan menyimpan penyimpanan lokal di aplikasi browser Anda

Bergantung pada kebutuhan Anda, seperti jika Anda ingin agar data pada akhirnya kedaluwarsa atau menetapkan batasan pada berapa banyak catatan untuk disimpan, Anda juga dapat melihat https://github.com/jmdobry/angular-cache yang memungkinkan Anda menentukan apakah cache berada di memori, localStorage, atau sessionStorage.

Orang harus menggunakan skrip pihak ketiga untuk ini yang disebut ngStorage di sini adalah contoh cara menggunakannya. Ini memperbarui penyimpanan lokal dengan perubahan ruang lingkup / tampilan.

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