Web Storage
如有不當(dāng)之處，歡迎指出，如需轉(zhuǎn)載，請注明出處
本文一共分為兩章继找。
第一章講Web Storage的使用，目標(biāo)是讓大家看完第一章后基本能應(yīng)對80%的使用場景置谦。
第二章會講一些Web Storage的進階知識酬滤，包括一些標(biāo)準(zhǔn)冠摄，沒有太多看的必要竿刁，但是也會有點小用痹届。
還有，這是一篇推Web Storage的文章为严，所以也不給大家掛Cookie相關(guān)的鏈接或者教程诲锹，也不去多講Cookie了辕狰，就是這么任性盐捷，哼╭(╯^╰)╮形导！
Web Storage使用
當(dāng)一個新的技術(shù)出現(xiàn)時（已經(jīng)不新了=处嫌。=），我們都會想知道：這個技術(shù)的出現(xiàn)是為了解決什么問題的屡立？所以直晨，Web Storage的出現(xiàn)又是為了解決什么問題咧？
顧名思義膨俐，Web Storage的出現(xiàn)就是為了解決客戶端數(shù)據(jù)存儲問題的勇皇。那有人就問了，存儲不是有Cookie, userData, Flash等等解決方案嗎焚刺？需要這個Web Storage嗎敛摘？
其實Web Storage的出現(xiàn)是為了克服Cookie的一些限制，如果你的數(shù)據(jù)不需要服務(wù)端處理乳愉，只需要存儲在客戶端兄淫，根本就不需要持續(xù)的將數(shù)據(jù)發(fā)回服務(wù)器（Cookie會跟在每次HTTP請求里）。Web Storage的兩個主要目標(biāo)是：
- 提供一種在Cookie之外存儲會話數(shù)據(jù)的途徑
- 提供一種存儲大量可以跨會話存在的數(shù)據(jù)的機制
所以蔓姚，雖然現(xiàn)在的技術(shù)方案確實能解決很多存儲問題捕虽，但是，既然出現(xiàn)了這么個新的東西坡脐，肯定也是有它存在的意義的泄私，我們不妨深入的了解和嘗試一下，說不定就會發(fā)現(xiàn)還是挺好用的备闲。
目前的情況是Cookie和localStorage用的比較多晌端，我們也可以嘗試用sessionStorage做一些Cookie現(xiàn)在做的事情。
兼容性
既然要使用它恬砂，那我們首先要知道各大瀏覽器對它的支持情況咧纠，如果滿足業(yè)務(wù)需要，那我們就可以放心大膽的用了觉既。
桌面瀏覽器
| 瀏覽器 | IE | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| 版本 | 8 | 3.5 | 4 | 4 | 10.5 |
從上面的圖可以看出來惧盹，桌面瀏覽器只有IE7及以下不支持Web Storage。
移動瀏覽器
| 瀏覽器 | Andriod | UC | Safari | Opera Mini |
|---|---|---|---|---|
| 版本 | 2.1 | 11 | 3.2 | 不支持 |
移動端瀏覽器除了Opera Mini不支持外瞪讼，其他都是支持的
數(shù)據(jù)來源: caniuse.com
綜合以上的信息，Web Storage的兼容性其實是很好的粹断，基本可以放心大膽的用它了符欠。（如果你的項目需要兼容IE7及以下，可以考慮用userData代替瓶埋，本文不展開介紹Web Storage以外的知識）希柿。
分類
我們已經(jīng)確定了Web Storage可用了诊沪，現(xiàn)在可以具體的講講它的使用。Web Storage有兩種實現(xiàn)曾撤，一個是localStorage端姚，一個是sessionStorage。在講它們之前我們先解釋一個概念：文檔源挤悉。
文檔源
文檔源是通過協(xié)議渐裸，主機名，端口來確定的装悲。如圖：
只要有任何一項不同昏鹃，它們就是非同源文檔，下面的每個URL都有不同的文檔源：
http://www.example.com // 協(xié)議：http; 主機名：www.example.com
https://www.example.com // 不同協(xié)議
http://static.example.com // 不同主機名
http://www.example.com:8000 // 不同端口
參考鏈接：MDN-瀏覽器的同源策略
localStorage
localStorage是用來做永久性存儲的诀诊。
時效
localStorage里的數(shù)據(jù)的時效是永久的洞渤！只要你不刪，它就一直在那属瓣。除非web應(yīng)用需要刪除或者用戶需要刪掉它载迄。
作用域
localStorage的作用域是限定在文檔源級別的，
不同的文檔源之間是不能讀取和修改對方的數(shù)據(jù)的抡蛙，而相同的文檔源是可以的宪巨。但是不同的瀏覽器是不共享Storage的，也就是說你在Chorme瀏覽器里存的數(shù)據(jù)溜畅，在Firefox里是訪問不到的捏卓，即使它們是同一文檔源。
sessionStorage
sessionStorage是用來做臨時性存儲的慈格。
時效
sessionStorage的時效只存在于標(biāo)簽頁存在的時間怠晴，一旦標(biāo)簽被關(guān)閉了，sessionStorage存儲的數(shù)據(jù)也會被刪除掉浴捆。
作用域
sessionStorage的作用域同樣是限定在文檔源級別的蒜田，不僅如此，它還被限制在標(biāo)簽頁中选泻，不同標(biāo)簽頁的同一個頁面擁有各自的sessionStorage冲粤，數(shù)據(jù)不能共享。如果是一個頁面里有兩個<iframe>元素页眯，它們是共享sessionStorage的梯捕。
Web Storage API
好，簡要的講完了Web Storage的特性之后呢窝撵，接下來該講講怎么操作Web Storage了傀顾。
Storage對象提供了操作key/value對（下面我們稱之為item）的方法，key和value都是string類型的值（包括空字符串）碌奉，如果存的不是字符串短曾，會在存儲前被轉(zhuǎn)換成字符串寒砖，要小心哦！
length
length返回Storage對象內(nèi)item的數(shù)量嫉拐，這是一個只讀屬性哩都。
下面的代碼可以在Chorme控制臺里給localStorage增加一個判斷是否為空的方法
localStorage.__proto__.isEmpty = function isEmpty() {
return localStorage.length === 0;
}
key(index)
key(index)返回第n項的key。當(dāng)index的值超出了length婉徘，返回null漠嵌。
注意：存入Storage對象內(nèi)的item的排序順序由瀏覽器廠商自己決定，不一定是按照你存入的順序排序的哦,當(dāng)你增加或者刪除item時判哥，index對應(yīng)的值可能會變化
下面的代碼可以遍歷localStorage里的所有key
for (let i = 0, len = localStorage.length; i < len; i++) {
console.log(localStorage.key(i));
}
getItem(key)
返回對應(yīng)key值的value献雅，如果沒有，返回null塌计。
localStorage.getItem('gameRemainingTime');
setItem(key, value)
setItem方法首先檢查要設(shè)置的item是否存在挺身，如果不存在，在Storage里加入該item锌仅；如果存在章钾，更新這個item的value。如果無法存入新item热芹，該方法會拋出QuotaExceedeErrorDOMException異常贱傀，不改變Storage內(nèi)的任何內(nèi)容（表示Storage已經(jīng)存滿了，Storage目前推薦的存儲容量上限為5M）
localStorage.setItem('gameRemainingTime', '10');
removeItem(key)
removeItem方法會刪除指定的item伊脓，如果不存在指定的item府寒，什么都不做
localStorage.removeItem('gameRemainingTime');
clear()
clear方法會清空Storage里的所有item，如果Storage本來就是空的报腔，什么都不做
localStorage.clear();
Web Storage 存儲事件
當(dāng)localStorage或者sessionStorage的數(shù)據(jù)發(fā)生變化的時候株搔，瀏覽器都會在其他對該數(shù)據(jù)可見的窗口對象上觸發(fā)storage事件（本窗口除外）。
重要：只有當(dāng)存儲數(shù)據(jù)真正發(fā)生變化時才會觸發(fā)存儲事件纯蛾，比如給一個item重新設(shè)置一個和原來一樣的value纤房，或者是刪除一個不存在的item是不會觸發(fā)存儲事件的。
StorageEvent的幾個屬性：
- key：item的key翻诉，沒有則為null
- newValue: item的新值炮姨，沒有則為null
- oldValue: item的舊值，沒有則為null
- storageArea: sessionStorage或者localStorage
- url: 觸發(fā)存儲事件的腳本所在文檔的url
window.addEventListener('storage', function(e) {
console.log(e.key, e.oldValue, e.newValue, e.storageArea, e.url);
}, false);
Web Storage 進階
這一章主要講一些不那么重要碰煌，零碎的小知識點舒岸，可看可不看，有發(fā)現(xiàn)一些新東西會慢慢補充進來拄查。
sessionStorage
對于存在sessionStorage里的數(shù)據(jù)吁津，瀏覽器是不應(yīng)該給它設(shè)置過期時間的，它有自己的生命周期堕扶。除非用戶要求刪掉數(shù)據(jù)碍脏，或者存儲空間不足，或者處于完全原因稍算。
現(xiàn)在有些瀏覽器有打開上次關(guān)閉的標(biāo)簽頁的功能典尾，所以sessionStorage的生命周期可能并不是在標(biāo)簽頁關(guān)閉之后就立馬結(jié)束，可能會延時一段時間糊探。
localStorage
如果用戶禁用了緩存钾埂，那么在我們存入數(shù)據(jù)時會拋出SecurityError DOMException
磁盤空間
目前推薦的磁盤空間是5M，但是不同的瀏覽器廠商有不同的設(shè)定科平，這個設(shè)定會由實際檢驗合理性褥紫，比較合理的大小可以反饋給W3C，然后他們來修改這個推薦的大小瞪慧。
當(dāng)存儲空間即將達到上限的時候髓考，瀏覽器可以提醒用戶授權(quán)增加一點存儲空間，剩余的存儲空間瀏覽器也應(yīng)該能讓用戶知道弃酌。
IE對數(shù)據(jù)的存儲是異步的氨菇，F(xiàn)irefox和WebKit是同步的。在數(shù)據(jù)量少的時候是看不出區(qū)別的妓湘。除非存儲的數(shù)據(jù)量達到一定的量級查蓉，你會發(fā)現(xiàn)IE執(zhí)行的會比較快，因為它跳過了寫到磁盤的過程榜贴。
參考文獻
- HTML Standard - Web Storage
- 《JavaScript 權(quán)威指南》
- 《JavaScript 高級程序設(shè)計》
- 《HTML5 權(quán)威指南》
