• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > 关于AngularJs数据的本地存储详解

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

作者:潘冬子 字体:[增加 减小] 来源:互联网 时间:2017-05-11

潘冬子通过本文主要向大家介绍了angularjs 路由详解,angularjs详解,angularjs数据交互,angularjs数据绑定,angularjs 请求数据等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

第一、创建一个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] || '{}');
  }
 }
}]);
</div>

第二、将你创建的这个方法模块【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】)
 } ]);
</div>

第三、关于存储好的数据如何在不同的控制其中获取到,下面我们创建一个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))
 } ]);
</div>

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

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 详解angularJs模块ui-router之状态嵌套和视图嵌套
  • 详解AngularJs ui-router 路由的简单介绍
  • 详解AngularJS ui-sref的简单使用
  • 详解在Angularjs中ui-sref和$state.go如何传递参数
  • angularjs中的$eval方法详解
  • AngularJS双向绑定和依赖反转实例详解
  • 详解angularJs指令的3种绑定策略
  • 详解AngularJs HTTP响应拦截器实现登陆、权限校验
  • AngularJS中的拦截器实例详解
  • AngularJS表单提交实例详解

相关文章

  • 2017-05-11JS中实现函数return多个返回值的实例
  • 2017-05-11js-FCC算法-No repeats please字符串的全排列(详解)
  • 2017-05-11NodeJs模拟登陆正方教务
  • 2017-05-11NodeJS实现客户端js加密
  • 2017-05-11微信小程序实战之自定义抽屉菜单(7)
  • 2017-05-11jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
  • 2017-05-11JavaScript实现弹窗效果代码分析
  • 2017-05-11jquery实现转盘抽奖功能
  • 2017-05-11详解浏览器渲染页面过程
  • 2017-05-11原生js实现对Ajax的封装(仿jquery)

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • javascript 实现小球碰撞
    • jQuery插件Echarts实现的渐变色柱状图
    • 从零学习node.js之文件操作(三)
    • 你不知道的 javascript【推荐】
    • jQuery实现扑克正反面翻牌效果
    • js实现网页定位导航功能
    • .html(),.text()和.val()的差异总结:
    • angularjs使用directive实现分页组件的示例
    • Bootstrap笔记之缩略图、警告框实例详解
    • js eval函数使用,js对象和字符串互转实例

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有