客戶端儲存機制SessionStorage、LocalStorage 以及 Cookie 詳細介紹及對比

SessionStorage、LocalStorage 和 Cookie 都是瀏覽器提供的客戶端儲存機制，作為瀏覽器的內建物件使用。這些物件的主要目的是允許在客戶端（使用者的瀏覽器）儲存和管理資料，以支援無伺服器通訊的應用場景。

SessionStorage 和 LocalStorage：作為 HTML5 引入的新 API，它們屬於 Web Storage API，透過 JavaScript 操作，可以在客戶端儲存較大規模的資料。這些儲存機制的作用範圍僅限於瀏覽器（客戶端），不會自動與伺服器通訊。

Cookie：Cookie 是較早的儲存機制，既能用於客戶端儲存資料，也能透過 HTTP 請求自動與伺服器進行互動。與 Web Storage API 不同，Cookie 是基於 HTTP 協議設計的，可以透過設定適當的屬性（如 HttpOnly、Secure 等）來增強與伺服器通訊的安全性和控制。

Cookie

Cookie 是一種用於在客戶端和伺服器端之間傳遞資料的儲存機制，通常用於會話管理、使用者認證、偏好設定等。它的特點是可以長期儲存。與 SessionStorage 和 LocalStorage 不同的是，Cookie是由瀏覽器傳送給伺服器的，因此可以被伺服器端讀取。

# 特點

 • 儲存大小：每個 Cookie 大小限制在 4KB 左右。
 • 生命週期：可以透過 expires 或 max-age 屬性設定過期時間，預設在會話結束時清除。
 • 作用域：可以設定作用域（domain 和 path），使得 Cookie 適用於指定的子域和路徑。
 • Cookie 會自動隨 HTTP 請求傳送到伺服器（可以透過 HttpOnly 和 Secure 屬性加強安全）。

# 使用場景

 • 使用者認證（如會話標識 Session ID）。
 • 跨頁面、跨會話的使用者偏好儲存（如語言、主題設定等）。
 • 伺服器和客戶端之間的資料傳遞。

# 使用方式

 // 使用 JavaScript 操作 Cookie：
 // 設定Cookie
 document.cookie = "username=John; expires=Fri, 31 Dec 2024 12:00:00 UTC; path=/";

 // 讀取Cookie
 const cookies = document.cookie;

 // 刪除Cookie（將expires設定為過去時間）
 document.cookie = "username=John; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";

SessionStorage

SessionStorage 是一種在瀏覽器端儲存資料的方式，它的特點是儲存的資料僅屬於單個瀏覽器選項卡和視窗，瀏覽器關閉或者選項卡關閉時，SessionStorage 中的資料也會被清除。

# 特點

 • 儲存大小：通常為 5MB 左右。
 • 生命週期：僅在頁面會話期間有效，關閉頁面或標籤後資料會被刪除。
 • 作用域：同源（同協議、同域名、同埠）下的不同頁面獨立，不共享資料。

# 使用場景

 • 用於儲存在當前會話中臨時的資料，如表單的臨時資料、使用者操作狀態等。
 • 不需要跨頁面或跨會話儲存資料。

# 使用方式

 // 儲存資料
 sessionStorage.setItem('key', 'value');

 // 讀取資料
 const data = sessionStorage.getItem('key');

 // 刪除資料
 sessionStorage.removeItem('key');

 // 清除所有資料
 sessionStorage.clear();

# 補充注意

 對於SessionStorage可能一直存在一個誤區，在Chrome瀏覽器89版本前，
 當前會話頁面指的是當瀏覽器視窗沒有關閉時，視窗內同域網站可以共享此資料（同源瀏覽器多個視窗不共享），

 當頁面全部關閉或視窗關閉後，sessionStorage資料會被摧毀，
 所以你用a標籤跳轉還是js跳轉都會共享SessionStorage。

 而在2021年3月初Chrome瀏覽器進行了批次更新，更新到89版本後，
 透過a標籤target="_blank"跳轉到新頁面時SessionStorage就會丟失。
 Chrome這一更新可能會導致很多網站的SessionStorage丟失，頁面可能直接就崩掉了。

LocalStorage

LocalStorage 也是瀏覽器端的儲存方式，但與 SessionStorage 不同，它的特點是儲存的資料不會被瀏覽器關閉或選項卡關閉所影響，關閉瀏覽器後，資料依然會儲存。可以長期儲存在使用者裝置中直到被清除。LocalStorage 中儲存的資料可以在同一域名下的不同頁面中共享。

# 特點

 • 儲存大小：通常為 5MB 左右。
 • 生命週期：永久儲存，直到使用者或程式主動刪除。
 • 作用域：同源下的所有頁面共享資料。

# 使用場景

 • 用於儲存長期有效的資料，如使用者設定、登入狀態等。
 • 可以在不同頁面或下次訪問時使用同一儲存資料。

# 使用方式

 // 儲存資料
 localStorage.setItem('key', 'value');

 // 讀取資料
 const data = localStorage.getItem('key');

 // 刪除資料
 localStorage.removeItem('key');

 // 清除所有資料
 localStorage.clear();

總結

總結：SessionStorage 和 LocalStorage 是現代瀏覽器為前端開發者提供的獨立於伺服器的儲存方式，而 Cookie 則是傳統的儲存和通訊機制，可以與伺服器共享資訊。