AngularJS之ionic框架下實(shí)現(xiàn)Localstorage本地存儲(chǔ)

前言：

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),吳川企業(yè)網(wǎng)站建設(shè),吳川品牌網(wǎng)站建設(shè),網(wǎng)站定制,吳川網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,吳川網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

我們前臺(tái)用的是ionic+AngularJS，做的是混合模式移動(dòng)應(yīng)用。最近有一個(gè)需求是，我在頁面A上面滑動(dòng)的時(shí)候，跳入頁面B，頁面B需要加載頁面A的數(shù)據(jù)，這樣的頁面?zhèn)髦等绾螌?shí)現(xiàn)呢？那就需要用到LocalStorage本地存儲(chǔ)了。

Ionic

Ionic是目前最有潛力的一款HTML5手機(jī)應(yīng)用開發(fā)框架。通過SASS構(gòu)架應(yīng)用程序，他提供了很多UI控件來幫助開發(fā)者開發(fā)強(qiáng)大的應(yīng)用。加上angularjs可以讓ionic應(yīng)用體驗(yàn)度增強(qiáng)。代碼也非常簡單。angularjs可以提供數(shù)據(jù)的雙向綁定，使用它成為 Web 和移動(dòng)開發(fā)者的共同選擇。

angularjs

AngularJS建立在JavaScript基礎(chǔ)之上，而后者正是目前世界上應(yīng)用范圍最廣、靈活程度最高的編程語言之一。AngularJS能夠?yàn)槭褂谜咛峁┮惶淄暾能浖?，用于基于前端的?yīng)用程序。對于Web開發(fā)人員來說，AngularJS以框架形式將所有復(fù)雜性元素加以打包，從而保證使用者只需要直接接觸那些最易于實(shí)現(xiàn)的功能。更多的介紹可以看我之前的博客。

在客戶端存儲(chǔ)數(shù)據(jù)（localStorage &sessionStorage ）

Html5 提供了兩種在客戶端存儲(chǔ)數(shù)據(jù)的新方法：

1. localStorage - 沒有時(shí)間限制的數(shù)據(jù)存儲(chǔ)
2. sessionStorage - 針對一個(gè) session 的數(shù)據(jù)存儲(chǔ)

之前，這些都是由 cookie 完成的。但是 cookie 不適合大量數(shù)據(jù)的存儲(chǔ)，因?yàn)樗鼈冇擅總€(gè)對服務(wù)器的請求來傳遞，這使得 cookie 速度很慢而且效率也不高。在 HTML5 中，數(shù)據(jù)不是由每個(gè)服務(wù)器請求傳遞的，而是只有在請求時(shí)使用數(shù)據(jù)。它使在不影響網(wǎng)站性能的情況下存儲(chǔ)大量數(shù)據(jù)成為可能。對于不同的網(wǎng)站，數(shù)據(jù)存儲(chǔ)于不同的區(qū)域，并且一個(gè)網(wǎng)站只能訪問其自身的數(shù)據(jù)。

localStorage本地存儲(chǔ)

相對于上述本地存儲(chǔ)方案，localStorage有自身的優(yōu)點(diǎn)：容量大、易用、強(qiáng)大、原生支持；缺點(diǎn)是兼容性差些（chrome,  safari, firefox，IE 9，IE8都支持 localStorage，主要是IE8以下版本不支持）、安全性也差些（所以請勿使用localStorage保存敏感信息）。 localStorage保存的數(shù)據(jù)，一般情況下是永久保存的，也就是說只要采用localstorage保存信息，數(shù)據(jù)便一直存儲(chǔ)在用戶的客戶端中。即使用戶關(guān)閉當(dāng)前web瀏覽器后重新啟動(dòng)，數(shù)據(jù)讓然存在。知道用戶或程序明確制定刪除，數(shù)據(jù)的生命周期才會(huì)結(jié)束。在安全性方面，localstorage是域內(nèi)安全的，即localstorage是基于域的。任何在該域內(nèi)的所有頁面，都可以訪問localstorage數(shù)據(jù)。

localStorage四種方法：

1. localStorage.getItem(key):獲取指定key本地存儲(chǔ)的值
2. localStorage.setItem(key,value)：將value存儲(chǔ)到key字段
3. localStorage.removeItem(key):刪除指定key本地存儲(chǔ)的值
4. localStorage.length是localStorage的項(xiàng)目數(shù)

項(xiàng)目實(shí)戰(zhàn)：

evaluationTaskCtrl  controller.js

/*登陸controller*/ 
.controller('evaluationTaskCtrl', function($scope,$state,evaluationTaskService,studentEvaluateService) { 
  //右滑動(dòng)跳入卷子界面-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- > 
      <div > 
       {{item.TeacherName|limitTo:1}} 
      </div> 
    </i>  
     
      <h3 >{{item.CourseName}}</h3>  
      <i class="ion-android-person" ></i> 
      <p >{{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上面顯示：

<!-- 課程教師顯示 --> 
    <h2 class="title"  ng-cloak>{{CourseName}} <span ng-bind="TeacherName"></span> 

總結(jié)：

最近接觸的都不能用經(jīng)驗(yàn)來解決，因?yàn)槭切率挛?，只能是百度了。后來也可以模仿著自己寫一寫，之前學(xué)到的理論知識(shí)也真正運(yùn)用了出來。希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

新聞名稱：AngularJS之ionic框架下實(shí)現(xiàn)Localstorage本地存儲(chǔ)
當(dāng)前URL：http://bm7419.com/article10/jddogo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營銷型網(wǎng)站建設(shè)、App設(shè)計(jì)、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、定制開發(fā)、網(wǎng)站設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)