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

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

相反，我希望将数据存储到本地存储中，而不是存储在服务器上。我该怎么做？

394979 次浏览
小开

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

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

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

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

小开
最佳答案

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

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

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

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

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

检查 演示

小开

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

角度-本地-储存:

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

小开

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

小开

我编写了(另一个)角形 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');
}

空气污染指数是 给你。

回购是 给你。

希望对谁有帮助！

小开

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

您必须将 $window服务传递给控制器。

通过使用 $window.localStorage.xxXX()，用户可以控制 localStorage值。数据的大小取决于浏览器。如果只使用 $localStorage，那么只要使用 < em > window.location.href 导航到其他页面，值就保持不变; 如果使用 <a href="location"></a>导航到其他页面，那么在下一页中就会丢失 $localStorage值。

小开

您可以使用 localStorage。

步骤:

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

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

按照以下步骤在 Angular-local 存储器中存储数据:

  1. 在文件夹中添加‘ ngStorage.js’。

  2. 在 angular.module 中注入‘ ngStorage’

        eg: angular.module("app", [ 'ngStorage']);
  3. Add $localStorage in your app.controller function

4.You can use $localStorage inside your controller 

Eg: $localstorage.login= true;

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


提交答案