AngularJS之ionic 框架下實現(xiàn) Localstorage本地存儲
前言：
我們前臺用的是ionic+AngularJS，做的是混合模式移動應用。最近有一個需求是，我在頁面A上面滑動的時候，跳入頁面B，頁面B需要加載頁面A的數(shù)據(jù)，這樣的頁面?zhèn)髦等绾螌崿F(xiàn)呢？那就需要用到LocalStorage本地存儲了。
Ionic
Ionic是目前最有潛力的一款HTML5手機應用開發(fā)框架。通過SASS構架應用程序，他提供了很多UI控件來幫助開發(fā)者開發(fā)強大的應用。加上angularjs可以讓ionic應用體驗度增強。代碼也非常簡單。angularjs可以提供數(shù)據(jù)的雙向綁定，使用它成為 Web 和移動開發(fā)者的共同選擇。
angularjs
AngularJS建立在JavaScript基礎之上，而后者正是目前世界上應用范圍最廣、靈活程度最高的編程語言之一。AngularJS能夠為使用者提供一套完整的軟件包，用于基于前端的應用程序。對于Web開發(fā)人員來說，AngularJS以框架形式將所有復雜性元素加以打包，從而保證使用者只需要直接接觸那些最易于實現(xiàn)的功能。更多的介紹可以看我之前的博客。
在客戶端存儲數(shù)據(jù)（localStorage &sessionStorage ）
Html5 提供了兩種在客戶端存儲數(shù)據(jù)的新方法：
- localStorage - 沒有時間限制的數(shù)據(jù)存儲
- sessionStorage - 針對一個 session 的數(shù)據(jù)存儲
之前，這些都是由 cookie 完成的。但是 cookie 不適合大量數(shù)據(jù)的存儲，因為它們由每個對服務器的請求來傳遞，這使得 cookie 速度很慢而且效率也不高。在 HTML5 中，數(shù)據(jù)不是由每個服務器請求傳遞的，而是只有在請求時使用數(shù)據(jù)。它使在不影響網(wǎng)站性能的情況下存儲大量數(shù)據(jù)成為可能。對于不同的網(wǎng)站，數(shù)據(jù)存儲于不同的區(qū)域，并且一個網(wǎng)站只能訪問其自身的數(shù)據(jù)。
localStorage本地存儲
相對于上述本地存儲方案，localStorage有自身的優(yōu)點：容量大、易用、強大、原生支持；缺點是兼容性差些（chrome, safari, firefox，IE 9，IE8都支持 localStorage，主要是IE8以下版本不支持）、安全性也差些（所以請勿使用localStorage保存敏感信息）。 localStorage保存的數(shù)據(jù)，一般情況下是永久保存的，也就是說只要采用localstorage保存信息，數(shù)據(jù)便一直存儲在用戶的客戶端中。即使用戶關閉當前web瀏覽器后重新啟動，數(shù)據(jù)讓然存在。知道用戶或程序明確制定刪除，數(shù)據(jù)的生命周期才會結束。在安全性方面，localstorage是域內(nèi)安全的，即localstorage是基于域的。任何在該域內(nèi)的所有頁面，都可以訪問localstorage數(shù)據(jù)。
localStorage四種方法：
- localStorage.getItem(key):獲取指定key本地存儲的值
- localStorage.setItem(key,value)：將value存儲到key字段
- localStorage.removeItem(key):刪除指定key本地存儲的值
- localStorage.length是localStorage的項目數(shù)
項目實戰(zhàn)：
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>
<!--內(nèi)容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>
總結：
最近接觸的都不能用經(jīng)驗來解決，因為是新事物，只能是百度了。后來也可以模仿著自己寫一寫，之前學到的理論知識也真正運用了出來。希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
淺談angular表單提交中ng-submit的默認使用方法
今天小編就為大家分享一篇淺談angular表單提交中ng-submit的默認使用方法。具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家詳細介紹了Angular工具方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
本篇文章主要介紹了AngularJS中的按需加載ocLazyLoad，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-01-01
這篇文章主要介紹了angular.bind使用心得，以及個人對于angular.bind的理解，這里分享給大家，希望大家能夠喜歡。2015-10-10
這篇文章主要介紹了Angular實現(xiàn)的簡單定時器功能,結合實例形式分析了AngularJS定時器功能的簡單實現(xiàn)與使用技巧,需要的朋友可以參考下2017-12-12
本篇文章主要介紹了AngularJS點擊添加樣式、點擊變色設置的實例代碼，具有一定的參考價值，有興趣的可以了解一下2017-07-07
今天小編就為大家分享一篇Angular服務Request異步請求的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
本文主要介紹AngularJs E2E Testing的資料，這里整理了詳細的資料，及簡單代碼示例，有興趣的小伙伴可以參考下2016-09-09
AngularJS select設置默認值的實現(xiàn)方法
這篇文章主要介紹了AngularJS select設置默認值的實現(xiàn)方法的相關資料,這里提供實現(xiàn)方法幫助大家實現(xiàn)這樣的功能，需要的朋友可以參考下2017-08-08
使用angularjs.foreach時return的問題解決
這篇文章主要介紹了使用angularjs.foreach時return的問題解決，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09