LocalStorage 是HTML5中一個(gè)方便使用的 API，它為 Web 開發(fā)人員 提供了一個(gè)易于使用的5MB的存儲(chǔ)空間。使用 LocalStorage API 真的再簡單不過了。不信看下：

//Save a value to localStorage
localStorage.setItem('key', 'value to save');
//OR
localStorage.key = 'string value to save';
//Get the value back out of localStorage
localStorage.getItem('key');
//OR
localStorage.key;
//Clear all localStorage values
localStorage.clear();

localStorage API 非常簡單，但是很容易忽略有關(guān)它們的一些重要細(xì)節(jié)。關(guān)于這個(gè)簡單的 API，您可能不知道(或可能已經(jīng)忘記)以下五件事：

1、Secure (SSL) 頁面上的 LocalStorge 值是隔離的

根據(jù)草案規(guī)范，瀏覽器根據(jù) 協(xié)議 + 主機(jī)名 + 唯一端口(也稱為HTML5 Origin)隔離 LocalStorage 值。主機(jī)名實(shí)現(xiàn)隔離是我們所預(yù)期的，因?yàn)槲覀儾幌Ｍ麗阂饩W(wǎng)站訪問我們網(wǎng)站的 LocalStorage 數(shù)據(jù)。但是協(xié)議為什么也隔離(即http和https)?

這種隔離的結(jié)果意味著保存到http://htmlui.com上的 LocalStorage 的值不能被從https://htmlui.com的頁面訪問(反之亦然)。

因此如果您的網(wǎng)站同時(shí)提供 HTTP 和 HTTPS 頁面，請(qǐng)務(wù)必小心。(注意：Firefox 提供了一個(gè)專有的GlobalStorage，它沒有這種 HTTP/HTTPS 隔離。)

2、SessionStorage 值在某些瀏覽器重啟后仍然存在

SessionStorage 與 LocalStorage 不同，它不是為在用戶瀏覽器中長期保存值而設(shè)計(jì)的。相反，SessionStorage 中的值會(huì)在瀏覽器會(huì)話結(jié)束時(shí)被銷毀，這通常是在瀏覽器窗口關(guān)閉時(shí)。

不過有一個(gè)例外。

當(dāng)瀏覽器提供“恢復(fù)會(huì)話”功能時(shí)，通常旨在幫助用戶從瀏覽器/計(jì)算機(jī)崩潰中快速恢復(fù)，SessionStorage 中的值也將被恢復(fù)。因此，雖然它是服務(wù)器上的一個(gè)新“會(huì)話”，但從瀏覽器的角度來看，它是瀏覽器重啟后單個(gè)會(huì)話的延續(xù)。

這使得 SessionStorage 成為一種理想的存儲(chǔ)技術(shù)，用于臨時(shí)“備份”用戶表單值、在輸入時(shí)將輸入保存到 SessionStorage 以及在頁面加載時(shí)恢復(fù)(如果存在)，以進(jìn)一步幫助用戶從瀏覽器崩潰或意外頁面刷新中恢復(fù)(盡管瀏覽器會(huì)自行執(zhí)行其中的一些操作，尤其是在從崩潰中恢復(fù)時(shí))。

3、以“隱身”模式創(chuàng)建的LocalStorage值是隔離的

當(dāng)您在私人/隱身/安全模式(有時(shí)更粗略和準(zhǔn)確地稱為“「se情模式」”)下啟動(dòng)瀏覽器時(shí)，它將為 LocalStorage 值創(chuàng)建一個(gè)新的臨時(shí)數(shù)據(jù)庫。這意味著當(dāng)隱私瀏覽會(huì)話關(guān)閉時(shí)，保存到 LocalStorage 的任何內(nèi)容都將被銷毀，從而使 LocalStorage 的行為更像 SessionStorage。

此外，由于瀏覽器的“會(huì)話恢復(fù)”功能不會(huì)重新打開私有模式會(huì)話，因此在瀏覽器窗口關(guān)閉后，在 SessionStorage 中創(chuàng)建的任何內(nèi)容也將丟失。實(shí)際上，簡而言之，在隱私瀏覽會(huì)話期間放入 Local 或 SessionStorage 的任何數(shù)據(jù)都會(huì)在瀏覽器窗口關(guān)閉(有意或無意)后立即丟失。

4、 LocalStorage 配額不能大于 5MB

LocalStorage 不應(yīng)該是 HTML5 的瀏覽器內(nèi)存儲(chǔ)的主要形式(IndexDB 才是)，但某些應(yīng)用程序可能需要LocalStorage提供不止5m的內(nèi)存。有沒有辦法擴(kuò)大 LocalStorage 配額?「沒有，沒有的，別想了，你在想peach」。

但是也有個(gè)旁門左道!

從技術(shù)上講，LocalStorage 不會(huì)阻止同一主機(jī)(使用相同的協(xié)議和端口)的子域訪問他的 LocalStorage 對(duì)象。因此，一些瀏覽器公開了一種解決方法，即授予“a1.website.com”和“a2.website.com”它們自己的 5MB LocalStorage 配額。并且由于兩個(gè)站點(diǎn)位于同一來源，因此它們可以訪問彼此的值。(安全方面注意：這也意味著共享域上的站點(diǎn)，例如 apphost.com，都共享一個(gè) HTML5 存儲(chǔ)對(duì)象。請(qǐng)謹(jǐn)慎操作!)

因此，雖然存在技術(shù)解決方法，但HTML5 Web 存儲(chǔ)規(guī)范中特別不贊成它。。

但到目前為止只有 Opera 實(shí)現(xiàn)了規(guī)范的這一部分。所以現(xiàn)在，5MB 是你的現(xiàn)實(shí)限制。

5、LocalStorage 可以填充到舊瀏覽器(包括 IE)中

啊，舊版瀏覽器(特指 樂色I(xiàn)E瀏覽器)，是每個(gè) HTML5 派對(duì)上的失敗者。幸運(yùn)的是，高級(jí)瀏覽器對(duì) LocalStorage 的支持非常好。它在 IE8+ (!)、Firefox 3.5+ 和 Chrome 4+ 中原生可用。很少有 HTML5 規(guī)范能像 Web 存儲(chǔ)那樣得到廣泛且一致的支持。

對(duì)于舊版本的 IE，polyfill 支持是可用的，這要?dú)w功于一個(gè)名為“userData”的 IE-only 功能。在 IE5 中引入 userData 是一種 IE 行為，它會(huì)打開 1MB 的本地存儲(chǔ)。通過包裝 userData API，現(xiàn)代 HTML5 應(yīng)用程序可以處理 polyfill LocalStorage 一直到 IE6(或 IE5，技術(shù)上)。

因此，「請(qǐng)享受簡單的 LocalStorage API，但要注意可能會(huì)造成一些令人困惑的調(diào)試的內(nèi)部工作原理」。