（五）HTML5本地存储——Web Storage
????????Web應用的發展，使得客戶端存儲使用得也越來越多，而實現客戶端存儲的方式則是多種多樣。最簡單而且兼容性最佳的方案是Cookie，但是作為真正的客戶端存儲，Cookie則存在很多致命傷。此外，在IE6及以上版本中還可以使用userData Behavior、在Firefox下可以使用globalStorage、在有Flash插件的環境中可以使用Flash Local Storage，但是這幾種方式都存在兼容性方面的局限性，因此真正使用起來并不理想。針對以上情況，HTML5中給出了更加理想的解決方案：假如你需要存儲復雜的數據則可以使用Web Database，可以像客戶端程序一樣使用SQL（不過Web Database標準當前正陷于僵局之中，而且目前已經實現的瀏覽器很有限）；假如你需要存儲的只是簡單的用key/value對即可解決的數據則可以使用Web Storage。?
????????? HTML5中與本地相關的有兩個重要的內容:Web Storage與本地數據庫。其中，Web Storage存儲機制是對HTML4種cookies機制的一個改善。由于cookies存儲機制有很多缺點，HTML5不再使用它們，轉而使用改良后的Web Storage存儲機制。本地數據庫是HTML5新增的一個功能，使用它可以在客戶端本地建立一個數據庫，原本必須要保存到服務器端數據庫中的內容現在可以直接保存到客戶端本地，大大減輕了服務器端的負擔，同時加快了訪問數據的速度。
????????? 本文主要從各個方面介紹一下Web Storage的具體情況。
sessionStorage與localStorage
顧名思義，Web Storage功能就是在web上儲存數據功能，這里的儲存數據是針對客戶端本地而言的。具體來說，Web Storage實際上由兩部分組成：sessionStorage與localStorage。
???????? sessionStorage將數據保存在session對象中，session是指用戶在瀏覽某個網站時，從進入網站到瀏覽器關閉多經過的這段時間，也就是用戶瀏覽這個網站所花費的時間，session對象可以用來保存在這段時間內所要求的寶訓的數據。總結如下：sessionStorage用于本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問并且當會話結束后數據也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。
???????? 將數據保存在客戶端本地的硬件設備（通常指硬盤，也可以是其它硬件設備）中，即使瀏覽器關閉了，該數據仍然存在，下次打開瀏覽器訪問網站時仍然可以繼續使用。總結：localStorage用于持久化的本地存儲，除非主動刪除數據，否則數據是永遠不會過期的。
??????? 兩者的區別：sessionStorage為臨時保存；localStorage為永久保存；
?
會話級別的本地存儲：sessionStorage
在Html5中增加了一個Js對象：sessionStorage；通過此對象可以直接操作存儲在瀏覽器中的會話級別的WebStorage。存儲在sessionStorage中的數據首先是Key-Value形式的，另外就是它跟瀏覽器當前會話相關，當會話結束后，數據會自動清除，跟未設置過期時間的Cookie類似。
sessionStorage提供了四個方法來輔助我們進行對本地存儲做相關操作。
- （1）setItem(key,value)：添加本地存儲數據。兩個參數，非常簡單就不說了。
- （2）getItem(key):通過key獲取相應的Value。
- （3）removeItem(key):通過key刪除本地數據。
- （4）clear():清空數據。
對于JS的學習和調試必須得有Chrome的調試工具輔助才能事半功倍。當然Chrome也是我最喜愛的Web開發輔助工具，非常簡單F12快捷鍵就立即打開工具了，包括IE也是這個快捷鍵。通過下圖就可以查看當前瀏覽器中的sessionStorage數據。
?
永久本地存儲：localStorage
在最新的JS的API中增加了localStorage對象，以便于用戶存儲永久存儲的Web端的數據。而且數據不會隨著Http請求發送到后臺服務器，而且存儲數據的大小機會不用考慮，因為在HTML5的標準中要求瀏覽器至少要支持到4MB.所以，這完全是顛覆了Cookie的限制，為Web應用在本地存儲復雜的用戶痕跡數據提供非常方便的技術支持。那接下里分別介紹一下localStorage的常用的方法，當然基本上跟sessionStorage是一致的。
localStorage提供了四個方法來輔助我們進行對本地存儲做相關操作。
- （1）setItem(key,value)：添加本地存儲數據。兩個參數，非常簡單就不說了。
- （2）getItem(key):通過key獲取相應的Value。
- （3）removeItem(key):通過key刪除本地數據。
- （4）clear():清空數據。
為什么選擇Web Storage而不是Cookie？
與Cookie相比，Web Storage存在不少的優勢，概括為以下幾點：
1. 存儲空間更大：IE8下每個獨立的存儲空間為10M，其他瀏覽器實現略有不同，但都比Cookie要大很多。
2. 存儲內容不會發送到服務器：當設置了Cookie后，Cookie的內容會隨著請求一并發送的服務器，這對于本地存儲的數據是一種帶寬浪費。而Web Storage中的數據則僅僅是存在本地，不會與服務器發生任何交互。
3. 更多豐富易用的接口：Web Storage提供了一套更為豐富的接口，使得數據操作更為簡便。
4. 獨立的存儲空間：每個域（包括子域）有獨立的存儲空間，各個存儲空間是完全獨立的，因此不會造成數據混亂。
Web Storage缺陷與不足
Web Storage的缺陷主要集中在其安全性方面，具體體現在以下兩點：
1. 瀏覽器會為每個域分配獨立的存儲空間，即腳本在域A中是無法訪問到域B中的存儲空間的，但是瀏覽器卻不會檢查腳本所在的域與當前域是否相同。即在域B中嵌入域A中的腳本依然可以訪問域B中的數據。
2. 存儲在本地的數據未加密而且永遠不會過期，極易造成隱私泄漏。也許需要像保存密碼一樣詢問用戶是在用私人電腦還是公共電腦來決定是否將數據保存在本地。
?
sessionStorage與localStorage讀寫數據時的基本用法
?????? 1、sessionStorage
????????? 保存數據：
?????????? ?sssionStorage.setItem('key','value'); //或者sessionStorage.key = 'value';
???????? 讀取數據：
??????????? 變量 = sessionStorage.getItem('key'); //或者變量 = sessionStorage.key;
?? 若使用sessionStorage讀取或保存數據，則使用sessionStorage對象并調用該對象的讀寫方法；
??? ?2、localStorage
????? ?保存數據：
?????? ?? localStorage.setItem('key','value'); //或者localStorage.key = 'value';
??? ? 讀取數據：
?????? ? 變量 = localStorage.hetItem('key'); //或者變量 = localStorage.key;
??? 若使用localStorage讀取或保存數據，則使用localStorage對象并調用該對象的讀寫方法；
?
???? 兩種方法的區別：
? 使用sessionStorage方法時，如果關閉了瀏覽器，這個數據就丟失了，下一次打開瀏覽器時，讀不到任何的數據；而使用localStorage方法時，即使瀏覽器關閉了，下次打開瀏覽器仍然能讀取到被保存的數據。不過，數據保存時按瀏覽器進行保存的，也就是說，打開別的瀏覽器是讀取不到下哦案前在瀏覽器中保存的內容的。
?
示例如下
exercise.html
<!DOCTYPE html> <head><meta charset="UTF-8"><title>Web Storage示例</title><script tyep="text/javascript" src="script.js" ></script> </head> <body><h1>Web Storage示例</h1><p id="msg"></p><input type="text" id="input"><input type="button" value="保存數據" οnclick="saveStorage('input')";><input type="button" value="讀取數據" οnclick="loadStorage('msg')"> </body> </html>
script.js
?
運行結果：
?
?
?
?
?
總結
以上是生活随笔為你收集整理的（五）HTML5本地存储——Web Storage的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： （四）Canvas API方法和属性汇总
- 下一篇： （九）HTML5本地存储——本地数据库S