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

Question

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

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

Answer 1

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

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

Answer 2

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

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

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

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

Answer 3

Использование ngStorage для всех ваших AngularJS Needs Local Storage. Обратите внимание, что это НЕ является неотъемлемой частью системы Angular JS.

ngStorage содержит две услуги: $ localStorage и $ sessionStorage.

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

Проверить Demo

Answer 4

Существует еще один альтернативный модуль, который имеет большую активность, чем ngStorage

угловых-местные-хранения:

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

Answer 5

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

Answer 6

Я автор (еще другой) угловой html5 хранение сервис. Я хотел сохранить автоматические обновления, сделанные ngStorage, но сделать циклы дайджеста более предсказуемыми/интуитивными (по крайней мере для меня), добавлять события для обработки, когда требуются перезагрузки штата, а также добавлять хранилище сеансов обмена между вкладками. Я смоделировал API после $ resource и назвал его угловым хранимым объектом. Он может быть использован следующим образом:

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

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

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

API: http://yaacovcr.github.io/angular-stored-object/docs/#/api

Repo: https://github.com/yaacovCR/angular-stored-object

Надеется, что это помогает кто-то!

Answer 7

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

Answer 8

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

Шаги:

add ngStorage.min.js in your file 
add ngStorage dependency in your module 
add $localStorage module in your controller 
use $localStorage.key = value 

Answer 9

следует использовать сценарий третьей стороны для этого под названием под названием ngStorage вот пример того, как use.it обновления LocalStorage с изменением области действия/зрения.

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