AngularJS之ionic 框架下实现 Localstorage本地存储


Posted in Javascript onApril 22, 2017

前言:

我们前台用的是ionic+AngularJS,做的是混合模式移动应用。最近有一个需求是,我在页面A上面滑动的时候,跳入页面B,页面B需要加载页面A的数据,这样的页面传值如何实现呢?那就需要用到LocalStorage本地存储了。

AngularJS之ionic 框架下实现 Localstorage本地存储AngularJS之ionic 框架下实现 Localstorage本地存储 

Ionic

Ionic是目前最有潜力的一款HTML5手机应用开发框架。通过SASS构架应用程序,他提供了很多UI控件来帮助开发者开发强大的应用。加上angularjs可以让ionic应用体验度增强。代码也非常简单。angularjs可以提供数据的双向绑定,使用它成为 Web 和移动开发者的共同选择。

angularjs

AngularJS建立在JavaScript基础之上,而后者正是目前世界上应用范围最广、灵活程度最高的编程语言之一。AngularJS能够为使用者提供一套完整的软件包,用于基于前端的应用程序。对于Web开发人员来说,AngularJS以框架形式将所有复杂性元素加以打包,从而保证使用者只需要直接接触那些最易于实现的功能。更多的介绍可以看我之前的博客。

在客户端存储数据(localStorage &sessionStorage )

Html5 提供了两种在客户端存储数据的新方法:

  1. localStorage - 没有时间限制的数据存储
  2. sessionStorage - 针对一个 session 的数据存储

之前,这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。在 HTML5 中,数据不是由每个服务器请求传递的,而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。对于不同的网站,数据存储于不同的区域,并且一个网站只能访问其自身的数据。

localStorage本地存储

相对于上述本地存储方案,localStorage有自身的优点:容量大、易用、强大、原生支持;缺点是兼容性差些(chrome,  safari, firefox,IE 9,IE8都支持 localStorage,主要是IE8以下版本不支持)、安全性也差些(所以请勿使用localStorage保存敏感信息)。 localStorage保存的数据,一般情况下是永久保存的,也就是说只要采用localstorage保存信息,数据便一直存储在用户的客户端中。即使用户关闭当前web浏览器后重新启动,数据让然存在。知道用户或程序明确制定删除,数据的生命周期才会结束。在安全性方面,localstorage是域内安全的,即localstorage是基于域的。任何在该域内的所有页面,都可以访问localstorage数据。

localStorage四种方法:

  1. localStorage.getItem(key):获取指定key本地存储的值
  2. localStorage.setItem(key,value):将value存储到key字段
  3. localStorage.removeItem(key):删除指定key本地存储的值
  4. localStorage.length是localStorage的项目数

项目实战:

evaluationTaskCtrl  controller.js

