---
# System prepended metadata

title: 'Web Storage, Cookie'
tags: [Website]

---

# Web Storage, Cookie
###### tags: `Website`

> - 由於 **HTTP** 是一個**無狀態（Stateless）的通訊協定**，可以在 Client 與 Server 兩端進行溝通，但是無法紀錄網路上的行為。
> - 以前若想要 **存取 Client 端資料**會使用 Cookie。
> - 但由於 Cookie 可存取的資料有限，HTML5 發展出了 Web Storage。

## cookie
> - Cookie 為瀏覽器紀錄的一小段**文字**資料。（`key=value` 格式的字串）
> - 會一直儲存在使用者的瀏覽器中，直到指定的日期失效。
> - Server 端或 Client (瀏覽器) 端都可以讀取和寫入 cookie 資料。
> - 通常被用來保持使用者的登入狀態。

```javascript=
//  前端建立 Cookie
document.cookie = 'welcome=Hello'

// 前端取得 Cookie
console.log(document.cookie) 

// 前端刪除 Cookie // 設定過期日期
document.cookie = 'welcome=; expires=Thu, 01 Jan 1970 00:00:00 GMT'

// 前端修改 Cookie // 建立同名的 Cookie 覆蓋掉原本的
document.cookie = 'welcome=Hey'

```
#### Cookie 細節設定
> Cookie 除了單純的鍵值對之外，伺服器也可以在 Set-Cookie 內標註這組資料的額外屬性。
- **`domain`**：Cookie 的有效 domain，如果未設定，就會自動綁在執行 Set-Cookie 的 domain 下；雖然可以自行設置，但其實也只能在一級/次級網域之間調整，寫到其他人的 domain 是寫不進去的。
- **`path`**：可以指定 Cookie 只在特定路徑下生效，未設定預設為 '/'
- **`Max-Age`**：有效期限，單位是秒；當數值為正數時有效，負數時為本次 Session 有效；0 為刪除 Cookie
- **`Expires`**：同上，只是指定的是時間點
- **`secure`**：安全，當這個屬性被設為 true 時，此 Cookie 就只會在「安全的協議」下傳輸，通常為 HTTPS
- **`HttpOnly`**：只能在網路傳輸中使用，當設為 true 時，此 Cookie 就無法在任何 JavaScript 程式碼中取得


:::info
**Session Cookies**
指的是沒有指定 Expires 或 Max-Age 的 Cookies，也就是當瀏覽器關閉時，這些 Cookies 也會跟著消失。不過網頁瀏覽器可使用 session restoring，讓 session cookies 永久保存，就像瀏覽器從來沒關閉。(有設定失效時間的則稱 persistent cookie)
:::
:::info
**Third-Party Cookie 第三方 Cookie**
- 網頁很多時候會需要向其他網域請求資源，而這些請求可以附加 cookie，使其可以跨網域的追蹤並分析使用者行為。
[e.g] example.com 發出 ad.com 的請求時，會攜帶 ad.com 的 cookie
- 但隨著隱私權的提升，Chrome 對第三方 Cookie 有所限制，Safari 則完全禁止。
:::
:::warning
**Cookie 運作流程**
- 伺服器透過 `Set-Cookie` HTTP Header 傳遞給瀏覽器
- 瀏覽器收到後會將 Cookie & 設定資訊 儲存起來
- 當瀏覽器再次發送 HTTP Request 指令到伺服器時，都會夾帶 Cookie，讓伺服器比對是否符合存放資格。
:::
:::warning
**舉例說明**
也就是說當瀏覽器在取得網頁首頁時如果裡面包含 20 張圖、3 個 CSS、2 個 JavaScript 檔的話，同樣一份 Cookie 就會送出 25 次到伺服器，如果 Cookie 的大小有 4K 的話，光是首頁就要從你的電腦發送出 100KB 的頻寬，且可能只有首頁會用的到這個 Cookie 而已。
:::
:::danger
**Cookie 缺點**
- 由於 Cookie 會被附加在每一次的 HTTP 請求中，使用過多會造成瀏覽器的性能問題。
- Cookie 有大小數量限制，單個最大 4K，一個 domain 下最多設置 20 個，不太可能將全部的使用者資料都儲存在瀏覽器端。
:::

## Web Storage
> HTML5 提出在使用者端儲存資料的新方法，彌補了cookie儲存量小，且會附加在每次請求中的效能問題。
#### Web Storage 又分為兩種，差別在於生命週期和有效範圍：
|   | local storage | Session storage |
| -------- | -------- | -------- |
| 生命週期 | 永久保存（除非被清除）| 每次分頁或瀏覽器關掉後就會清除 |
| 跨瀏覽器分頁 | O | X |


## Web Storage, Cookie 比較
|   | Cookies | Web Storage |
| -------- | -------- | -------- |
| 儲存空機大小 | 4k (瀏覽器可能各異) | 5M（瀏覽器可能各異）|
| 伺服器端存取 | X | O |
| 存取限制 | 相同網域及路徑 | 相同網域 |
| 處理方式 | 字串 |  JS 物件 |
| 事件支援 | X | O |
| 刪除方式 | 關閉瀏覽器或設定時間過期 | 使用API |
| 常見使用 | 使用者的登入狀態 / 記錄並分析使用者行為 | 使用API |

### 參考資料
[HTTP cookies MDN](https://developer.mozilla.org/zh-TW/docs/Web/HTTP/Cookies)
[什麼是 Cookie？如何用 JS 讀取/修改 document.cookie?](https://shubo.io/cookies/)
[HTML5 的 Web Storage- local storage 與 session storage](https://tools.wingzero.tw/article/sn/28)
[[WEB] Cookie & Session 是什麼？](https://medium.com/schaoss-blog/%E5%89%8D%E7%AB%AF%E4%B8%89%E5%8D%81-27-web-cookie-session-%E6%98%AF%E4%BB%80%E9%BA%BC-83f9747caf23)
[Cookie、LocalStorage、SessionStorage 差異](https://medium.com/@bebebobohaha/cookie-localstorage-sessionstorage-%E5%B7%AE%E7%95%B0-9e1d5df3dd7f)