一，開篇分析
Hi，大家好！大熊君又和大家見面了，(*^__^*) 嘻嘻……，這系列文章主要是學習Html5相關的知識點，以學習API知識點爲入口，由淺入深的引入實例，
讓大家一步一步的體會"h5"能夠做什麼，以及在實際項目中如何去合理的運用達到使用自如，完美駕馭O(∩_∩)O~，好了，廢話不多說，直接進入今天的主題，
今天主要講的是“WebStorage API”及在客戶端瀏覽器中的作用，並且會引入一個實際的例子做爲講解的原型範例，讓我們先來看看“WebStorage API”：
HTML5提供了兩種在客戶端存儲數據的新方法：
localStorage - 沒有時間限制的數據存儲 （持久化本地）
sessionStorage - 針對一個 session 的數據存儲 （內存方式存儲）
之前，這些都是由 cookie 完成的。但是 cookie 不適合大量數據的存儲，因爲它們由每個對服務器的請求來傳遞，這使得 cookie 速度很慢而且效率也不高。
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>
運行效果，如下：
（四），最後總結
（1），理解WebStorage Api的使用方式以及具體實例中使用的目的是爲了解決哪些問題。
（2），兩個核心Api的不同之處在哪。
（3），不斷重構上面的實例，如何進行合理的重構那？不要設計過度，要遊刃有餘，推薦的方式是過程化設計與面向對象思想設計相結合。
哈哈哈，本篇結束，未完待續，希望和大家多多交流夠溝通，共同進步。。。。。。呼呼呼……(*^__^*)