如何使用Angularjs将数据存储在本地存储中？

177

当前，我正在使用一项服务来执行操作，即从服务器检索数据，然后将数据存储在服务器本身上。

取而代之的是，我想将数据放入本地存储中，而不是将其存储在服务器上。我该怎么做呢？

angularjs

— 毛里斯
source

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

— 安东
source

9

你怎么使用这个？

— chovy

4

弯曲，这是完整的角度示例stackoverflow.com/questions/12940974/…–

— Anton

290

记录sessionStorage≠localStorage

— 火星罗伯逊2014年

4

您可以使用$ window.sessionStorage，以便在测试中注入它

— GuillaumeMassé2014年

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

— GuillaumeMassé2014年

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值会在下一页丢失。

— 苏尼尔·古达（Sunil Gouda）
source

12

这个解决方案最适合我。当您可以轻松地直接访问DOM时，为什么要使用插件或模块？因为我想存储对象而不是简单的字符串，所以我只将angular.toJson（）与setItem（）结合使用，而angular.fromJson（）与getItem（）结合使用。简单。爱它。

— Brett Donald

5

这是最好的答案。无需外部依赖。

— 卡巴斯尔

2

同意，这是键/值对管理的最简单解决方案

— jolySoft

该行中的键是什么：$ window.localStorage.setItem（key，value）。它在哪里声明和设置？

关键是您想要的唯一值就是ID。因此，您在存储内容时就定义了密钥，这与您用来检索密钥的作用相同。

— user441521 '18

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大师
source

5

在StackOverflow上不鼓励仅链接的答案，因为外部链接趋于消失。

— Hubert Grzeskowiak

50

使用ngStorage您的所有AngularJS本地存储需求。请注意，这不是Angular JS框架的本机部分。

ngStorage 包含两个服务，$localStorage并且$sessionStorage

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

检查演示

— 杰西克
source

24

值得一提的是，它不是angular的一部分，应该作为附加文件导入

— Serge

1

链接到npm模块？

— chovy

4

还有一个替代模块，其功能比 ngStorage

angular-local-storage：

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

— 邦德尔
source

2

您可以使用localStorage此目的。

脚步：

在文件中添加ngStorage.min.js
在模块中添加ngStorage依赖项
在控制器中添加$ localStorage模块
使用$ localStorage.key =值

— Sukhminder Parmar
source

2

我（还有另一个）创作了角度html5存储服务。我想通过来使自动更新成为可能ngStorage，但要使摘要周期更可预测/更直观（至少对我而言），添加事件以在需要状态重新加载时进行处理，以及添加选项卡之间的共享会话存储。之后$resource，我对API进行了建模并对其进行了调用angular-stored-object。可以如下使用：

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

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

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

API在这里。

回购在这里。

希望对您有所帮助！

— 亚科夫
source

下选民会介意解释他们的选票吗？

— DerMike '16

1

我现在在我的项目中使用了角度存储对象，它真的很容易使用。而且，Yaacov的回答速度非常快。所以我也推荐它！

— JR Utily'2

2

请按照以下步骤将数据存储在Angular-本地存储中：

在文件夹中添加“ ngStorage.js”。

在您的angular.module中注入“ ngStorage”

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

添加$localStorage您的app.controller函数

4.您可以$localStorage在控制器内部使用

Eg: $localstorage.login= true;

以上将本地存储存储在您的浏览器应用程序中

— 山姆·鲁本
source

1

根据您的需求，例如是否要允许数据最终过期或对要存储的记录数设置限制，您还可以查看https://github.com/jmdobry/angular-cache，它允许您定义是否缓存位于内存，localStorage或sessionStorage中。

— 亚伦·莫里森
source

1

人们应该为此使用一个名为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>

— 阿尼克特·贾（Aniket Jha）
source