LocalStorage 是HTML5中一個方便使用的 API，它為 Web 開發(fā)人員 提供了一個易于使用的5MB的存儲空間。使用 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)于這個簡單的 API，您可能不知道(或可能已經(jīng)忘記)以下五件事：

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

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

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

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

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

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

不過有一個例外。

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

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

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

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

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

4、 LocalStorage 配額不能大于 5MB

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

但是也有個旁門左道!

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

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

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

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

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

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

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