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值。数据的大小取决于浏览器。如果您只使用$localStorage，只要您使用 window.location.href 导航到其他页面并使用<a href="location"></a>，则值仍然有效要导航到其他页面，您的$localStorage值将在下一页中丢失。

Answer 3

对于本地存储，有一个模块可以查看以下网址：

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

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

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

Answer 4

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

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

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

检查Demo

Answer 5

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

更多

角本地存储：

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

Answer 6

您可以将localStorage用于此目的。

<强>步骤：

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

Answer 7

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

Answer 8

我创作了（另一个）角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。

希望它有所帮助！

Answer 9

应该使用第三方脚本，这称为ngStorage，这是一个如何使用的示例。它更新了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>

Answer 10

按照将数据存储在Angular-本地存储中的步骤进行操作

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

在您的angular.module中注入'ngStorage'

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

在您的app.controller函数中添加$localStorage

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

Eg: $localstorage.login= true;

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

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

10 个答案: