在前端開發中，持久化數據存儲是一個非常常見的需求。為了實現這一點，瀏覽器提供了多種方式，包括 Cookie、localStorage 和 sessionStorage。這三者各有優劣，適用于不同的場景

1. Cookie

Cookie 是瀏覽器存儲少量數據的一種機制，通常由服務器生成并發送到客戶端。每次客戶端向同一域名發起請求時，Cookie 都會自動附帶在請求頭中發送到服務器。

如圖所示：

特點：

• 數據大小限制：單個 Cookie 的數據大小限制通常在 4KB 左右。
• 生命周期：Cookie 可以設置 expires 或 max-age 屬性來控制其有效期，默認情況下，Cookie 會在會話結束（即瀏覽器關閉）后刪除。
• 作用域：Cookie 與特定的域名和路徑關聯，可以通過設置 domain 和 path 來控制它的作用范圍。
• 安全性：可以通過 Secure 標記僅允許在 HTTPS 連接中傳輸 Cookie，還可以通過 HttpOnly 標記使 Cookie 無法被 JavaScript 訪問，增加安全性。

應用場景：

• 會話管理：例如，登錄狀態的保持。
• 用戶偏好：例如，保存用戶的語言設置。
• 跟蹤用戶行為：例如，第三方分析工具使用 Cookie 進行用戶跟蹤。

示例：

// 設置一個 Cookie
document.cookie = "username=John; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";

// 讀取 Cookie
const cookies = document.cookie.split("; ");
cookies.forEach(cookie => {
    const [key, value] = cookie.split("=");
    console.log(`${key}: ${value}`);
});

// 刪除 Cookie
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";

2. localStorage

localStorage 是 HTML5 引入的一種 Web 存儲機制，用于持久化保存客戶端數據。它的存儲是基于鍵值對的，并且不同域名的 localStorage 是獨立的。

特點：

• 數據大小限制：通常為 5MB。
• 生命周期：localStorage 中的數據沒有過期時間，除非手動刪除，否則數據會一直存在。
• 作用域：localStorage 只能在同一域名下的所有頁面共享。

應用場景：

• 長期保存的數據：例如，用戶的設置、主題選擇等不需要頻繁更改的數據。
• 離線 Web 應用：可以用于保存用戶在離線時生成的數據。

示例：

// 設置數據
localStorage.setItem('theme', 'dark');

// 讀取數據
const theme = localStorage.getItem('theme');
console.log(theme); // 輸出 'dark'

// 刪除數據
localStorage.removeItem('theme');

// 清空所有數據
localStorage.clear();

3. sessionStorage

sessionStorage 也是 HTML5 引入的 Web 存儲機制，與 localStorage 類似，但它的生命周期僅限于瀏覽器會話期間。關閉瀏覽器標簽頁或窗口后，sessionStorage 中的數據就會被清除。

特點：

• 數據大小限制：通常為 5MB。
• 生命周期：數據在頁面會話期間有效，頁面關閉后數據即被刪除。
• 作用域：sessionStorage 只能在同一窗口或標簽頁中共享，不同的窗口或標簽頁之間的數據互不影響。

應用場景：

• 臨時保存的數據：例如，表單數據的臨時保存，以防止頁面刷新導致的數據丟失。
• 頁面間的數據傳遞：例如，在多步表單中，傳遞各步之間的數據。

示例：

// 設置數據
sessionStorage.setItem('sessionData', 'temporaryData');

// 讀取數據
const data = sessionStorage.getItem('sessionData');
console.log(data); // 輸出 'temporaryData'

// 刪除數據
sessionStorage.removeItem('sessionData');

// 清空所有數據
sessionStorage.clear();

4. 區別總結：

PS：圖片來源于B站技術蛋老師，侵刪