关于AngularJs数据的本地存储详解


Posted in Javascript onJanuary 20, 2017

第一、创建一个factory来储存和调取你的数据(你可以单独创建一个js文件,按照语义命名如:dataService.js。然后在你的主页面引入这个JS文件)

<!--引入到你的主页面里面-->
<script src="dataService.js"></script>
创建一个factory
'use strict';
angular.module('myApp')
.factory('datadService',['$window',function($window) {
 return{ 
 //存储单个属性
  set :function(key,value){
  $window.localStorage[key]=value;
  }, 
  //读取单个属性
  get:function(key,defaultValue){
  return $window.localStorage[key] || defaultValue;
  }, 
  //存储对象,以JSON格式存储
  setObject:function(key,value){
  $window.localStorage[key]=JSON.stringify(value);
  }, 
  //读取对象
  getObject: function (key) {
  return JSON.parse($window.localStorage[key] || '{}');
  }
 }
}]);

第二、将你创建的这个方法模块【datadService】注入到你要控制器中如下的控制器为【productCtrl】,下面我们创建一个set.js文件,里面代码如下:

'use strict';
angular.module('myApp').controller(
 'productCtrl',
 [ '$scope','datadService',
 function($scope, datadService) {
 $scope.appiAppType = 1;
 //这里面$scope.appiAppType的赋值同样可以通过$http.post或者$http.get
 //等方法返回的参数去赋值,例子如下:
 //$http.post('这里是你所要访问的接口【URL】',这里是你想要上传的参数).success(function(data){
   // $scope.appiAppType = data;
   //});
 datadService.setObject("lodinData", $scope.appiAppType);// 将你获取来的数据存储到你之前创建的【datadService】中,这里面的【lodinData】是KEY(个人理解就是你把数据存到大箱子里面这个箱子就是【datadService】,为了方便在这个箱子里面更好的寻找你想要的数据就给他一个小标签,那就是【lodinData】)
 } ]);

第三、关于存储好的数据如何在不同的控制其中获取到,下面我们创建一个get.js,里面代码如下:

'use strict';
//首先大家要把之前创建好的模块也就是那个装数据的箱子【datadService】放到这个控制器中(也就是模块注入)
//其次大家通过之前咱们设定的标签【lodinData】,用【getObject('key')】方法取到你想要的数据;
//具体实现就一行代码:datadService.getObject('lodinData');「注:把箱子拿出来(datadService)用(getObject)去拿你的这个(lodinData)标签下的数据」
angular.module('myApp').controller(
 'completeCtrl',
 [ '$scope', 'datadService',
 function($scope, datadService) {
 //我们这里取到来上面已经存好的数据:【datadService.getObject('lodinData');】并且把这个数据赋值给了【$scope.LoginList】
 $scope.LoginList = datadService.getObject('lodinData');
 //这里大家可以打印一下$scope.LoginList 看看里面是什么;
 alert(JSON.stringify($scope.LoginList))
 } ]);

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
ECMAScript 基础知识
Jun 29 Javascript
javascript 函数式编程
Aug 16 Javascript
jQuery中创建实例与原型继承揭秘
Dec 21 Javascript
js 获取radio按钮值的实例
Aug 17 Javascript
JQuery实现表格动态增加行并对新行添加事件
Jul 30 Javascript
基于jQuery实现仿QQ空间送礼物功能代码
May 24 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
Nov 14 Javascript
js 索引下标之li集合绑定点击事件
Jan 12 Javascript
小程序图片剪裁加旋转的示例代码
Jul 10 Javascript
vscode中eslint插件的配置(prettier配置无效)
Sep 10 Javascript
解决vue页面渲染但dom没渲染的操作
Jul 27 Javascript
Element-ui upload上传文件限制的解决方法
Jan 22 Javascript
html5 canvas 详细使用教程
Jan 20 #Javascript
canvas绘制万花筒效果(代码分享)
Jan 20 #Javascript
原生js实现网页顶部自动下拉/收缩广告效果
Jan 20 #Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
Jan 20 #Javascript
轻松理解Javascript变量的相关问题
Jan 20 #Javascript
js+css3实现旋转效果
Jan 20 #Javascript
Bootstrap 手风琴菜单的实现代码
Jan 20 #Javascript
You might like
php file_get_contents取文件中数组元素的方法
2017/04/01 PHP
ThinkPHP5框架中使用JWT的方法示例
2020/06/03 PHP
javascript 同时在IE和FireFox获取KeyCode的代码
2010/02/07 Javascript
利用webqq协议使用python登录qq发消息源码参考
2013/04/08 Javascript
javaScript(JS)替换节点实现思路介绍
2013/04/17 Javascript
基于jQuery实现的QQ表情插件
2015/08/25 Javascript
jquery实现两边飘浮可关闭的对联广告
2015/11/27 Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
2017/04/13 Javascript
jQuery Ajax向服务端传递数组参数值的实例代码
2017/09/03 jQuery
javascript数组拍平方法总结
2018/01/20 Javascript
iview在vue-cli3如何按需加载的方法
2018/10/31 Javascript
react-router-dom 嵌套路由的实现
2020/05/02 Javascript
vue任意关系组件通信与跨组件监听状态vue-communication
2020/10/18 Javascript
Ant design vue table 单击行选中 勾选checkbox教程
2020/10/24 Javascript
[01:02]2014 DOTA2国际邀请赛中国区预选赛 现场抢先看
2014/05/22 DOTA
[02:32]【DOTA2亚洲邀请赛】iceice,梦开始的地方
2017/03/13 DOTA
Python常用模块用法分析
2014/09/08 Python
python 垃圾收集机制的实例详解
2017/08/20 Python
python实现猜单词小游戏
2020/05/22 Python
Laravel+Dingo/Api 自定义响应的实现
2019/02/17 Python
Python中Numpy ndarray的使用详解
2019/05/24 Python
Python学习笔记之For循环用法详解
2019/08/14 Python
Python通过socketserver处理多个链接
2020/03/18 Python
Python如何读写二进制数组数据
2020/08/01 Python
用python爬虫批量下载pdf的实现
2020/12/01 Python
法警的竞聘演讲稿
2014/01/02 职场文书
酒店大堂副理的职责范文
2014/02/13 职场文书
《歌唱二小放牛郎》教学反思
2014/04/19 职场文书
计算机网络专业自荐书
2014/06/09 职场文书
社区党建工作汇报材料
2014/08/14 职场文书
银行贷款收入证明
2014/10/17 职场文书
党的群众路线教育实践活动个人整改措施落实情况
2014/11/04 职场文书
2015教师见习期工作总结
2014/12/12 职场文书
勤俭节约倡议书范文
2015/04/29 职场文书
中秋联欢会主持词
2015/07/04 职场文书
Go语言切片前或中间插入项与内置copy()函数详解
2021/04/27 Golang