前言

在前端開發中，Storage 是瀏覽器提供的用于在客戶端存儲數據的機制，包括 LocalStorage 和 SessionStorage。它們通過 Window 對象的屬性暴露，支持以**鍵值對**形式存儲數據，適用于
不需要頻繁與服務器交互 的輕量級數據存儲。

位置在 F12開發者工具 ——》 Application ——》 Storage

一、核心概念與區別

二、常用 API

兩者的 API 完全一致，通過 window.localStorage 和 window.sessionStorage 調用。

1、存儲數據（setItem(key, value)）

// 存儲字符串
localStorage.setItem('theme', 'dark'); // LocalStorage
sessionStorage.setItem('searchQuery', '前端'); // SessionStorage// 存儲對象（需先轉為JSON字符串）
const user = { id: 1, name: 'Alice' };
localStorage.setItem('user', JSON.stringify(user));

2、 獲取數據（getItem(key)）

const theme = localStorage.getItem('theme'); // "dark"
const searchQuery = sessionStorage.getItem('searchQuery'); // "前端"// 解析JSON對象
const user = JSON.parse(localStorage.getItem('user')); // { id: 1, name: 'Alice' }

3、刪除單個數據（removeItem(key)）

localStorage.removeItem('theme'); // 刪除LocalStorage中的theme鍵
sessionStorage.removeItem('searchQuery'); // 刪除SessionStorage中的searchQuery鍵

4、清空所有數據（clear()）

localStorage.clear(); // 清空當前域名下的所有LocalStorage數據
sessionStorage.clear(); // 清空當前標簽頁的所有SessionStorage數據

5、遍歷所有鍵（key(index) 或 Object.keys()）

// 方法1：通過索引遍歷（兼容性好）
for (let i = 0; i < localStorage.length; i++) {const key = localStorage.key(i); // 獲取第i個鍵名const value = localStorage.getItem(key);console.log(`${key}: ${value}`);
}// 方法2：轉為對象遍歷（ES6+）
const storageKeys = Object.keys(localStorage);
storageKeys.forEach(key => {const value = localStorage.getItem(key);
});

三、使用場景

LocalStorage

1. 持久化用戶配置：記住用戶的主題偏好、語言設置等。
2. 緩存簡單數據：緩存頻繁訪問但不敏感的數據（如登錄令牌，需配合安全措施）。
3. 離線功能：配合 Service Worker 實現離線應用的數據存儲。

SessionStorage

• 臨時表單數據：存儲用戶在當前頁面填寫的表單數據，防止刷新頁面丟失。
• 單頁應用（SPA）狀態：存儲當前路由的臨時狀態（如搜索條件），避免路由切換時數據丟失。
• 敏感數據臨時存儲：存儲一次性使用的敏感數據（如臨時驗證碼），關閉頁面后自動清除。

四、注意事項

1、數據類型限制

• 僅支持存儲 字符串，存儲對象或數組時需通過 JSON.stringify() 和 JSON.parse() 轉換：

// 錯誤：直接存儲對象會轉為 [object Object]
localStorage.setItem('user', { name: 'Alice' }); // 正確：先序列化
localStorage.setItem('user', JSON.stringify({ name: 'Alice' }));

2、安全性

1. 不加密存儲：數據以明文存儲，禁止存儲敏感信息（如密碼、支付信息）。
2. 同源策略：僅同域名下的頁面可訪問，不同子域名也無法共享（如 a.example.com 和 b.example.com 不共享）。
3. XSS 風險：存儲的數據可能被惡意腳本讀取，需避免信任不可控的輸入。

3、 性能與使用建議

1. 同步阻塞：API 為同步操作，大量數據存儲可能阻塞主線程，建議分批次處理。
2. 存儲容量限制：避免存儲過大數據，超出限制會拋出 QuotaExceededError 異常。
3. 監聽數據變化：可通過 storage 事件監聽同一域名下其他窗口的存儲變化（SessionStorage 不觸發此事件）：

window.addEventListener('storage', (event) => {console.log(`鍵 ${event.key} 的值從 ${event.oldValue} 變為 ${event.newValue}`);
});

五、與 Cookie 的對比

總結

LocalStorage 和 SessionStorage 是前端輕量級存儲的核心工具，適用于
非敏感數據 的持久化或臨時存儲。使用時需注意數據類型轉換、安全性和存儲容量，結合業務場景選擇合適的存儲方式。