Як зберігати дані у локальному сховищі за допомогою Angularjs?

В даний час я використовую сервіс для виконання дії, а саме - отримання даних із сервера, а потім зберігання даних на самому сервері.

Замість цього я хочу помістити дані в локальну пам’ять, а не зберігати їх на сервері. Як це зробити?

це трохи мого коду, який зберігає та повертає до локального сховища. Я використовую трансляційні події для збереження та відновлення значень у моделі.

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

Якщо ви використовуєте $window.localStorage.setItem(key,value)для зберігання, $window.localStorage.getItem(key)пошуку та $window.localStorage.removeItem(key)видалення, ви можете отримати доступ до значень на будь-якій сторінці.

Ви повинні передати $windowпослугу контролеру. Хоча в JavaScript windowоб'єкт доступний у всьому світі.

За допомогою $window.localStorage.xxXX()користувач має контроль над localStorageзначенням. Розмір даних залежить від браузера. Якщо ви використовуєте лише $localStorageтоді, значення залишається до тих пір, поки ви використовуєте window.location.href для переходу до іншої сторінки, а якщо ви <a href="location"></a>переходите до іншої сторінки, то ваше $localStorageзначення втрачається на наступній сторінці.

Для локального зберігання існує модуль для перегляду нижче URL-адреси:

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

та інше посилання для локального зберігання HTML5 та angularJs

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

Використовуйте ngStorageдля всіх ваших потреб локального зберігання AngularJS. Зверніть увагу, що це НЕ є рідною частиною рамок Angular JS.

ngStorage містить дві послуги $localStorageта$sessionStorage

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

Перевірте демонстрацію

Є ще один альтернативний модуль, який має більшу активність, ніж ngStorage

кутовий-локальний сховище:

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

Ви можете використовувати localStorageдля цілей.

Кроки:

1. додати ngStorage.min.js у свій файл
2. додайте залежність ngStorage у свій модуль
3. додати модуль $ localStorage у свій контролер
4. використовувати $ localStorage.key = значення

Я є автором (ще однієї) послуги кутового зберігання html5. Я хотів, щоб автоматичні оновлення стали можливими ngStorage, але зробити цикли дайвінгу більш передбачуваними / інтуїтивними (принаймні для мене), додати події для обробки, коли потрібно перезавантажити стан, а також додати сховище сеансу спільного використання між вкладками. Я моделював API після $resourceі викликав його angular-stored-object. Його можна використовувати наступним чином:

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

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

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

API тут .

Репо тут .

Сподіваюся, це комусь допоможе!

Виконайте кроки для зберігання даних у кутовому - локальному сховищі:

1. Додайте "ngStorage.js" у свою папку.

2. Введіть 'ngStorage' у свій angular.module

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

3. Додайте $localStorageу свою функцію app.controller

4.Ви можете використовувати $localStorageвсередині свого контролера

Eg: $localstorage.login= true;

Вищезгадане збереже локальне зберігання у вашій програмі браузера

Залежно від ваших потреб, наприклад, якщо ви хочете дозволити закінчуванню терміну дії даних або встановити обмеження на кількість записів для зберігання, ви також можете переглянути https://github.com/jmdobry/angular-cache, який дозволяє визначити, чи кеш сидить у пам'яті, localStorage або sessionStorage.

Слід застосувати сторонній скрипт для цього під назвою ngStorage, ось приклад використання. Він оновлює локальне зберігання зі зміною сфери / перегляду.

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