Как мне хранить данные в локальном хранилище, используя Angularjs?

177

В настоящее время я использую сервис для выполнения действия, а именно получения данных с сервера и последующего сохранения данных на самом сервере.

Вместо этого я хочу поместить данные в локальное хранилище, а не хранить их на сервере. Как мне это сделать?

mauris
источник

Ответы:

125

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

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;
}]);
Антон
источник
9
как ты это используешь?
Чови
4
Чови, вот полный угловой пример stackoverflow.com/questions/12940974/…
Антон
291
Для записи sessionStoragelocalStorage
Марс Робертсон
4
вы можете использовать $ window.sessionStorage, чтобы использовать его в своих тестах
Гийом Масс,
2
@Anton mozilla имеет исчерпывающую документацию: developer.mozilla.org/en-US/docs/Web/HTML developer.mozilla.org/en-US/docs/Web/CSS/CSS3 developer.mozilla.org/en-US/docs / Web / JavaScript
Гийом Масс
105

Если вы используете $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значение будет потеряно на следующей странице.

Сунил Гауда
источник
12
Это решение подходит мне лучше всего. Зачем использовать плагин или модуль, когда вы можете так же легко перейти прямо к DOM? Поскольку я хотел хранить объекты, а не простые строки, я просто использовал angular.toJson () в сочетании с setItem () и angular.fromJson () в сочетании с getItem (). Легко. Любить это.
Бретт Дональд
5
Это лучший ответ. Внешние зависимости не нужны.
Каспер Земьянек
2
Согласитесь, это самое простое решение для управления парой ключ / значение
jolySoft,
Что является ключом в строке: $ window.localStorage.setItem (ключ, значение). Где это заявлено и установлено?
Ключ в том, что вы хотите, чтобы этот уникальный идентификатор был значением. Таким образом, вы определяете ключ, когда сохраняете что-то, и это то же самое, что вы используете для его извлечения.
user441521
56

Для локального хранилища есть модуль для этого, смотрите ниже URL:

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

и другие ссылки для локального хранилища HTML5 и angularJs

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

JQuery Гуру
источник
5
Ответы только на ссылки не рекомендуется использовать в StackOverflow, так как внешние ссылки имеют тенденцию к смерти.
Юбер Гжесковяк
50

Используйте ngStorageдля всех ваших потребностей AngularJS локального хранения. Обратите внимание, что это НЕ встроенная часть платформы Angular JS.

ngStorage содержит две службы, $localStorageи$sessionStorage

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

Проверьте демо

Jethik
источник
24
Стоит отметить, что это не является частью angular, и должен быть импортирован как дополнительный файл
Серж
1
ссылка на модуль npm?
Чов
2

Вы можете использовать localStorageдля этой цели.

шаги:

  1. добавьте ngStorage.min.js в ваш файл
  2. добавить зависимость ngStorage в ваш модуль
  3. добавить модуль $ localStorage в ваш контроллер
  4. использовать $ localStorage.key = значение
Сухминдер Пармар
источник
2

Я создал (еще один) угловой сервис хранения 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 здесь .

Репо здесь .

Надеюсь, это кому-нибудь поможет!

Яаков
источник
Не желают ли избиратели-зачистки объяснить свои голоса, пожалуйста?
DerMike
1
Сейчас я использую angular-сохраненный объект в своем проекте, и он действительно прост в использовании. Более того, Яаков очень быстро отвечает на вопрос. Так что я тоже рекомендую!
JR Utily
2

Выполните шаги для хранения данных в Angular - локальное хранилище:

  1. Добавьте «ngStorage.js» в вашу папку.
  2. Введите ngStorage в свой angular.module

        eg: angular.module("app", [ 'ngStorage']);
  3. Добавьте $localStorageв свой app.controller функцию

4.Вы можете использовать $localStorageвнутри вашего контроллера

Eg: $localstorage.login= true;

Выше будет хранить локальное хранилище в вашем браузере приложения

Сэм Рубен
источник
1

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

Аарон Моррисон
источник
1

Нужно использовать сторонний скрипт для этого, который называется ngStorage. Вот пример использования. Он обновляет localalstorage с изменением области действия / представления.

    <!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>
Аникет Джа
источник