這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助
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
如果對您有所幫助，歡迎您點個關注，我會定時更新技術檔案，大家一起討論學習，一起進步，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/514304.html
標籤：Html/Css
上一篇：HTTPS實作原理分析
下一篇：資料可視化