关于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 相关文章推荐
JavaScript入门教程(12) js对象化编程
Jan 31 Javascript
一个可拖拽列宽表格实例演示
Nov 26 Javascript
javascript history对象(历史记录)使用方法(实现浏览器前进后退)
Jan 07 Javascript
c#程序员对TypeScript的认识过程
Jun 19 Javascript
JavaScript对象学习小结
Sep 02 Javascript
基于jQuery通过jQuery.form.js插件实现异步上传
Dec 13 Javascript
理解javascript正则表达式
Mar 08 Javascript
js中遍历Map对象的方法
Jul 27 Javascript
JS简单判断字符在另一个字符串中出现次数的2种常用方法
Apr 20 Javascript
vue文件树组件使用详解
Mar 29 Javascript
用Vue编写抽象组件的方法
May 06 Javascript
jquery自定义组件实例详解
Dec 31 jQuery
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异步调用socket实现代码
2012/01/12 PHP
PHP中PDO的事务处理分析
2016/04/07 PHP
在线编辑器的实现原理(兼容IE和FireFox)
2007/03/09 Javascript
jquery isEmptyObject判断是否为空对象的函数
2011/02/14 Javascript
推荐10个超棒的jQuery工具提示插件
2011/10/11 Javascript
javascript设计模式 封装和信息隐藏(上)
2012/07/24 Javascript
javascript使用isNaN()函数判断变量是否为数字
2013/09/21 Javascript
简单的jQuery入门指引
2015/07/28 Javascript
JS实现鼠标滑过折叠与展开菜单效果代码
2015/09/06 Javascript
在ASP.NET MVC项目中使用RequireJS库的用法示例
2016/02/15 Javascript
Javascript数组Array基础介绍
2016/03/13 Javascript
BootStrap轮播HTML代码(推荐)
2016/12/10 Javascript
如何使用vuejs实现更好的Form validation?
2017/04/07 Javascript
angular使用bootstrap方法手动启动的实例代码
2017/07/18 Javascript
jquery引入外部CDN 加载失败则引入本地jq库
2018/05/23 jQuery
JS正则表达式封装与使用操作示例
2019/05/15 Javascript
Vue项目实现换肤功能的一种方案分析
2019/08/28 Javascript
JS实现动态无缝轮播
2020/01/11 Javascript
浅谈vue中document.getElementById()拿到的是原值的问题
2020/07/26 Javascript
js实现弹幕飞机效果
2020/08/27 Javascript
python 控制语句
2011/11/03 Python
Python中优化NumPy包使用性能的教程
2015/04/23 Python
Python实现Linux的find命令实例分享
2017/06/04 Python
python leetcode 字符串相乘实例详解
2018/09/03 Python
Python socket 套接字实现通信详解
2019/08/27 Python
python爬虫模拟浏览器访问-User-Agent过程解析
2019/12/28 Python
使用Python打造一款间谍程序的流程分析
2020/02/21 Python
Python  word实现读取及导出代码解析
2020/07/09 Python
基于Modernizr 让网站进行优雅降级的分析
2013/04/21 HTML / CSS
关于HTML5+ API plusready的兼容问题
2020/11/20 HTML / CSS
意大利辅助药品、药物和补品在线销售:FarmaEurope
2020/04/29 全球购物
学校庆元旦歌咏比赛主持词
2014/03/18 职场文书
学习经验交流会主持词
2014/04/01 职场文书
财政局个人总结
2015/03/04 职场文书
python超详细实现完整学生成绩管理系统
2022/03/17 Python
【海涛教你打DOTA】黑鸟第一视角解说
2022/04/01 DOTA