Web Storage

如有不當之處，歡迎指出，如需轉(zhuǎn)載，請注明出處

本文一共分為兩章。

第一章講Web Storage的使用，目標是讓大家看完第一章后基本能應(yīng)對80%的使用場景。

第二章會講一些Web Storage的進階知識，包括一些標準，沒有太多看的必要，但是也會有點小用。

還有，這是一篇推Web Storage的文章，所以也不給大家掛Cookie相關(guān)的鏈接或者教程，也不去多講Cookie了，就是這么任性，哼╭(╯^╰)╮！

Web Storage使用

當一個新的技術(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的兩個主要目標是：

• 提供一種在Cookie之外存儲會話數(shù)據(jù)的途徑
• 提供一種存儲大量可以跨會話存在的數(shù)據(jù)的機制

所以，雖然現(xiàn)在的技術(shù)方案確實能解決很多存儲問題，但是，既然出現(xiàn)了這么個新的東西，肯定也是有它存在的意義的，我們不妨深入的了解和嘗試一下，說不定就會發(fā)現(xiàn)還是挺好用的。

目前的情況是Cookie和localStorage用的比較多，我們也可以嘗試用sessionStorage做一些Cookie現(xiàn)在做的事情。

兼容性

既然要使用它，那我們首先要知道各大瀏覽器對它的支持情況，如果滿足業(yè)務(wù)需要，那我們就可以放心大膽的用了。

桌面瀏覽器

從上面的圖可以看出來，桌面瀏覽器只有IE7及以下不支持Web Storage。

移動瀏覽器

移動端瀏覽器除了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的時效只存在于標簽頁存在的時間，一旦標簽被關(guān)閉了，sessionStorage存儲的數(shù)據(jù)也會被刪除掉。

作用域

sessionStorage的作用域同樣是限定在文檔源級別的，不僅如此，它還被限制在標簽頁中，不同標簽頁的同一個頁面擁有各自的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。當index的值超出了length，返回null。

注意：存入Storage對象內(nèi)的item的排序順序由瀏覽器廠商自己決定，不一定是按照你存入的順序排序的哦,當你增加或者刪除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 存儲事件

當localStorage或者sessionStorage的數(shù)據(jù)發(fā)生變化的時候，瀏覽器都會在其他對該數(shù)據(jù)可見的窗口對象上觸發(fā)storage事件（本窗口除外）。

重要：只有當存儲數(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)閉的標簽頁的功能，所以sessionStorage的生命周期可能并不是在標簽頁關(guān)閉之后就立馬結(jié)束，可能會延時一段時間。

localStorage

如果用戶禁用了緩存，那么在我們存入數(shù)據(jù)時會拋出SecurityError DOMException

磁盤空間

目前推薦的磁盤空間是5M，但是不同的瀏覽器廠商有不同的設(shè)定，這個設(shè)定會由實際檢驗合理性，比較合理的大小可以反饋給W3C，然后他們來修改這個推薦的大小。

當存儲空間即將達到上限的時候，瀏覽器可以提醒用戶授權(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)威指南》