客戶端存儲-web Storage

這是我參與8月更文挑戰的第12天，活動詳情查看：8月更文挑戰

前言

Web Storage 最先是網頁超文本應用技術工做組（WHATWG，Web Hypertext Application Technical Working Group）在 Web Applications 1.0 規範中提出的。這個規範中的草案最終成爲了 HTML5 的一部分， 後來又獨立成爲本身的規範。Web Storage 的目的是解決經過客戶端存儲不須要頻繁發送回服務器的數 據時使用 cookie 的問題。

Web Storage 規範最新的版本是第 2 版，這一版規範主要有兩個目標：

• 提供在 cookie 以外的存儲會話數據的途徑；
• 提供跨會話持久化存儲大量數據的機制。

Web Storage 的第 2 版定義了兩個對象：localStorage 和 sessionStorage。localStorage 是 永久存儲機制，sessionStorage 是跨會話的存儲機制。這兩種瀏覽器存儲 API 提供了在瀏覽器中不 受頁面刷新影響而存儲數據的兩種方式。2009 年以後全部主要供應商發佈的瀏覽器版本在 window 對象 上支持 localStorage 和 sessionStorage。

注意 Web Storage 第 1 版曾使用過 globalStorage，不過目前 globalStorage 已廢棄。

Storage

Storage 類型用於保存名/值對數據，直至存儲空間上限（由瀏覽器決定）。Storage 的實例與其餘 對象同樣，但增長了如下方法。

• clear()：刪除全部值；不在 Firefox 中實現。
• getItem(name)：取得給定 name 的值。
• key(index)：取得給定數值位置的名稱。
• removeItem(name)：刪除給定 name 的名/值對。
• setItem(name, value)：設置給定 name 的值。

getItem()、removeItem()和 setItem()方法能夠直接或間接經過 Storage 對象調用。由於每 個數據項都做爲屬性存儲在該對象上，因此可使用點或方括號操做符訪問這些屬性，經過一樣的操做 來設置值，也可使用 delete 操做符刪除屬性。即使如此，一般仍是建議使用方法而非屬性來執行這 些操做，以避免意外重寫某個已存在的對象成員。

經過 length 屬性能夠肯定 Storage 對象中保存了多少名/值對。咱們沒法肯定對象中全部數據佔用 的空間大小，儘管 IE8 提供了 remainingSpace 屬性，用於肯定還有多少存儲空間（以字節計）可用。

注意 Storage 類型只能存儲字符串。非字符串數據在存儲以前會自動轉換爲字符串。 注意，這種轉換不能在獲取數據時撤銷。

sessionStorage 對象

sessionStorage 對象只存儲會話數據，這意味着數據只會存儲到瀏覽器關閉。這跟瀏覽器關閉時 會消失的會話 cookie 相似。存儲在 sessionStorage 中的數據不受頁面刷新影響，能夠在瀏覽器崩潰 並重啓後恢復。（取決於瀏覽器，Firefox 和 WebKit 支持，IE 不支持。）

由於 sessionStorage 對象與服務器會話緊密相關，因此在運行本地文件時不能使用。存儲在 sessionStorage 對象中的數據只能由最初存儲數據的頁面使用，在多頁應用程序中的用處有限。

由於 sessionStorage 對象是 Storage 的實例，因此能夠經過使用 setItem()方法或直接給屬 性賦值給它添加數據

// 使用方法存儲數據
sessionStorage.setItem("name", "Nicholas");
// 使用屬性存儲數據
sessionStorage.book = "Professional JavaScript";

// 使用方法取得數據
let name = sessionStorage.getItem("name");
// 使用屬性取得數據
let book = sessionStorage.book;

// 使用 delete 刪除值
delete sessionStorage.name;
// 使用方法刪除值
sessionStorage.removeItem("book");
複製代碼

localStorage 對象

在修訂的 HTML5 規範裏，localStorage 對象取代了 globalStorage，做爲在客戶端持久存儲 數據的機制。要訪問同一個 localStorage 對象，頁面必須來自同一個域（子域不能夠）、在相同的端 口上使用相同的協議。

因 爲 localStorage 是 Storage 的實例，因此能夠像使用 sessionStorage 同樣使用 localStorage

// 使用方法存儲數據
localStorage.setItem("name", "Nicholas");
// 使用屬性存儲數據
localStorage.book = "Professional JavaScript";
// 使用方法取得數據
let name = localStorage.getItem("name");
// 使用屬性取得數據
let book = localStorage.book;
複製代碼

兩種存儲方法的區別在於，存儲在 localStorage 中的數據會保留到經過 JavaScript 刪除或者用戶 清除瀏覽器緩存。localStorage 數據不受頁面刷新影響，也不會因關閉窗口、標籤頁或從新啓動瀏覽 器而丟失。

存儲事件

每當 Storage 對象發生變化時，都會在文檔上觸發 storage 事件。使用屬性或 setItem()設置 值、使用 delete 或 removeItem()刪除值，以及每次調用 clear()時都會觸發這個事件。這個事件的 事件對象有以下 4 個屬性。

• domain：存儲變化對應的域。
• key：被設置或刪除的鍵。
• newValue：鍵被設置的新值，若鍵被刪除則爲 null。
• oldValue：鍵變化以前的值。

可使用以下代碼監聽 storage 事件：

window.addEventListener("storage",
 (event) => alert('Storage changed for ${event.domain}'));
複製代碼

對於 sessionStorage 和 localStorage 上的任何更改都會觸發 storage 事件，但 storage 事 件不會區分這二者。

限制

與其餘客戶端數據存儲方案同樣，Web Storage 也有限制。具體的限制取決於特定的瀏覽器。通常 來講，客戶端數據的大小限制是按照每一個源（協議、域和端口）來設置的，所以每一個源有固定大小的數 據存儲空間。分析存儲數據的頁面的源能夠增強這一限制。

不一樣瀏覽器給 localStorage 和 sessionStorage 設置了不一樣的空間限制，但大多數會限制爲每 個源 5MB。關於每種媒介的新配額限制信息表，能夠參考 web.dev 網站上的文章「Storage for the Web」。 要了解關於 Web Storage 限制的更多信息，能夠參考 dev-test.nemikor 網站的「Web Storage Support Test」頁面。

---

---

以上就是本篇的所有內容了，很是感謝帥哥美女們能看到這裏，若是這個文章寫得還不錯或者對你有一點點幫助，求點贊，求關注，求分享，固然有任何問題能夠在評論討論，我都會積極回答的，再次感謝😁