# 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)