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

Posted

技术标签:

【中文标题】如何使用 Angularjs 将数据存储在本地存储中？【英文标题】：How do I store data in local storage using Angularjs? 【发布时间】：2013-08-17 07:32:51 【问题描述】：

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

与此不同，我想将数据放入本地存储，而不是存储在服务器上。我该怎么做？

【问题讨论】：

【参考方案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;
]);

【讨论】：

chovy，这是完整的角度示例***.com/questions/12940974/… 备案sessionStorage≠localStorage 你可以使用 $window.sessionStorage 这样你就可以在你的测试中注入它 @GuillaumeMassé 作为 w3schools 的替代品，您有什么建议？ @Anton mozilla 有可靠的文档：developer.mozilla.org/en-US/docs/Web/htmldeveloper.mozilla.org/en-US/docs/Web/CSS/CSS3developer.mozilla.org/en-US/docs/Web/javascript【参考方案2】：

如果您使用$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 值会在下一页中丢失。

【讨论】：

这个解决方案最适合我。当您可以直接访问 DOM 时，为什么还要使用插件或模块？因为我想存储对象而不是简单的字符串，所以我只是将 angular.toJson() 与 setItem() 结合使用，并将 angular.fromJson() 与 getItem() 结合使用。简单。喜欢它。 这是最好的答案。不需要外部依赖。 同意，这是最简单的键/值对管理解决方案 行中的键是什么：$window.localStorage.setItem(key,value)。它在哪里声明和设置？ 关键是任何你想要的唯一ID的值。因此，您在存储某些内容时定义密钥，这与您用来检索它的内容相同。【参考方案3】：

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

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

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

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

【讨论】：

在 *** 上不鼓励仅链接的答案，因为外部链接往往会消失。【参考方案4】：

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

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

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

查看Demo

【讨论】：

值得一提的是它不是angular的一部分，应该作为附加文件导入 链接到 npm 模块？【参考方案5】：

还有一个比ngStorage具有更多活动的替代模块

角度本地存储：

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

【讨论】：

【参考方案6】：

你可以使用localStorage来达到目的。

步骤：

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

【讨论】：

【参考方案7】：

我创作了（又一个）有角度的 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 是here。

回购是here。

希望它对某人有所帮助！

【讨论】：

反对的选民愿意解释他们的投票吗？ 我现在在我的项目中使用了angular-stored-object，它真的很容易使用。此外，雅科夫回答问题的速度非常快。所以我也推荐它！【参考方案8】：

按照步骤在 Angular 中存储数据 - 本地存储：

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

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

        eg: angular.module("app", [ 'ngStorage']);
    在您的 app.controller 函数中添加 $localStorage

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

Eg: $localstorage.login= true;

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

【讨论】：

【参考方案9】：

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

【讨论】：

【参考方案10】：

应该为此使用名为 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>

【讨论】：

以上是关于如何使用 Angularjs 将数据存储在本地存储中？的主要内容，如果未能解决你的问题，请参考以下文章

本地存储与 AngularJS $cacheFactory

如何使用AngularJS将身份验证承载令牌存储在浏览器cookie中

Angularjs 数据存储最佳实践

如何将编辑的数据存储在本地存储中？

AngularJS 中会话存储、本地存储和 Cookie 的区别

如何在 Angular js 中存储和检索数据？