建站
咨詢
售后
建站咨詢
新聞中心
LocalStorage 是HTML5中一個方便使用的 API，它為 Web 開發(fā)人員 提供了一個易于使用的5MB的存儲空間。使用 LocalStorage API 真的再簡單不過了。不信看下：
專注于為中小企業(yè)提供成都網站設計、成都網站建設服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)善右免費做網站提供優(yōu)質的服務。我們立足成都，凝聚了一批互聯網行業(yè)人才，有力地推動了上千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網站建設實現規(guī)模擴充和轉變。
//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 非常簡單，但是很容易忽略有關它們的一些重要細節(jié)。關于這個簡單的 API，您可能不知道(或可能已經忘記)以下五件事：
1、Secure (SSL) 頁面上的 LocalStorge 值是隔離的
根據草案規(guī)范，瀏覽器根據 協議 + 主機名 + 唯一端口(也稱為HTML5 Origin)隔離 LocalStorage 值。主機名實現隔離是我們所預期的，因為我們不希望惡意網站訪問我們網站的 LocalStorage 數據。但是協議為什么也隔離(即http和https)?
這種隔離的結果意味著保存到http://htmlui.com上的 LocalStorage 的值不能被從https://htmlui.com的頁面訪問(反之亦然)。
因此如果您的網站同時提供 HTTP 和 HTTPS 頁面，請務必小心。(注意：Firefox 提供了一個專有的GlobalStorage，它沒有這種 HTTP/HTTPS 隔離。)
2、SessionStorage 值在某些瀏覽器重啟后仍然存在
SessionStorage 與 LocalStorage 不同，它不是為在用戶瀏覽器中長期保存值而設計的。相反，SessionStorage 中的值會在瀏覽器會話結束時被銷毀，這通常是在瀏覽器窗口關閉時。
不過有一個例外。
當瀏覽器提供“恢復會話”功能時，通常旨在幫助用戶從瀏覽器/計算機崩潰中快速恢復，SessionStorage 中的值也將被恢復。因此，雖然它是服務器上的一個新“會話”，但從瀏覽器的角度來看，它是瀏覽器重啟后單個會話的延續(xù)。
這使得 SessionStorage 成為一種理想的存儲技術，用于臨時“備份”用戶表單值、在輸入時將輸入保存到 SessionStorage 以及在頁面加載時恢復(如果存在)，以進一步幫助用戶從瀏覽器崩潰或意外頁面刷新中恢復(盡管瀏覽器會自行執(zhí)行其中的一些操作，尤其是在從崩潰中恢復時)。
3、以“隱身”模式創(chuàng)建的LocalStorage值是隔離的
當您在私人/隱身/安全模式(有時更粗略和準確地稱為“「se情模式」”)下啟動瀏覽器時，它將為 LocalStorage 值創(chuàng)建一個新的臨時數據庫。這意味著當隱私瀏覽會話關閉時，保存到 LocalStorage 的任何內容都將被銷毀，從而使 LocalStorage 的行為更像 SessionStorage。
此外，由于瀏覽器的“會話恢復”功能不會重新打開私有模式會話，因此在瀏覽器窗口關閉后，在 SessionStorage 中創(chuàng)建的任何內容也將丟失。實際上，簡而言之，在隱私瀏覽會話期間放入 Local 或 SessionStorage 的任何數據都會在瀏覽器窗口關閉(有意或無意)后立即丟失。
4、 LocalStorage 配額不能大于 5MB
LocalStorage 不應該是 HTML5 的瀏覽器內存儲的主要形式(IndexDB 才是)，但某些應用程序可能需要LocalStorage提供不止5m的內存。有沒有辦法擴大 LocalStorage 配額?「沒有，沒有的，別想了，你在想peach」。
但是也有個旁門左道!
從技術上講，LocalStorage 不會阻止同一主機(使用相同的協議和端口)的子域訪問他的 LocalStorage 對象。因此，一些瀏覽器公開了一種解決方法，即授予“a1.website.com”和“a2.website.com”它們自己的 5MB LocalStorage 配額。并且由于兩個站點位于同一來源，因此它們可以訪問彼此的值。(安全方面注意：這也意味著共享域上的站點，例如 apphost.com，都共享一個 HTML5 存儲對象。請謹慎操作!)
因此，雖然存在技術解決方法，但HTML5 Web 存儲規(guī)范中特別不贊成它。。
但到目前為止只有 Opera 實現了規(guī)范的這一部分。所以現在，5MB 是你的現實限制。
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，現代 HTML5 應用程序可以處理 polyfill LocalStorage 一直到 IE6(或 IE5，技術上)。
因此，「請享受簡單的 LocalStorage API，但要注意可能會造成一些令人困惑的調試的內部工作原理」。
分享名稱：關于HTML5LocalStorage的五個不為人知的事實
URL鏈接：http://www.dlmjj.cn/article/djghosi.html
