Cookie、localStorage 和 sessionStorage 的區別及應用例項

最小生成树發表於2024-08-13
CookieSession

在前端開發中，持久化資料儲存是一個非常常見的需求。為了實現這一點，瀏覽器提供了多種方式，包括 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. 區別總結：

特性CookielocalStoragesessionStorage
資料大小限制 約 4KB 約 5MB 約 5MB
生命週期 可設定過期時間 持久儲存，除非手動刪除 僅在頁面會話期間有效
作用域 與域名、路徑相關聯 同一域名下的所有頁面共享 僅在同一視窗或標籤頁中共享
是否隨請求傳送 每次請求都會自動附帶傳送 否 否
常見應用場景 會話管理、使用者偏好、跟蹤使用者 長期儲存的資料、離線 Web 應用 臨時儲存的資料、頁面間資料傳遞

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

相關文章