請描述 cookie, sessionStorage 和 localStorage 的差異

三種瀏覽器儲存機制比較

特性	Cookie	sessionStorage	localStorage
容量上限	~4 KB	~5–10 MB	~5–10 MB
有效期	可設定（預設關閉分頁）	分頁關閉即清除	永久（手動清除）
跨分頁共用	✅（同源）	❌（僅限該分頁）	✅（同源）
隨請求自動傳送	✅（附在 HTTP header）	❌	❌
可由 JS 操作	✅（除非 HttpOnly）	✅	✅
安全性設定	HttpOnly, Secure, SameSite	—	—

Cookie

• 主要用途：身份驗證（Session ID、JWT）、追蹤、跨請求狀態
• 自動附在每個 HTTP 請求的 header，後端可直接讀取
• 可設定過期時間（Expires / Max-Age）；未設定則為 session cookie（關閉瀏覽器即消失）
• 安全屬性：
  • HttpOnly：JS 無法讀取，防 XSS 竊取
  • Secure：只在 HTTPS 傳輸
  • SameSite：防止 CSRF（Strict / Lax / None）

// 設定 cookie（JS 端）
document.cookie = 'token=abc123; max-age=3600; path=/; Secure; SameSite=Lax';

sessionStorage

• 主要用途：同一個分頁的暫存狀態（表單草稿、多步驟流程）
• 分頁關閉即自動清除；開新分頁也不共用
• API 與 localStorage 相同

sessionStorage.setItem('step', '2');
const step = sessionStorage.getItem('step');
sessionStorage.removeItem('step');
sessionStorage.clear();

localStorage

• 主要用途：使用者偏好設定、主題、語言、不需同步後端的資料
• 資料永久保存直到手動清除或使用者清除瀏覽器資料
• 同源的所有分頁、視窗共用

localStorage.setItem('theme', 'dark');
const theme = localStorage.getItem('theme');
localStorage.removeItem('theme');
localStorage.clear();

注意：localStorage 只能存字串，儲存物件要用 JSON.stringify / JSON.parse。

如何選擇？

• 需要傳給後端、身份驗證 → Cookie（搭配 HttpOnly + Secure）
• 同一分頁的暫時狀態、不想跨分頁共用 → sessionStorage
• 持久化的使用者設定、本地快取 → localStorage