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

前言：

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

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

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

Ionic

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

angularjs

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

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

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

localStorage - 沒有時間限制的數(shù)據(jù)存儲
sessionStorage - 針對一個 session 的數(shù)據(jù)存儲

之前，這些都是由 cookie 完成的。但是 cookie 不適合大量數(shù)據(jù)的存儲，因為它們由每個對服務(wù)器的請求來傳遞，這使得 cookie 速度很慢而且效率也不高。在 HTML5 中，數(shù)據(jù)不是由每個服務(wù)器請求傳遞的，而是只有在請求時使用數(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ù)便一直存儲在用戶的客戶端中。即使用戶關(guān)閉當前web瀏覽器后重新啟動，數(shù)據(jù)讓然存在。知道用戶或程序明確制定刪除，數(shù)據(jù)的生命周期才會結(jié)束。在安全性方面，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

 
 
   
   
      
     
     
       
       {{item.TeacherName|limitTo:1}} 
       
      
     
      {{item.CourseName}}  
       
      {{item.TeacherName}}

在頁面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上面顯示：

 
    {{CourseName}}

總結(jié)：

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

當前文章：AngularJS之ionic框架下實現(xiàn)Localstorage本地存儲
分享路徑：http://weahome.cn/article/jddogo.html

真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

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

{{item.CourseName}}

{{CourseName}}

其他資訊

網(wǎng)站制作

企業(yè)服務(wù)

網(wǎng)站建設(shè)

服務(wù)器托管