/*登陆controller*/ 
.controller('evaluationTaskCtrl', function($scope,$state,evaluationTaskService,studentEvaluateService) { 
  //右滑动跳入卷子界面-zzzzzz 
 $scope.onSwipeLeft = function(EvaluateCourse) { 
    localStorage.setItem("PaperId", EvaluateCourse[0].PaperId); 
     localStorage.setItem("TeacherName", EvaluateCourse[0].TeacherName); 
    localStorage.setItem("CourseID", EvaluateCourse[0].CourseID); 
    localStorage.setItem("TeacherID", EvaluateCourse[0].TeacherID); 
    localStorage.setItem("CourseName", EvaluateCourse[0].CourseName); 
    localStorage.setItem("CourseType",EvaluateCourse[0].CourseType); 
    $state.go("studentEvaluate"); 
    
 }; 
}

页面A.html

<ion-content class="has-header item-text-wrap" overflow-scroll='false'  on-swipe-left="onSwipeLeft(EvaluateCourse)" on-swipe-right="onSwipeRight()"> 
<ion-list > 
  <div class="item item-icon-left item-icon-right" ng-repeat="item in EvaluateCourse" ng-click="gotoStudentEvaluate(item)"> 
  <!--ng-click="gotoStudentEvaluate(item)"--> 
    <div >  
     
    <i class="icon ion-record " ng-style="{ color: color({{$index}}) }" style="font-size: 320%"> 
      <div style="font-size:45% ;font-weight:bold;position: relative;left: -42%;color:#FFFFFF"> 
       {{item.TeacherName|limitTo:1}} 
      </div> 
    </i>  
     
      <h2 style="position: relative;left:5%;font-weight:bold;">{{item.CourseName}}</h2>  
      <i class="ion-android-person" style="position: relative;left:5%;bottom:-3px;color: #AEEEEE"></i> 
      <p style="position: relative;left:5%;bottom:-2px;display: inline;color: #AAAAAA">{{item.TeacherName}}</p> 
    </div>    
</div> 
</div> 
<!--内容div--> 
</ion-list > 
</ion-content >

在页面B的controller.js里面获取值:

$scope.PaperId=localStorage.getItem("PaperId"); 
            $scope.TeacherName=localStorage.getItem("TeacherName"); 
            $scope.CourseID=localStorage.getItem("CourseID"); 
            $scope.TeacherID=localStorage.getItem("TeacherID"); 
            $scope.CourseName="【" +localStorage.getItem("CourseName")+"】";

在页面B上面显示:

<!-- 课程教师显示 --> 
    <h1 class="title" style="font-weight:bold;" ng-cloak>{{CourseName}} <span ng-bind="TeacherName"></span>

总结:

最近接触的都不能用经验来解决,因为是新事物,只能是百度了。后来也可以模仿着自己写一写,之前学到的理论知识也真正运用了出来。希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于jquery动态增减控件的一些想法和小插件
Aug 01 Javascript
javascript中获取下个月一号,是星期几
Jun 01 Javascript
JS保存、读取、换行、转Json报错处理方法
Jun 14 Javascript
node.js中的buffer.Buffer.isEncoding方法使用说明
Dec 14 Javascript
AngularJs Understanding the Controller Component
Sep 02 Javascript
jQuery右下角悬浮广告实例
Oct 17 Javascript
微信小程序实现表单校验功能
Mar 30 Javascript
vue2导航根据路由传值,而改变导航内容的实例
Nov 10 Javascript
完美解决axios跨域请求出错的问题
Feb 05 Javascript
JavaScript 点击触发复制功能实例详解
Nov 02 Javascript
vue实现购物车功能(商品分类)
Apr 20 Javascript
JavaScript代码实现简单计算器
Dec 27 Javascript
vue拦截器Vue.http.interceptors.push使用详解
Apr 22 #Javascript
vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据
Apr 22 #Javascript
Vue.use源码分析
Apr 22 #Javascript
uploader秒传图片到服务器完整代码
Apr 22 #Javascript
Node.js中看JavaScript的引用
Apr 22 #Javascript
详解Angular中的自定义服务Service、Provider以及Factory
Apr 22 #Javascript
Ionic2调用本地SQlite实例
Apr 22 #Javascript
You might like
PHP与MySQL开发中页面出现乱码的一种解决方法
2007/07/29 PHP
php相当简单的分页类
2008/10/02 PHP
php通过array_push()函数添加多个变量到数组末尾的方法
2015/03/18 PHP
PHP实现QQ空间自动回复说说的方法
2015/12/02 PHP
php基于curl实现的股票信息查询类实例
2016/11/11 PHP
WAF的正确bypass
2017/01/05 PHP
Laravel框架源码解析之入口文件原理分析
2020/05/14 PHP
JavaScript 基于原型的对象(创建、调用)
2009/10/16 Javascript
jQuery对象[0]是什么含义?
2010/07/31 Javascript
Jquery 跨域访问 Lightswitch OData Service的方法
2013/09/11 Javascript
JQuery与JS里submit()的区别示例介绍
2014/02/17 Javascript
JQuery打造省市下拉框联动效果
2014/05/18 Javascript
微信WeixinJSBridge API使用实例
2015/05/25 Javascript
在JavaScript中对HTML进行反转义详解
2016/05/18 Javascript
VueJs路由跳转——vue-router的使用详解
2017/01/10 Javascript
详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
2018/04/13 Javascript
讲解vue-router之命名路由和命名视图
2018/05/28 Javascript
如何为你的JavaScript代码日志着色详解
2019/04/08 Javascript
jQuery Datatables 动态列+跨列合并实现代码
2020/01/30 jQuery
vue-quill-editor 自定义工具栏和自定义图片上传路径操作
2020/08/03 Javascript
Python中的左斜杠、右斜杠(正斜杠和反斜杠)
2016/08/30 Python
使用 Python 玩转 GitHub 的贡献板(推荐)
2019/04/04 Python
python 抓包保存为pcap文件并解析的实例
2019/07/23 Python
Python中关于浮点数的冷知识
2019/09/22 Python
分享8点超级有用的Python编程建议(推荐)
2019/10/13 Python
在Python 的线程中运行协程的方法
2020/02/24 Python
python/golang 删除链表中的元素
2020/09/14 Python
python爬虫基础之urllib的使用
2020/12/31 Python
玖熙女鞋美国官网:Nine West
2016/10/06 全球购物
彪马加拿大官网:PUMA加拿大
2018/10/04 全球购物
竞聘医务工作人员的自我评价分享
2013/11/04 职场文书
六十大寿答谢词
2014/01/12 职场文书
2015年女生节活动总结
2015/02/27 职场文书
盲山观后感
2015/06/11 职场文书
2015质检员个人年终工作总结
2015/10/23 职场文书
关于python3 opencv 图像二值化的问题(cv2.adaptiveThreshold函数)
2022/04/04 Python