热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

本文主要介绍了每一个独立的JS文件或者不同的控制器如何实现数据的共享与交互的方法。具有一定的参考价值,下面跟着小编一起来看下吧

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



创建一个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))
 } ]);

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


推荐阅读
  • 本文介绍如何在Spring Boot项目中集成Redis,并通过具体案例展示其配置和使用方法。包括添加依赖、配置连接信息、自定义序列化方式以及实现仓储接口。 ... [详细]
  • 在macOS环境下使用Electron Builder进行应用打包时遇到签名验证失败的问题,具体表现为签名后spctl命令检测到应用程序未通过公证(Notarization)。本文将详细探讨该问题的原因及解决方案。 ... [详细]
  • 网易严选Java开发面试:MySQL索引深度解析
    本文详细记录了网易严选Java开发岗位的面试经验,特别针对MySQL索引相关的技术问题进行了深入探讨。通过本文,读者可以了解面试官常问的索引问题及其背后的原理。 ... [详细]
  • 探索电路与系统的起源与发展
    本文回顾了电路与系统的发展历程,从电的早期发现到现代电子器件的应用。文章不仅涵盖了基础理论和关键发明,还探讨了这一学科对计算机、人工智能及物联网等领域的深远影响。 ... [详细]
  • 科研单位信息系统中的DevOps实践与优化
    本文探讨了某科研单位通过引入云原生平台实现DevOps开发和运维一体化,显著提升了项目交付效率和产品质量。详细介绍了如何在实际项目中应用DevOps理念,解决了传统开发模式下的诸多痛点。 ... [详细]
  • 深入理解 .NET 中的中间件
    中间件是插入到应用程序请求处理管道中的组件,用于处理传入的HTTP请求和响应。它在ASP.NET Core中扮演着至关重要的角色,能够灵活地扩展和自定义应用程序的行为。 ... [详细]
  • 本文深入探讨了SQL数据库中常见的面试问题,包括如何获取自增字段的当前值、防止SQL注入的方法、游标的作用与使用、索引的形式及其优缺点,以及事务和存储过程的概念。通过详细的解答和示例,帮助读者更好地理解和应对这些技术问题。 ... [详细]
  • 在 Android 开发中,通过 Intent 启动 Activity 或 Service 时,可以使用 putExtra 方法传递数据。接收方可以通过 getIntent().getExtras() 获取这些数据。本文将介绍如何使用 RoboGuice 框架简化这一过程,特别是 @InjectExtra 注解的使用。 ... [详细]
  • 云函数与数据库API实现增删查改的对比
    本文将深入探讨使用云函数和数据库API实现数据操作(增删查改)的不同方法,通过详细的代码示例帮助读者更好地理解和掌握这些技术。文章不仅提供代码实现,还解释了每种方法的特点和适用场景。 ... [详细]
  • 深入解析Spring启动过程
    本文详细介绍了Spring框架的启动流程,帮助开发者理解其内部机制。通过具体示例和代码片段,解释了Bean定义、工厂类、读取器以及条件评估等关键概念,使读者能够更全面地掌握Spring的初始化过程。 ... [详细]
  • 本章详细介绍SP框架中的数据操作方法,包括数据查找、记录查询、新增、删除、更新、计数及字段增减等核心功能。通过具体示例和详细解析,帮助开发者更好地理解和使用这些方法。 ... [详细]
  • 本文介绍如何在Vue项目中配置Webpack,使JS代码作为入口文件直接嵌入到HTML中,而不是传统的HTML作为入口。 ... [详细]
  • 配置PHPStudy环境并使用DVWA进行Web安全测试
    本文详细介绍了如何在PHPStudy环境下配置DVWA( Damn Vulnerable Web Application ),并利用该平台进行SQL注入和XSS攻击的练习。通过此过程,读者可以熟悉常见的Web漏洞及其利用方法。 ... [详细]
  • 烤鸭|本文_Spring之Bean的生命周期详解
    烤鸭|本文_Spring之Bean的生命周期详解 ... [详细]
  • QNX 微内核(procnto-instr)的监测版本内置了高级跟踪与分析工具,能够实现实时系统监控。该模块适用于单处理器及多处理器系统。 ... [详细]
author-avatar
阿川那小子
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有