瀏覽器 devtools Application cookie 有資料 為什麼我拿不到

今天在開發時發生一件事，我透過後端 api setCookie 在 devtools Application cookie 確認過，cookie 有被塞進去，但我在程式中卻拿不到資料，非常詭異，所以就趁這機會再學習及記錄一下cookie 的相關知識。

devtools Application cookie：

devtools

在devtools console 輸入，也是空值：

cookie 是什麼？

Cookie 是一種由網頁伺服器儲存在使用者瀏覽器上的小型資料片段。它們通常用於識別和追蹤使用者，以及儲存使用者的瀏覽偏好或其他資訊。

當你訪問一個網站時，該網站的伺服器可能會發送一個或多個 cookie 到你的瀏覽器。這些 cookie 會被儲存在你的電腦上，並在之後的請求中被送回伺服器。這樣，伺服器可以識別你的瀏覽器並記住你的資訊。

Cookie 有許多用途。例如，它們可以用於實現使用者登入，記住使用者的購物車內容，或者儲存使用者的瀏覽偏好。然而，由於 cookie 可以用於追蹤使用者的瀏覽行為，它們也引發了一些隱私問題。

簡單來說，cookie 就是在使用者瀏覽器上儲存的資料，目的是可以記住使用者的一些相關資訊，供日後使用。

為什麼我讀不到 cookie ？

回到本篇正題，為什麼我會讀取不到呢？由於瀏覽器的安全限制，JavaScript 無法存取設定了 HttpOnly 屬性的 cookies，所以只能透過 devtools Application 去查看。而這屬性會透過後端來設定。

再回到 devtools，透過下圖就可以發現，這個 cookie 被設定成HttpOnly，所以我們才無法在前端使用 JavaScript 去讀取它。

那我要如何刪除這 cookie？

因為前端沒辦法做到，所以除非 cookie 自己過期，否則就是要透過後端 api 去移除它。所以假如要移除它，就要在打別支 api 進行移除，如果是登入行為，就會打登出的 api 去移除此 cookie。

最後再補充一下，常用來將資料存在瀏覽器的幾種方式

Cookie：

• Cookie 是由伺服器設定並儲存在瀏覽器上的小型資料片段，主要用於識別和追蹤使用者。
• Cookie 的大小限制為 4KB。
• Cookie 可以設定過期時間。如果沒有設定過期時間，則在瀏覽器關閉時會被刪除。
• Cookie 在每次 HTTP 請求時都會被送回伺服器，這可能會影響性能。
• Cookie 可以設定 Secure 和 HttpOnly 標誌以增加安全性。

LocalStorage：

• LocalStorage 是一種在瀏覽器中儲存資料的方式，與 Cookie 不同，LocalStorage 中的資料不會被送回伺服器。
• LocalStorage 的大小限制通常為 5MB。
• LocalStorage 中的資料沒有過期時間，除非被明確刪除，否則會一直存在。
• LocalStorage 只能儲存字串，如果需要儲存其他類型的資料，需要先將其轉換為字串。

SessionStorage：

• SessionStorage 與 LocalStorage 類似，但是 SessionStorage 中的資料在瀏覽器關閉時會被刪除。
• SessionStorage 的大小限制通常為 5MB。
• SessionStorage 只能儲存字串，如果需要儲存其他類型的資料，需要先將其轉換為字串。