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