Currently I am using a service to perform an action, namely retrieve data from the server and then store the data on the server itself.
目前,我正在使用一个服务执行一个操作,即从服务器检索数据,然后将数据存储在服务器本身。
Instead of this, I want to put the data into local storage instead of storing it on the server. How do I do this?
相反,我希望将数据放入本地存储,而不是将其存储在服务器上。我该怎么做呢?
9 个解决方案
#1
114
this is a bit of my code that stores and retrieves to local storage. i use broadcast events to save and restore the values in the model.
这是我的一段代码,用于存储和检索本地存储。我使用广播事件来保存和恢复模型中的值。
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;
}]);
#2
83
If you use $window.localStorage.setItem(key,value)
to store,$window.localStorage.getItem(key)
to retrieve and $window.localStorage.removeItem(key)
to remove, then you can access the values in any page.
如果您使用$window.localStorage.setItem(key,value)来存储,$window.localStorage.getItem(key)来检索,$ window.localStorage.removeItem(key)来删除,那么您可以访问任何页面中的值。
You have to pass the $window
service to the controller. Though in JavaScript, window
object is available globally.
您必须将$window服务传递给控制器。虽然在JavaScript中,窗口对象是全局可用的。
By using $window.localStorage.xxXX()
the user has control over the localStorage
value. The size of the data depends upon the browser. If you only use $localStorage
then value remains as long as you use window.location.href to navigate to other page and if you use <a href="location"></a>
to navigate to other page then your $localStorage
value is lost in the next page.
通过使用$window.localStorage.xxXX(),用户可以控制localStorage值。数据的大小取决于浏览器。如果只使用$localStorage,那么只要使用windows .location,值就会保持不变。href导航到其他页面,如果您使用导航到其他页面,那么您的$localStorage值将在下一页中丢失。
#3
53
For local storage there is a module for that look at below url:
对于本地存储,有一个模块可以查看下面的url:
https://github.com/grevory/angular-local-storage
https://github.com/grevory/angular-local-storage
and other link for HTML5 local storage and angularJs
以及其他HTML5本地存储和angularJs的链接。
http://www.amitavroy.com/justread/content/articles/html5-local-storage-with-angular-js/
http://www.amitavroy.com/justread/content/articles/html5-local-storage-with-angular-js/
#4
44
Use ngStorage
For All Your AngularJS Local Storage Needs. Please note that this is NOT a native part of the Angular JS framework.
使用ngStorage满足您所有的AngularJS本地存储需求。请注意,这不是角JS框架的本机部分。
ngStorage
contains two services: $localStorage and $sessionStorage.
ngStorage包含两个服务:$localStorage和$sessionStorage。
angular.module('app', [
'ngStorage'
]).controller('Ctrl', function(
$scope,
$localStorage,
$sessionStorage
){});
Check the Demo
检查演示
#5
3
There is one more alternative module which has more activity than ngStorage
与ngStorage相比,还有一个可选模块具有更多的活动
angular-local-storage:
angular-local-storage:
https://github.com/grevory/angular-local-storage
https://github.com/grevory/angular-local-storage
#6
1
Depending on your needs, like if you want to allow the data to eventually expire or set limitations on how many records to store, you could also look at https://github.com/jmdobry/angular-cache which allows you to define if the cache sits in memory, localStorage, or sessionStorage.
根据您的需要,例如,如果您希望允许数据最终过期或设置存储记录数量的限制,您还可以查看https://github.com/jmdobry/angular-cache,它允许您定义缓存是否位于内存、localStorage或sessionStorage中。
#7
1
I authored (yet another) angular html5 storage service. I wanted to keep the automatic updates made possible by ngStorage, but make digest cycles more predictable/intuitive (at least for me), add events to handle when state reloads are required, and also add sharing session storage between tabs. I modeled the API after $resource and called it angular-stored-object. It can be used as follows:
我编写了(另一个)有棱角的html5存储服务。我想让ngStorage实现自动更新,但让摘要周期更可预测/直观(至少对我来说),在需要状态重载时添加事件来处理,并在选项卡之间添加共享会话存储。我根据$resource对API进行建模,并将其称为angular-stored对象。它的用途如下:
angular
.module('auth', ['yaacovCR.storedObject']);
angular
.module('auth')
.factory('session', session);
function session(ycr$StoredObject) {
return new ycr$StoredObject('session');
}
API: http://yaacovcr.github.io/angular-stored-object/docs/#/api
API:http://yaacovcr.github.io/angular-stored-object/docs/ / API
Repo: https://github.com/yaacovCR/angular-stored-object
回购:https://github.com/yaacovCR/angular-stored-object
Hope it helps somebody!
希望它能帮助别人!
#8
1
You can use localStorage for the purpose.
您可以为此目的使用localStorage。
Steps:
步骤:
add ngStorage.min.js in your file
add ngStorage dependency in your module
add $localStorage module in your controller
use $localStorage.key = value
#9
0
One should use a third party script for this called called ngStorage here is a example how to use.It updates localstorage with change in scope/view.
我们应该使用一个名为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>
#1
114
this is a bit of my code that stores and retrieves to local storage. i use broadcast events to save and restore the values in the model.
这是我的一段代码,用于存储和检索本地存储。我使用广播事件来保存和恢复模型中的值。
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;
}]);
#2
83
If you use $window.localStorage.setItem(key,value)
to store,$window.localStorage.getItem(key)
to retrieve and $window.localStorage.removeItem(key)
to remove, then you can access the values in any page.
如果您使用$window.localStorage.setItem(key,value)来存储,$window.localStorage.getItem(key)来检索,$ window.localStorage.removeItem(key)来删除,那么您可以访问任何页面中的值。
You have to pass the $window
service to the controller. Though in JavaScript, window
object is available globally.
您必须将$window服务传递给控制器。虽然在JavaScript中,窗口对象是全局可用的。
By using $window.localStorage.xxXX()
the user has control over the localStorage
value. The size of the data depends upon the browser. If you only use $localStorage
then value remains as long as you use window.location.href to navigate to other page and if you use <a href="location"></a>
to navigate to other page then your $localStorage
value is lost in the next page.
通过使用$window.localStorage.xxXX(),用户可以控制localStorage值。数据的大小取决于浏览器。如果只使用$localStorage,那么只要使用windows .location,值就会保持不变。href导航到其他页面,如果您使用导航到其他页面,那么您的$localStorage值将在下一页中丢失。
#3
53
For local storage there is a module for that look at below url:
对于本地存储,有一个模块可以查看下面的url:
https://github.com/grevory/angular-local-storage
https://github.com/grevory/angular-local-storage
and other link for HTML5 local storage and angularJs
以及其他HTML5本地存储和angularJs的链接。
http://www.amitavroy.com/justread/content/articles/html5-local-storage-with-angular-js/
http://www.amitavroy.com/justread/content/articles/html5-local-storage-with-angular-js/
#4
44
Use ngStorage
For All Your AngularJS Local Storage Needs. Please note that this is NOT a native part of the Angular JS framework.
使用ngStorage满足您所有的AngularJS本地存储需求。请注意,这不是角JS框架的本机部分。
ngStorage
contains two services: $localStorage and $sessionStorage.
ngStorage包含两个服务:$localStorage和$sessionStorage。
angular.module('app', [
'ngStorage'
]).controller('Ctrl', function(
$scope,
$localStorage,
$sessionStorage
){});
Check the Demo
检查演示
#5
3
There is one more alternative module which has more activity than ngStorage
与ngStorage相比,还有一个可选模块具有更多的活动
angular-local-storage:
angular-local-storage:
https://github.com/grevory/angular-local-storage
https://github.com/grevory/angular-local-storage
#6
1
Depending on your needs, like if you want to allow the data to eventually expire or set limitations on how many records to store, you could also look at https://github.com/jmdobry/angular-cache which allows you to define if the cache sits in memory, localStorage, or sessionStorage.
根据您的需要,例如,如果您希望允许数据最终过期或设置存储记录数量的限制,您还可以查看https://github.com/jmdobry/angular-cache,它允许您定义缓存是否位于内存、localStorage或sessionStorage中。
#7
1
I authored (yet another) angular html5 storage service. I wanted to keep the automatic updates made possible by ngStorage, but make digest cycles more predictable/intuitive (at least for me), add events to handle when state reloads are required, and also add sharing session storage between tabs. I modeled the API after $resource and called it angular-stored-object. It can be used as follows:
我编写了(另一个)有棱角的html5存储服务。我想让ngStorage实现自动更新,但让摘要周期更可预测/直观(至少对我来说),在需要状态重载时添加事件来处理,并在选项卡之间添加共享会话存储。我根据$resource对API进行建模,并将其称为angular-stored对象。它的用途如下:
angular
.module('auth', ['yaacovCR.storedObject']);
angular
.module('auth')
.factory('session', session);
function session(ycr$StoredObject) {
return new ycr$StoredObject('session');
}
API: http://yaacovcr.github.io/angular-stored-object/docs/#/api
API:http://yaacovcr.github.io/angular-stored-object/docs/ / API
Repo: https://github.com/yaacovCR/angular-stored-object
回购:https://github.com/yaacovCR/angular-stored-object
Hope it helps somebody!
希望它能帮助别人!
#8
1
You can use localStorage for the purpose.
您可以为此目的使用localStorage。
Steps:
步骤:
add ngStorage.min.js in your file
add ngStorage dependency in your module
add $localStorage module in your controller
use $localStorage.key = value
#9
0
One should use a third party script for this called called ngStorage here is a example how to use.It updates localstorage with change in scope/view.
我们应该使用一个名为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>