Cookie, sessionStorage 和 localStorage 三者之間差異，以及安全問題

資安瀏覽器 Cookie

Word count: 846Reading time: 3 min

 2024/09/12 

前言

Cookie、sessionStorage 和 localStorage 是三種主要的用戶端瀏覽器數據存儲方式，各有其獨特的特點和適用場景。儘管我經常使用這些技術，在開發過程中選擇最適合的方式仍然有些困惑。因此，我決定整理這篇文章，以釐清它們之間的差異。

以下為三種儲存方式的簡介:

當使用者瀏覽器首次發送請求時，伺服器會在回應的標頭中添加一個 Set-Cookie 選項，並將 cookie 放入回應中。

HTTP/2.0 200 OK
Content-Type: text/html
Set-Cookie: yummy_cookie=choco
Set-Cookie: tasty_cookie=strawberry

[page content]

這個 cookie 會被送回並儲存在使用者的瀏覽器中。之後，每當使用者瀏覽器發送請求時，這個 cookie 都會被自動攜帶並發送回伺服器。

1
2
3

GET /sample_page.html HTTP/2.0
Host: www.example.org
Cookie: yummy_cookie=choco; tasty_cookie=strawberry

Cookie 容量小（4KB），可設置過期時間，每次 HTTP 請求都會攜帶，常用於身份驗證和用戶偏好設置。

1	Set-Cookie: id=a3fWa; Expires=Thu, 31 Oct 2021 07:28:00 GMT;

其他Cookie的設置與資安防禦請參考MDN。

Web Storage API 是一種以鍵值對（key-value）方式儲存資料的機制，且不會隨瀏覽器請求發送。它包含 sessionStorage 和 localStorage 兩種機制，其儲存容量比 cookie 大得多，通常在 5MB 到 10MB 之間。

為每個來源（origin）提供一個獨立的儲存區，該儲存區在關閉頁面時即被清除。適用於暫時性資料儲存和單頁應用程式（SPA）狀態管理。

// sessionStorage 存入數據
sessionStorage.setItem("name", "David");

// sessionStorage 讀取數據
sessionStorage.getItem("name");

與 sessionStorage 功能類似，但數據即使在關閉頁面或瀏覽器後仍然存在。這些數據只能通過 JavaScript、清除快取或使用網頁開發工具來刪除。localStorage 適用於長期存儲用戶偏好和離線應用數據。

// localStorage 存入數據
localStorage.setItem("name", "David");

// localStorage 讀取數據
localStorage.getItem("name");

特性	Cookie	sessionStorage	localStorage
容量	4KB	5MB	5MB+
生命週期	可設置	會話期間	永久
與服務器通信	是	否	否
訪問限制	所有窗口	同源同窗口	同源所有窗口

cookie、sessionStorage 和 localStorage 各有其優缺點和適用場景。在選擇使用哪種存儲方式時，開發者需要考慮數據的生命週期、容量需求以及安全性要求。無論選擇哪種方式，都應該謹慎處理敏感信息，並採取適當的安全措施來保護用戶數據。

CATALOG