Cookie、本機儲存和會話存儲

這是前端面試問題系列的第 6 篇文章。如果您希望提高準備程度或保持最新狀態，請考慮註冊前端訓練營。

---

Cookie、本機儲存和會話儲存都用於在客戶端儲存資料。這些機制對於儲存身份驗證令牌或僅限客戶端的狀態（例如主題或個人化設定）特別有用。所有三種儲存類型都具有以下特徵：

1. 它們將資料儲存為鍵值對。
2. 所有值都以字串格式儲存。如果值不是字串，則會在儲存之前對其進行序列化。
3. 用戶端可以存取儲存在這些機制中的資料（HttpOnly cookie 除外）。

餅乾

Cookie 無法儲存大量資料；每個網域的儲存上限約為 4KB。有此限制是因為 cookie 會隨著瀏覽器發出的每個請求自動傳送到伺服器。在 cookie 中儲存過多的客戶端資料會增加負載大小，進而對效能產生負面影響。

我們應該在 Cookie 中儲存什麼樣的資料？
Cookie 非常適合儲存需要傳輸到伺服器的數據，例如身份驗證令牌、會話 ID、分析 ID 和類似資訊。此外，cookie 允許在同一網域或子網域的不同標籤或視窗之間共用資料。

您可以使用各種標誌來設定 cookie，以調整其行為或加強安全性：

• HttpOnly 確保用戶端無法透過 JavaScript 存取 cookie，從而降低 XSS 攻擊的風險。
• maxAge/expires 指定 cookie 的到期日期。如果未設定到期日期，關閉瀏覽器時將刪除 cookie。

想要了解更多關於 cookie 標誌的資訊嗎？查看我的 LinkedIn 貼文。

與本機儲存和會話儲存不同，cookie 也可以由伺服器使用 Set-Cookie 標頭來設定（讀取：「新增」）。

// Set a cookie for the key `token` that `expires` on 1st March 2025.
document.cookie =
  'token=a1-b2-c3; expires=Sat, 1 Mar 2025 23:59:59 GMT; path=/';

// Read all cookies. There's no way to read specific cookies using `document.cookie`.
// You have to parse the string yourself.
console.log(document.cookie); // token=a1-b2-c3

// Delete the cookie with the key `token` by setting an
// expiry date in the past. The value doesn't matter.
document.cookie = 'token=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/';

本地儲存

與 cookie 不同，localStorage 提供更大的儲存容量，每個網域約 5MB。這是因為 localStorage 是為儲存長期資料而設計的。即使瀏覽器關閉，它也會保留數據，使其成為持久客戶端儲存需求的理想選擇。

那我們應該在localStorage中儲存什麼樣的資料呢？
localStorage 最適合儲存僅在客戶端使用且不需要每次請求都傳送到伺服器的資料。一些例子是用戶登入之前添加到購物車中的網站或產品的主題。

儲存在 localStorage 中的資料將無限期地保留，直到使用者手動刪除它或網站使用 JavaScript 清除它。

與 cookie 類似，localStorage 中的資料可以在同源的所有標籤或視窗中訪問，這使得它對於在網域內共用客戶端狀態非常有用。

// Set a cookie for the key `token` that `expires` on 1st March 2025.
document.cookie =
  'token=a1-b2-c3; expires=Sat, 1 Mar 2025 23:59:59 GMT; path=/';

// Read all cookies. There's no way to read specific cookies using `document.cookie`.
// You have to parse the string yourself.
console.log(document.cookie); // token=a1-b2-c3

// Delete the cookie with the key `token` by setting an
// expiry date in the past. The value doesn't matter.
document.cookie = 'token=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/';

會話存儲

sessionStorage 用於儲存短暫的客戶端資料。與 localStorage 一樣，它為每個網域提供約 5MB 的儲存容量，並共用相同的 API。

雖然 sessionStorage 和 localStorage 具有相似的功能，但它們在兩個關鍵方面有所不同：資料持久性和可訪問性。
與 localStorage 不同，一旦選項卡或瀏覽器關閉，sessionStorage 就不會保留資料。此外，儲存在 sessionStorage 中的資料與建立它的特定選項卡或視窗隔離，這表示來自相同來源的其他標籤或視窗無法存取它。

那麼 sessionStorage 的用例是什麼？
sessionStorage 非常適合儲存僅單一會話所需的資料。例如，假設使用者填寫了一份長表單，但意外地刷新了頁面。如果表單資料儲存在 sessionStorage 中，它將在刷新過程中持續存在，從而允許使用者繼續操作而不會遺失進度。

但是，請務必注意，在其他選項卡中或關閉選項卡後將無法存取此資料。

// Set a value in localStorage.
localStorage.setItem('theme', 'dark');

// Get a value from localStorage.
console.log(localStorage.getItem('theme')); // 'dark'

// Remove a value from localStorage.
localStorage.removeItem('theme');

// Clear all data in localStorage.
localStorage.clear();

雖然cookie會自動包含在瀏覽器發送的每個請求中，但儲存在localStorage或sessionStorage中的資料可以透過編寫自訂程式碼手動傳輸到伺服器。

---

概括

1. Cookie、localStorage 和 sessionStorage 用於在客戶端儲存資料。
2. Cookie 是唯一可以由伺服器使用 Set-Cookie 回應標頭進行設定的儲存形式。
3. Cookie 會隨著每個請求自動傳送到伺服器。
4. 與 cookie (4KB) 相比，localStorage 和 sessionStorage 的儲存空間明顯較大 (5MB)。這兩個儲存共享相同的 API 介面。
5. Cookie 有有效期，如果沒有有效期，它們會在瀏覽器關閉時被清除。
6. localStorage 資料會無限期保留，除非由使用者或網站本身手動清除。
7. sessionStorage 資料在會話結束後（即選項卡或視窗關閉時）被清除。

---

喜歡你剛剛讀到的內容嗎？考慮看看前端訓練營✌️

以上是Cookie、本機儲存和會話存儲的詳細內容。更多資訊請關注PHP中文網其他相關文章！