大熊君學習html5系列之------WebStorage（客戶端輕量級存儲方案）

時間 2019-11-08

標籤學習 html5 html 系列 webstorage 客戶端輕量級存儲方案欄目 HTML5 简体版

原文原文鏈接

一，開篇分析html

Hi，你們好！大熊君又和你們見面了，(*^__^*) 嘻嘻……，這系列文章主要是學習Html5相關的知識點，以學習API知識點爲入口，由淺入深的引入實例，web

讓你們一步一步的體會"h5"可以作什麼，以及在實際項目中如何去合理的運用達到使用自如，完美駕馭O(∩_∩)O~，好了，廢話很少說，直接進入今天的主題，瀏覽器

今天主要講的是「WebStorage API」及在客戶端瀏覽器中的做用，而且會引入一個實際的例子作爲講解的原型範例，讓咱們先來看看「WebStorage API」：服務器

HTML5提供了兩種在客戶端存儲數據的新方法：cookie

　　localStorage - 沒有時間限制的數據存儲（持久化本地）session

　　sessionStorage - 針對一個 session 的數據存儲（內存方式存儲）學習

以前，這些都是由 cookie 完成的。可是 cookie 不適合大量數據的存儲，由於它們由每一個對服務器的請求來傳遞，這使得 cookie 速度很慢並且效率也不高。spa

Web應用的發展，使得客戶端存儲使用得也愈來愈多，而實現客戶端存儲的方式則是多種多樣。最簡單並且兼容性最佳的方案是Cookie，可是做爲真正的客戶端存儲，Cookie則存在不少致命傷。插件

此外，在IE6及以上版本中還可使用userData Behavior，在Firefox下可使用globalStorage，在有Flash插件的環境中可使用Flash Local Storage，可是這幾種方式都存在兼容性方面的侷限性，所以真正使用起來並不理想。設計

針對以上狀況，HTML5中給出了更加理想的解決方案：假如你須要存儲複雜的數據則可使用Web Database，能夠像客戶端程序同樣使用SQL(不過Web Database標準當前正陷於僵局之中，並且目前已經實現的瀏覽器頗有限)。

假如你須要存儲的只是簡單的用key/value對便可解決的數據則可使用Web Storage。本文主要從各個方面介紹一下Web Storage的具體狀況。

　　瀏覽器支持狀況，以下圖：

　二，舉個小例子，瞭解WebStorage

　　一個小的功能需求：記錄用戶每次訪問頁面的次數

　　見以下代碼：　　

 1 $(function(){
 2     if(!_isSupportWebStorage()){
 3         throw new Error("Not Support WebStorage APIs !") ;
 4     }
 5     _storePageCount() ;
 6     alert(_loadPageCount())
 7     
 8 }) ;
 9 function _storePageCount(){
10     var storage = window.localStorage ;
11     var pageLoadCount = storage.getItem("pageLoadCount") ;
12     var stepOfCount = 1 ;
13     if(!pageLoadCount){
14         storage.setItem("pageLoadCount",stepOfCount) ;    
15     }
16     else{
17         storage.setItem("pageLoadCount",parseInt(pageLoadCount) + stepOfCount) ;
18     }
19 } ;
20 function _loadPageCount(){
21     var storage = window.localStorage ;
22     return storage.getItem("pageLoadCount") ;
23 } ;
24 function _isSupportWebStorage(){
25     return !!window.localStorage ;
26 } ;

　　運行效果：

　　每次刷新頁面時打印出訪問量的次數

　　跟蹤本地數據狀況：

　　很清晰了，這時數據已經持久化到本地的硬盤上了，哈哈哈!

　"WebStorage API"蜻蜓點水：

　　　 length------當前Storage對象中存儲的key/value對的總數

　　　 setItem(key, value)-------將key對象的值設置爲value，value爲String類型，當設置失敗，好比用戶將本地存儲禁用，或者本地存儲超過限制的大小時，拋出QuotaExceededError錯誤

　　 getItem(key)------返回key對應的值，如不存在，返回null

　　 removeItem(key)------若是key在storage中存在，將key對應的key/value對從storage對象中刪除；注意：不會返回刪除的 value，若是key在storage中不存在，不進行任何處理

　　 clear()------清除Storage對象上全部的key-value值

　　 key(index)------返回index對應位置的key值，當index>length時，返回null，往storage對象上添加key-value值，經過key(index)取回的鍵是不固定的，跟經過for...in遍歷普通的對象同樣，依賴於瀏覽器的實現

　　這裏列舉出一些等價的操做：

　　localStorage.author = "bigbear" ;
　　localStorage["author"] = "bigbear" ;
　　localStorage.setItem("author","bigbear") ;
　

　三，引入實例

　　今天給你們分享一個留言實時保存的例子。

　　　js代碼以下：

 1 function upInfo() {
 2     var lStorage = window.localStorage;
 3     var show = window.document.getElementById("show");
 4     if (window.localStorage.myBoard) {
 5         show.value = window.localStorage.myBoard;
 6     } else {
 7         var info = "尚未留言";
 8         show.value = "尚未留言";
 9     }
10 }
11 function addInfo() {
12     var info = window.document.getElementById("t1");
13     var lStorage = window.localStorage;
14     if (lStorage.myBoard) {
15         var date = new Date();
16         lStorage.myBoard += t1.value + "\n發表時間：" + date.toLocaleString() + "\n";
17     } else {
18         var date = new Date();
19         lStorage.myBoard = t1.value + "\n發表時間：" + date.toLocaleString() + "\n";
20     }
21     upInfo();
22 }
23 function cleanInfo() {
24     window.localStorage.removeItem("myBoard");
25     upInfo();
26 }
27 upInfo();

　html以下：

 1 <body> 
 2   <div> 
 3    <h2>簡單的web存儲留言板</h2> 
 4    <textarea id="t1"></textarea> 
 5    <br /> 
 6    <input type="button" onclick="addInfo()" value="留言" /> 
 7    <input type="button" onclick="cleanInfo()" value="清除留言" /> 
 8    <br /> 
 9    <hr /> 
10    <label id="shows"></label> 
11    <textarea id="show" readonly="readonly"></textarea> 
12   </div> 
13  </body>