AngularJS之ionic 架構下實現 Localstorage本機存放區，angularjsionic

AngularJS之ionic 架構下實現 Localstorage本機存放區，angularjsionic

前言：

我們前台用的是ionic+AngularJS，做的是混合模式行動裝置 App。最近有一個需求是，我在頁面A上面滑動的時候，跳入頁面B，頁面B需要載入頁面A的資料，這樣的頁面傳值如何?呢？那就需要用到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> 

總結：

最近接觸的都不能用經驗來解決，因為是新事物，只能是百度了。後來也可以模仿著自己寫一寫，之前學到的理論知識也真正運用了出來。希望對大家的學習有所協助，也希望大家多多支援幫客之家。