如何使用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

如果您用于$window.localStorage.setItem(key,value)存储,$window.localStorage.getItem(key)检索和$window.localStorage.removeItem(key)删除,则可以访问任何页面中的值.

您必须将$window服务传递给控制器.虽然在JavaScript中,window对象在全球范围内可用.

通过使用$window.localStorage.xxXX()用户可以控制的localStorage值.数据的大小取决于浏览器.如果您只使用$localStoragethen值,只要您使用window.location.href导航到其他页面,如果您使用<a href="location"></a>导航到其他页面,那么您的$localStorage值将在下一页中丢失.

Answer 3

对于本地存储,有一个模块可以查看下面的url:

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

以及HTML5本地存储和angularJs的其他链接

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

Answer 4

使用ngStorage满足您所有AngularJS本地存储需求.请注意,这不是Angular JS框架的原生部分.

ngStorage 包含两个服务,$localStorage和$sessionStorage

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

检查演示