在AngularJS的离子框架下实现本地存储

前言：

我们的前景是ionic AngularJS，这是一个混合模式的移动应用程序。最近有一个需求，我在A页滑动时，跳转到B页，B页需要加载A页的数据，如何实现这样的页值传递？这需要使用本地存储本地存储。

离子的

ion是目前最有潜力的HTML5手机应用开发框架。通过使用SASS构建应用程序，他提供了许多UI控件来帮助开发人员开发强大的应用程序。添加angularjs可以增强离子应用的体验。代码也很简单。Angularjs可以提供数据的双向绑定，已经成为Web和移动开发者的共同选择。

angularjs

AngularJS基于JavaScript，JavaScript是世界上使用最广泛、最灵活的编程语言之一。AngularJS可以为用户提供完整的前端应用软件包。对于Web开发人员来说，AngularJS以框架的形式封装了所有复杂性元素，从而确保用户只需要直接访问最容易实现的功能。更多介绍见我之前的博客。

在客户端保存数据(本地存储会话存储)

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

local storage-数据存储会话存储没有时间限制-在为会话存储数据之前，这些都是通过cookie来完成的。然而，cookie不适合存储大量数据，因为它们是通过每个请求传输到服务器的，这使得cookie速度慢且效率低。在HTML5中，数据不是通过每个服务器请求来传输的，而是只在被请求时使用。它可以在不影响网站性能的情况下存储大量数据。对于不同的网站，数据存储在不同的区域，一个网站只能访问自己的数据。

本地存储本地存储

与上述localStorage方案相比，Local Storage有自己的优势：容量大，使用方便，功能强大，支持原生；缺点是兼容性差(chrome、safari、firefox、IE 9、IE8都支持localStorage，主要是IE8或更低版本不支持)，安全性差(所以请不要使用localStorage保存敏感信息)。通常情况下，localStorage保存的数据是永久保存的，也就是说只要信息是由localstorage保存的，数据就会一直保存在用户的客户端。即使用户关闭当前的web浏览器并重新启动它，数据仍然存在。只有当用户或程序明确决定删除数据时，数据的生命周期才会结束。在安全性方面，localstorage在域内是安全的，即localstorage基于域。该域中的任何页面都可以访问本地存储数据。

本地存储有四种方法：

LocalStorage.getItem(键):获取指定键localStorage.setItem(键，值)的本地存储值：将该值存储在键字段LocalStorage中。RemoveItem(键):删除指定键local storage的本地存储值。length是本地存储的项数：

evaluation ontasktrl controller . js

/*登录控制器*/。controller(' evaluation ontasktrl '，function ($ scope，$ state，evaluationtaskservice，StudentEvaluateService) {//向右滑动并跳转到paper-zzzz $ scope . onswipleft=function(evaluatecourse){ local storage . setitem(' paper id '，evaluatecourse [0])。纸张id)；local storage . setitem(' TeacherName '，EvaluateCourse[0]。教师姓名)；localStorage.setItem('CourseID '，EvaluateCourse[0])。CourseID)；local storage . setitem(' TicheRid '，EvaluateCourse[0])。TeacherID)；local storage . setitem(' CourseName '，EvaluateCourse[0])。CourseName)；local storage . setitem(' CourseType '，EvaluateCourse[0])。CourseType)；$ state . go(' studentEvaluate ')；};}佩奇A.html

ion-content class=' has-header item-text-wrap ' overflow-scroll=' false ' on-sweep-left(EvaluateCourse)' on-sweep-right()' ion-list div class=' 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 336045%；字体粗细：加粗；相对位置：左侧：-42%;颜色： # FFFFFF"{项目.教师姓名|限制为：1 } }/div/I H2风格='位置：相对；左侧：5%;'字体粗细：加粗；{{item .CourseName } }/H2 I类=' ion-Android-person ' style='位置：相对；左侧：5%;底部：-3px；颜色： # AEEEE '/I p style='位置：相对；左侧：5%;底部：-2px；display : inline color : # AAA“{ item .TeacherName}}/p /div /div /div！-内容分类/列表/内容在页面B的controller.js里面获取值：

$scope .纸张id=本地存储。GetItem('纸张id ')；$scope .本地存储。getitem(' TeacherName ')；$scope .CourseID=本地存储。getitem(' CourseID ')；$scope .TicheRid=本地存储。GetItem(' TicheRid ')；$scope .CourseName='【'本地存储。getitem(' CourseName ')'】'；在页面B上面显示：

！-课程教师显示-h1 class=' title ' style=' font-weight : bold；'ng-斗篷{{CourseName}} span ng-bind='教师姓名/span总结：

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