Frontend Storage - Cookie vs LocalStorage vs SessionStorage

前端必知的存儲方案：Cookie vs LocalStorage vs SessionStorage

@ Browser

前言

身在前端有幾個必須知道的瀏覽器存儲方案，重點差異在於： 容量上限、有效期限設置、是否與伺服器互動 ，各自有不同的特性適合運用於不同場景。

Cookie 是最早的瀏覽器端儲存機制，最大特點是能夠在每次 HTTP 請求中自動夾帶，實現用戶與伺服器之間的狀態同步，該特性非常適合應用在登入狀態的維持與伺服器端辨識用戶。

可以為 Cookie 設定 max-age 或 expires 來控制它的有效期限，也能設定 HttpOnly 和 Secure 等屬性提升安全性。但也因為每次請求都會附帶 Cookie，若濫用會影響網路效能。

瀏覽器 Document.cookie🔗 設定：

document.cookie = newCookie;

藉由伺服器 HTTP 表頭 Set-Cookie🔗 設定：

伺服器瀏覽器伺服器瀏覽器瀏覽器儲存 Cookie發送初始 HTTP 請求（無 Cookie）回應 HTTP，包含 Set-Cookie 標頭再次發送 HTTP 請求自動附帶 Cookie回應請求，可使用 Cookie 的資訊

Set-Cookie: <cookie-name>=<cookie-value>
Set-Cookie: <cookie-name>=<cookie-value>; Domain=<domain-value>
Set-Cookie: <cookie-name>=<cookie-value>; Expires=<date>
Set-Cookie: <cookie-name>=<cookie-value>; HttpOnly
Set-Cookie: <cookie-name>=<cookie-value>; Max-Age=<number>
Set-Cookie: <cookie-name>=<cookie-value>; Partitioned
Set-Cookie: <cookie-name>=<cookie-value>; Path=<path-value>
Set-Cookie: <cookie-name>=<cookie-value>; Secure


Set-Cookie: <cookie-name>=<cookie-value>; SameSite=Strict
Set-Cookie: <cookie-name>=<cookie-value>; SameSite=Lax
Set-Cookie: <cookie-name>=<cookie-value>; SameSite=None; Secure


// Multiple attributes are also possible, for example:
Set-Cookie: <cookie-name>=<cookie-value>; Domain=<domain-value>; Secure; HttpOnly

LocalStorage

localStorage 不會隨著請求發送至伺服器，並且能永久保留資料直到被明確移除。相較於 Cookie，localStorage 容量更大，也更適合儲存使用者端偏好或設定檔。

localStorage.setItem("name", "Joe");
localStorage.getItem("name");

SessionStorage

sessionStorage 與 localStorage 類似，但最大差別在於其生命週期僅限於當前「分頁會話」。只要關閉瀏覽器分頁，儲存的內容就會清除。

sessionStorage.setItem("name", "Joe");
sessionStorage.getItem("name");

瀏覽器頁面使用者瀏覽器頁面使用者sessionStorage 是空的sessionStorage 被清除開啟新分頁或重新整理頁面在頁面上輸入資料（例如表單）使用 sessionStorage.setItem() 儲存資料切換到同一頁籤其他畫面使用 sessionStorage.getItem() 取得資料關閉分頁

延伸問題

字串以外的資料結構

cookie、localStorage、sessionStorage 都是以「鍵值對（key-value）」的形式存儲，而且「值只能是字串（string）」。若要存物件或陣列，必須用 JSON.stringify() 轉為字串存儲再透過 JSON.parse() 解析：

const user = { name: 'Alice', age: 30 };
localStorage.setItem('user', JSON.stringify(user));


const data = JSON.parse(localStorage.getItem('user'));

如果網站面向國際用戶，可以參考最嚴格的 GDPR（General Data Protection Regulation，歐盟通用資料保護規範）🔗

  • 適用對象 ：歐盟境內的用戶，即使網站不在歐盟，只要服務歐盟用戶也受限。
  • 重點規範 ：
    • 事前明確同意 ：非必要性 Cookie（如追蹤、廣告）不得預設啟用，必須用戶「主動勾選」。
    • Cookie 政策說明 ：需明確說明 Cookie 用途、儲存時間、第三方共享情況。
    • 撤回權利 ：使用者應能隨時修改或撤回 Cookie 同意。

這也是為什麼很多網站在使用 Cookie 之前會事先詢問是否允許，攸關個資保護相關的法規。

  • Secure ：確保只有在以加密的請求透過 HTTPS 協議時，才會傳送給伺服器。
  • HttpOnly ：避免 JavaScript 的 Document.cookie 方法取得 HttpOnly cookies，HttpOnly cookies 只會被傳送到伺服器，此方法可以避免跨站腳本攻擊 (XSS)。

總結

項目CookielocalStoragesessionStorage
容量上限約 4KB約 5~10 MB約 5~10 MB
有效期限可設定過期時間永久直到手動刪除直到頁籤關閉
與伺服器互動每次請求會自動送出無無
常見用途存放與伺服器溝通資訊（登入狀態、語系偏好等登入相關資料）存放本地資料（客戶端購物車清單、離線資料）存放單次頁籤資料（單次登入流程、表單資料暫存）

延伸閱讀