179

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

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

4

10 回答 10

124

这是我的一些代码，用于存储和检索到本地存储。我使用广播事件来保存和恢复模型中的值。

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;
}]);
于 2013-08-15T13:53:53.293 回答
110

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

于 2016-05-05T11:52:23.133 回答
56

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

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

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

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

于 2013-08-15T06:06:53.990 回答
50

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

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

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

检查演示

于 2015-03-04T11:33:19.447 回答
4

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

角度本地存储：

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

于 2015-04-17T14:07:11.480 回答
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 在这里。

回购在这里。

希望它可以帮助某人！

于 2016-03-28T18:08:50.717 回答
2

您可以localStorage用于此目的。

脚步：

  1. 在你的文件中添加 ngStorage.min.js
  2. 在你的模块中添加 ngStorage 依赖
  3. 在控制器中添加 $localStorage 模块
  4. 使用 $localStorage.key = 值
于 2016-05-12T04:14:43.727 回答
2

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

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

  2. 在 angular.module 中注入“ngStorage”

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

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

Eg: $localstorage.login= true;

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

于 2019-05-09T10:35:51.393 回答
1

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

于 2015-08-26T16:05:24.183 回答
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>
于 2018-02-03T06:59:49.873 回答