Cookie / Session / localStorage / sessionStorage：狀態到底放哪裡

Learning outcomes

• 能區分 cookie 與 server-side session。
• 能區分 localStorage / sessionStorage lifetime。
• 能解釋 HttpOnly/Secure/SameSite 的基本目的。
• 能判斷哪些資料不適合 client storage。

1. Cookie 是 Browser 儲存的小型 name/value state

Set-Cookie:
  session_id=abc123;
  HttpOnly;
  Secure;
  SameSite=Lax

符合 domain/path/policy 的 cookie 可能隨後續 HTTP request 自動帶上。

2. Session 常代表 server-side state

Browser cookie:
  session_id=abc123

Server store:
  abc123 → {
    userId: 42,
    expiresAt: ...
  }

Cookie 只存 session identifier；真正 session data 可以在 server/database/cache。

3. localStorage

localStorage.setItem(
  "theme",
  "dark"
);

同 origin 可持久保存，JavaScript 可讀。這意味著 XSS 風險下，不應把它當高敏感 secret vault。

4. sessionStorage

sessionStorage.setItem(
  "draft",
  "..."
);

通常綁定單一 tab/session lifecycle；和 cookie/server session 不是同一概念。

5. Storage 選擇依資料責任

Project checkpoint：Request Map v3

設計 Course Workspace 的 theme、draft、login identity 分別放哪，並寫出理由。

theme
  → client preference

draft
  → tab/client state

auth session
  → verified server context

Debug evidence：登入後刷新就登出

檢查 session state 存哪裡、cookie 是否真的 Set-Cookie 成功、Domain/Path/SameSite/Secure 是否符合、server session 是否仍存在。