Cookies、LocalStorage 與 SessionStorage：前端資料儲存的差異與應用實例

1. Cookies

什麼是 Cookies？

Cookies 是瀏覽器用來儲存少量資料的小型文字檔案，通常用於追蹤使用者狀態或儲存簡單的設定。它會隨著 HTTP 請求自動傳送到伺服器，因此適合用來處理伺服器和客戶端之間的資料交換。

特性

容量限制：通常每個 Cookie 限制在 4KB 左右（總量依瀏覽器而定）。
傳輸方式：每次 HTTP 請求（包括圖片、CSS、JS 等資源）都會自動將相關 Cookies 傳送到伺服器，增加網路負擔。
存活時間：
- 如果設定了 Expires 或 Max-Age，Cookie 會在指定時間後過期。
- 沒有設定則為 Session Cookie，關閉瀏覽器後即失效。
存取範圍：
- 受域名（domain）和路徑（path）限制。
- 可以設定為僅伺服器存取（HttpOnly）或僅客戶端存取。
用途：
- 儲存使用者登入狀態（例如 token）。
- 追蹤使用者行為（例如廣告追蹤）。
- 儲存簡單的偏好設定。

// 設定 Cookie
function setCookie(name, value, days) {
  let expires = "";
  if (days) {
    const date = new Date();
    date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
    expires = "; expires=" + date.toUTCString();
  }
  document.cookie = name + "=" + value + expires + "; path=/";
}

// 取得 Cookie
function getCookie(name) {
  const nameEQ = name + "=";
  const cookies = document.cookie.split(";");
  for (let i = 0; i < cookies.length; i++) {
    let cookie = cookies[i].trim();
    if (cookie.indexOf(nameEQ) === 0) {
      return cookie.substring(nameEQ.length, cookie.length);
    }
  }
  return null;
}

// 刪除 Cookie
function deleteCookie(name) {
  document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
}

// 使用範例
setCookie("username", "JohnDoe", 7); // 設定一個 7 天後過期的 Cookie
console.log(getCookie("username")); // 輸出: JohnDoe
deleteCookie("username"); // 刪除 Cookie
console.log(getCookie("username")); // 輸出: null

2. LocalStorage

什麼是 LocalStorage？

LocalStorage 是 HTML5 提供的 Web Storage API 之一，用來在瀏覽器中儲存較大量的資料，且資料會長期保留，除非主動清除。它僅在客戶端操作，不會隨著 HTTP 請求傳送到伺服器。

特性

容量限制：通常為 5-10MB（依瀏覽器而定，遠大於 Cookies）。
傳輸方式：資料僅儲存在客戶端，不會自動傳送到伺服器。
存活時間：無過期時間，除非程式碼或使用者手動清除。
存取範圍：
- 受同源政策（same-origin policy）限制，僅限同一域名下的頁面存取。
- 所有同源的標籤頁和視窗都能共享同一份 LocalStorage 資料。
用途：
- 儲存應用程式設定（例如主題偏好）。
- 快取資料以提升效能。
- 儲存不需要與伺服器同步的資料。

// 設定 LocalStorage
localStorage.setItem("theme", "dark");

// 取得 LocalStorage
const theme = localStorage.getItem("theme");
console.log(theme); // 輸出: dark

// 移除單一 LocalStorage 項目
localStorage.removeItem("theme");
console.log(localStorage.getItem("theme")); // 輸出: null

// 清除所有 LocalStorage
localStorage.clear();

3. SessionStorage

什麼是 SessionStorage？

SessionStorage 也是 HTML5 的 Web Storage API，功能類似 LocalStorage，但它的資料僅在當前標籤頁的生命週期內有效，關閉標籤頁或瀏覽器後即清除。

特性

容量限制：與 LocalStorage 相同，通常為 5-10MB。
傳輸方式：資料僅儲存在客戶端，不會傳送到伺服器。
存活時間：僅在當前標籤頁存活，關閉標籤頁後清除。
存取範圍：
- 受同源政策限制，僅限同一域名下的頁面存取。
- 每個標籤頁獨立擁有自己的 SessionStorage，互不共享。
用途：
- 儲存臨時資料，例如表單輸入內容。
- 頁面臨時狀態管理。

// 設定 SessionStorage
sessionStorage.setItem("formData", JSON.stringify({ name: "John", age: 30 }));

// 取得 SessionStorage
const formData = JSON.parse(sessionStorage.getItem("formData"));
console.log(formData); // 輸出: { name: "John", age: 30 }

// 移除單一 SessionStorage 項目
sessionStorage.removeItem("formData");
console.log(sessionStorage.getItem("formData")); // 輸出: null

// 清除所有 SessionStorage
sessionStorage.clear();

Cookies、LocalStorage、SessionStorage 比較表

特性	Cookies	LocalStorage	SessionStorage
容量	~4KB	~5-10MB	~5-10MB
存活時間	可設定過期時間或關閉瀏覽器失效	永久（除非主動清除）	標籤頁關閉即清除
傳輸方式	隨 HTTP 請求自動傳送到伺服器	僅客戶端，無傳輸	僅客戶端，無傳輸
存取範圍	受域名和路徑限制	同源政策，共享於所有標籤頁	同源政策，限單一標籤頁
API 簡單性	需自行解析，較複雜	簡單（setItem/getItem）	簡單（setItem/getItem）
常見用途	登入狀態、追蹤資料	長期設定、快取資料	臨時資料、表單狀態

什麼時候用哪個？

使用 Cookies：
- 需要與伺服器交換資料（例如儲存 JWT 令牌）。
- 需要設定過期時間的資料。
- 儲存少量資料（例如使用者 ID）。
使用 LocalStorage：
- 需要儲存較大資料，且不需與伺服器同步。
- 希望資料長期保留（例如使用者偏好設定）。
使用 SessionStorage：
- 只需要臨時儲存資料，例如表單資料防止頁面刷新遺失。
- 每個標籤頁需要獨立的資料儲存。

注意事項

安全性：
- Cookies 若設定 HttpOnly，可防止 XSS 攻擊，但無法完全避免 CSRF。
- LocalStorage 和 SessionStorage 容易受到 XSS 攻擊，勿儲存敏感資料（如 token）。
瀏覽器支援：
- 這三者皆廣泛支援於現代瀏覽器，但老舊瀏覽器可能不支援 Web Storage。
清除資料：
- 使用者可能清除瀏覽器資料，導致 LocalStorage 或 Cookies 失效，需設計備案。
容量管理：
- LocalStorage 和 SessionStorage 容量較大，但仍需注意避免超過限制。

1. Cookies​

什麼是 Cookies？​

特性​

2. LocalStorage​

什麼是 LocalStorage？​

特性​

3. SessionStorage​

什麼是 SessionStorage？​

特性​

Cookies、LocalStorage、SessionStorage 比較表​

什麼時候用哪個？​

注意事項​