HTML Web Storage API：本地存儲和會話存儲

HTML Web 存儲 API 提供了一種在用戶瀏覽器中本地存儲數據的方法。您可以使用它在本地安全地存儲大量數據，而不會影響網站性能。

與 cookie 不同，Web 存儲具有顯著更高的存儲限制（5MB 與 4KB），並且存儲的數據永遠不會隨每個請求發送到服務器。因此，服務器無法通過 HTTP cookie 操作 Web 存儲數據。

此外，存儲綁定到源（每個域、協議和端口）。所有網頁，來自一個來源（具有相同的協議、域和端口），可以存儲和訪問相同的數據。即使您從 http 更改協議 到 https ，您無法訪問使用 http 存儲的數據 協議。

網絡存儲對象

HTML Web 存儲提供了兩個對象，用於在瀏覽器中將數據保存為鍵值對：

• localStorage — 存儲沒有過期日期的數據，即使在瀏覽器窗口關閉後仍然存在。您必須以編程方式或通過清除瀏覽器的數據來顯式刪除數據。數據在同一來源的所有會話之間共享。
• sessionStorage — 存儲頁面會話期間的數據，當瀏覽器選項卡關閉時，這些數據會自動清除。如果您打開同一個網站的多個標籤頁，它們將有不同的會話，並且無法訪問彼此的數據。

從 localStorage 保留沒有過期日期的數據，可用於存儲購物車商品、用戶偏好（貨幣、深色或淺色配色方案）、已添加書籤的產品，甚至記住用戶已登錄網站等信息。

方法和屬性

localStorage 和 sessionStorage 對象提供相同的方法和屬性，因為它們返回相同的 Storage 對象。

Storage 對像只有一個屬性，length ，返回其中存儲的項目數。

以下是您可以調用來操作 Web 存儲數據的方法列表：

網絡存儲示例

讓我們玩 localStorage 了解網絡存儲的工作原理。

存儲數據

以下示例使用 setItem() 將新的鍵值對添加到 localStorage ：

localStorage.setItem('id', 'ATS-456');
localStorage.setItem('email', '[email protected]');

請注意，鍵和值都傳遞給 setItem() 必須是字符串。如果您傳遞任何不是字符串的值，例如對像或數字，則 setItem() 方法會自動將其轉換為字符串：

localStorage.setItem('visitors', 34); // stored as '34'
localStorage.setItem('user', { name: 'Alex' }); // stored as '[oject Object]'

對於對象，需要使用 JSON.stringify() 方法將其轉換為字符串，然後再存儲到 Web 存儲中：

const str = JSON.stringify({name: 'Alex'});
localStorage.setItem('user', str);

檢索數據

檢索 localStorage 中存儲的數據 按鍵，使用 getItem() 方法：

localStorage.getItem('id');     // ATS-456
localStorage.getItem('email');  // [email protected]

或者，您也可以使用點 (. ) 捐贈以從 localStorage 訪問密鑰 喜歡的對象：

localStorage.visitors;  // 45

如果密鑰不存在，則 null 值由 getItem() 返回 ：

localStorage.getItem('name'); // null

刪除數據

從 localStorage 中刪除鍵值對 ，只需將密鑰的名稱傳遞給 removeItem() 方法：

localStorage.removeItem('id');

或者，您也可以使用 delete 操作符來刪除一個像對像一樣的鍵：

delete localStorage.email;

要刪除所有鍵值對，請使用 clear() 替代方法：

localStorage.clear();

遍歷鍵

遍歷存儲在 localStorage 中的所有鍵 ，我們可以使用 for...of 循環：

const keys = Object.keys(localStorage);
for (let key of keys) {
    console.log(`${key}: ${localStorage.getItem(key)}`);
}

Object.keys() 方法返回 localStorage 的所有自己的屬性 對象，忽略原型。

總結

HTML Web 存儲 API 提供了一種在用戶瀏覽器中本地存儲數據的機制。在 Web 存儲之前，cookie 是唯一可用於存儲應用程序數據的選項。

與 cookie 不同，網絡存儲更安全，能夠存儲更大量的數據（5MB+，具體取決於瀏覽器），而不會影響應用程序的性能。

Web存儲是綁定源的，也就是說同源的頁面只能訪問自己的數據。

Web存儲提供了兩個對象，localStorage 和 sessionStorage , 將數據保存為瀏覽器中的鍵值對。

localStorage中存儲的數據 是永久性的，並在所有具有相同來源的選項卡和窗口之間共享。關閉瀏覽器或重啟電腦後依然存在。

sessionStorage 對象臨時存儲數據，直到會話處於活動狀態。數據只能在同一個選項卡中訪問，不能從其他選項卡訪問。關閉瀏覽器選項卡後會自動清除。