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实现省市区三级联动效果
Dec 25 Javascript
jquery分隔Url的param方法(推荐)
May 25 Javascript
浅谈json取值(对象和数组)
Jun 24 Javascript
JS实现简单的二元方程计算器功能示例
Jan 03 Javascript
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 jQuery
angularjs select 赋值 ng-options配置方法
Feb 28 Javascript
JS实现区分中英文并统计字符个数的方法示例
Jun 09 Javascript
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
Apr 28 Javascript
微信小程序生成海报分享朋友圈的实现方法
May 06 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
Apr 10 Javascript
JavaScript中使用Spread运算符的八种方法总结
Jun 18 Javascript
H5 js点击按钮复制文本到粘贴板
Nov 19 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中利用post传递字符串重定向的实现代码
2011/04/21 PHP
两千行代码的PHP学习笔记汇总
2014/10/05 PHP
CI(CodeIgniter)框架中URL特殊字符处理与SQL注入隐患分析
2019/02/28 PHP
php实现 master-worker 守护多进程模式的实例代码
2019/07/20 PHP
搭建PhpStorm+PhpStudy开发环境的超详细教程
2020/09/17 PHP
js拦截alert对话框另类应用
2013/01/16 Javascript
json实现前后台的相互传值详解
2015/01/05 Javascript
Bootstrap布局组件应用实例讲解
2016/02/17 Javascript
修改Jquery Dialog 位置的实现方法
2016/08/26 Javascript
jQuery之动画效果大全
2016/11/09 Javascript
js HTML5 canvas绘制图片的方法
2017/09/08 Javascript
使用JS实现气泡跟随鼠标移动的动画效果
2017/09/16 Javascript
微信小程序富文本渲染引擎的详解
2017/09/30 Javascript
浅谈微信小程序之官方UI框架we-ui使用教程
2018/08/20 Javascript
微信小程序自定义弹窗wcPop插件
2018/11/19 Javascript
js canvas实现画图、滤镜效果
2018/11/27 Javascript
Layui Form 自定义验证的实例代码
2019/09/14 Javascript
VuePress 中如何增加用户登录功能
2019/11/29 Javascript
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
2020/02/24 Javascript
JS中队列和双端队列实现及应用详解
2020/09/29 Javascript
python中enumerate的用法实例解析
2014/08/18 Python
在Django中进行用户注册和邮箱验证的方法
2016/05/09 Python
python常见排序算法基础教程
2017/04/13 Python
解决phantomjs截图失败,phantom.exit位置的问题
2018/05/17 Python
python获取代码运行时间的实例代码
2018/06/11 Python
解决Python paramiko 模块远程执行ssh 命令 nohup 不生效的问题
2020/07/14 Python
浅析与CSS3的loading动画加载相关的transition优化
2015/05/18 HTML / CSS
Melijoe美国官网:法国奢侈童装购物网站
2017/04/19 全球购物
Theo + George官方网站:都柏林时尚品牌
2019/04/08 全球购物
2014春晚主持词
2014/03/25 职场文书
小学校园文化建设汇报材料
2014/08/19 职场文书
小学师德师风演讲稿
2014/09/02 职场文书
三峡大坝导游词
2015/01/31 职场文书
挂职锻炼工作总结2015
2015/05/28 职场文书
公司欠款证明
2015/06/24 职场文书
我的收音机情缘
2022/04/05 无线电