這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 LocalStorage 是HTML5中一個方便使用的 API，它為 Web 開發人員 提供了一個易於使用的5MB的存儲空間。使用 LocalStorage API 真的再簡單不過了。不信看下： //Save a value to loc ...
這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助
LocalStorage 是HTML5中一個方便使用的 API，它為 Web 開發人員 提供了一個易於使用的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 非常簡單，但是很容易忽略有關它們的一些重要細節。關於這個簡單的 API，您可能不知道（或可能已經忘記）以下五件事：
1. Secure (SSL) 頁面上的 LocalStorge 值是隔離的
根據草案規範，瀏覽器根據 協議 + 主機名 + 唯一埠（也稱為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 中的值也將被恢復。因此，雖然它是伺服器上的一個新“會話”，但從瀏覽器的角度來看，它是瀏覽器重啟後單個會話的延續。
這使得 SessionStorage 成為一種理想的存儲技術，用於臨時“備份”用戶表單值、在輸入時將輸入保存到 SessionStorage 以及在頁面載入時恢復（如果存在），以進一步幫助用戶從瀏覽器崩潰或意外頁面刷新中恢復（儘管瀏覽器會自行執行其中的一些操作，尤其是在從崩潰中恢復時）。
3.以“隱身”模式創建的LocalStorage值是隔離的
當您在私人/隱身/安全模式（有時更粗略和準確地稱為“se情模式”）下啟動瀏覽器時，它將為 LocalStorage 值創建一個新的臨時資料庫。這意味著當隱私瀏覽會話關閉時，保存到 LocalStorage 的任何內容都將被銷毀，從而使 LocalStorage 的行為更像 SessionStorage。
此外，由於瀏覽器的“會話恢復”功能不會重新打開私有模式會話，因此在瀏覽器視窗關閉後，在 SessionStorage 中創建的任何內容也將丟失。實際上，簡而言之，在隱私瀏覽會話期間放入 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 存儲規範中特別不贊成它。。
但到目前為止只有 Opera 實現了規範的這一部分。所以現在，5MB 是你的現實限制。
5. LocalStorage 可以填充到舊瀏覽器（包括 IE）中
啊，舊版瀏覽器（特指 樂色IE瀏覽器），是每個 HTML5 派對上的失敗者。幸運的是，高級瀏覽器對 LocalStorage 的支持非常好。它在 IE8+ (!)、Firefox 3.5+ 和 Chrome 4+ 中原生可用。很少有 HTML5 規範能像 Web 存儲那樣得到廣泛且一致的支持。
對於舊版本的 IE，polyfill 支持是可用的，這要歸功於一個名為“userData”的 IE-only 功能。在 IE5 中引入 userData 是一種 IE 行為，它會打開 1MB 的本地存儲。通過包裝 userData API，現代 HTML5 應用程式可以處理 polyfill LocalStorage 一直到 IE6（或 IE5，技術上）。
因此，請享受簡單的 LocalStorage API，但要註意可能會造成一些令人困惑的調試的內部工作原理。
本文轉載於:
https://juejin.cn/user/1204720476893064
如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。
