## 以下是 Cookie、Session 和 LocalStorage 的比較：

| 特性 | Cookie | Session | LocalStorage |
| --- | --- | --- | --- |
| 存儲位置 | 客戶端 | 伺服器端 | 客戶端 |
| 存儲大小 | 約4KB | 無限制 | 5MB |
| 存儲期限 | 可設定過期時間，如果不設定則瀏覽器關閉時消失 | 用戶關閉瀏覽器或者Session過期時消失 | 永久存儲，除非用戶主動清除 |
| 跨域 | 不支援 | 不支援 | 不支援 |
| 安全性 | 較低，因為存儲在客戶端，容易被竊取 | 較高，因為存儲在伺服器端 | 較高，但仍需要防止XSS攻擊 |

## 存儲格式 & 常見使用情境
以下是 Cookie、Session 和 LocalStorage 的存儲格式內容的介紹：

### 1. **Cookie**：
Cookie 的數據是以名/值對的形式存儲的，例如 `username=John Doe`。
一個網站可能會設置多個 Cookie，每個 Cookie 都有自己的名稱和值。此外，每個 Cookie 都可能有一個過期時間，如果沒有設置過期時間，則 Cookie 會在瀏覽器關閉時被刪除。

:::info
**常見使用情境**：
- **跟蹤用戶**：
網站可能會使用 cookie 來記錄用戶的瀏覽習慣，以便提供個性化的內容或廣告。
- **身份驗證**：
網站可能會在用戶登錄後設置一個 cookie，以便在用戶瀏覽網站時保持其登錄狀態。
:::
### 2. **Session**：
Session 的數據是以對象的形式存儲在伺服器上的。
每個 Session 都有一個唯一的 ID，這個 ID 會被存儲在一個 Cookie 中，以便伺服器可以識別來自同一用戶的請求。
Session 對象可以存儲任何類型的數據，例如數字、字符串、數組或者對象。
> Session 的機制就像是你去飲料店下了單以後，得到號碼牌，然後你走開幾步，店員就忘了你是誰。所以，如果你想去取飲料，你就得靠這張號碼牌，去跟店員領，店員會跟據這號碼牌，認定你是顧客、是否點過餐、知道你點了什麼東西，然後可以接著給你屬於你的飲料。
>
> 理解 Session 的原理後，回到 HTTP 上就是一樣的。只是，在網頁技術中，有兩種方法讓 Client 取得號碼牌，一個是用 Cookie，另一個是直接輸出並嵌入頁面之中的方法（就是要你把號碼背起來）。
>
>因為實作上的困難度考量，還有現今的 Browser 預設都支援 Cookie，所以在現有的網站框架中，都預設採用 Cookie 來發號碼牌和兌換資料。Cookie 的交換會在建立連線時，在背景自動完成，因此開發者不必考慮Client/Server的號碼牌交換問題。因為 Browser 會在建立連線後，第一時間就自動在背景把 Cookie 上傳到 Server，Server 也在回傳資料時，第一時間自動把 Cookie 回傳給 Client。
>
>所以，除非是有必要（像是 Browser/Client 不支援 Cookie 的情況），才會保留另一種實作。
>
>拿號碼牌去 Server 要資料，主要也分為兩種方法，Cookie 和運用標準的 Query string/POST body方法。（其實只要能把號碼傳到 Server 上，任何方法都行）
>
>from [Web 技術中的 Session 是什麼？](https://fred-zone.blogspot.com/2014/01/web-session.html)
:::info
**常見使用情境：**
- **身份驗證**：
Session 常用於存儲用戶登錄信息，以便在用戶瀏覽網站時保持其登錄狀態。
- **購物車**：
網上商店可能會使用 Session 來記錄用戶的購物車信息。
:::
### 3. **LocalStorage**：
LocalStorage 的數據是以 key / value pair 的形式存儲在瀏覽器的本地(用戶端)存儲中的。
每個 key / value pair 都是以字符串的形式存儲的，但你可以使用 `JSON.stringify()` 和 `JSON.parse()` 方法來存儲和讀取 JavaScript 對象。
LocalStorage 的數據是**永久性**的，除非用戶主動刪除它。

:::info
**常見使用情境**：
- **保存用戶偏好**：
保存用戶的主題選擇或其他設置
- **緩存數據**：
為了提高性能，網站可能會使用 LocalStorage 來緩存一些數據，例如，API 的響應數據。
:::