搞清楚Cookie

查小小飛發表於2020-03-18
Cookie

什麼是Cookie

當你訪問一個網站後，例如淘寶網，淘寶網的伺服器就會響應，給你返回頁面內容，然後你就看到了淘寶的首頁，除此之外，它還“偷偷，靜悄悄地”給你的瀏覽器傳送了一些資料，這些資料是不需要使用者看到的。這些資料會被瀏覽器儲存到本地，當你下一次用同一個瀏覽器再次訪問淘寶網，這些資料也會被髮送給淘寶伺服器。這些資料就是Cookie。

小結： Cookie就是伺服器給瀏覽器發給瀏覽器的一些資料。

Cookie放在哪兒

Cookie 存放在客戶端中，有兩種情況：

1.會話期Cookie:

會話期Cookie是最簡單的Cookie，瀏覽器關閉之後它會被自動刪除，也就是說它僅在會話期內有效。會話期Cookie不需要指定過期時間（Expires）或者有效期（Max-Age）。需要注意的是，有些瀏覽器提供了會話恢復功能，這種情況下即使關閉了瀏覽器，會話期Cookie也會被保留下來，就好像瀏覽器從來沒有關閉一樣。

2.永續性Cookie

硬碟Cookie: 硬碟Cookie儲存在硬碟裡，有一個過期時間，除非使用者手工清理或到了過期時間。

Cookie的作用

Cookie 就是伺服器傳送給瀏覽器的一小段資料，那麼這些資料又有什麼作用呢？ 通常，它用於告知服務端兩個請求是否來自同一瀏覽器，如保持使用者的登入狀態。

Cookie主要用於以下三個方面：

  • 會話狀態管理（如使用者登入狀態、購物車、遊戲分數或其它需要記錄的資訊）
  • 個性化設定（如使用者自定義設定、主題等）
  • 瀏覽器行為跟蹤（如跟蹤分析使用者行為等）

HTTP是無狀態的

簡單來說，每次請求都是一次全新的獨立的請求，伺服器不知道你的兩次請求是來自同一個瀏覽器。例如，你在購物網站上在一個頁面新增了一袋餅乾到購物車，再這個網站的另一個頁面新增了一瓶可樂，可是伺服器並不會知道你上次做了什麼，這兩次新增商品的請求之間沒有關聯，瀏覽器無法知道使用者最終選擇了哪些商品。而使用HTTP的頭部擴充套件，HTTP Cookies就可以解決這個問題。把Cookies新增到頭部中，建立一個會話讓每次請求都能共享相同的上下文資訊，達成相同的狀態。

HTTP本質是無狀態的，使用Cookies可以建立有狀態的會話。

客戶端儲存？

在最開始，Cookie的確是作為本地儲存資料的一種方法，但注意，這是由於當時瀏覽器的功能限制導致的，沒用其他的本地儲存的方法。現在，瀏覽器已經有了新的API用於本地儲存。並且Cookie的大小有限制，而且每次請求都會帶上Cookie，這些都決定了Cookie不適用於客戶端資料的儲存。

如何設定Cookie

既然Cookie是由伺服器向瀏覽器傳送的，那麼Cookie是怎樣被設定，又是通過什麼傳給瀏覽器的呢？這就涉及到HTTP的相關知識了。

服務端設定

服務端通過設定響應頭 Set-Cookie 欄位設定Cookie

基礎語法： Set-Cookie: <cookie名>=<cookie值>

設定了Set-Cookie的響應

HTTP/1.0 200 OK
Content-type: text/html
Set-Cookie: yummy_cookie=choco
Set-Cookie: tasty_cookie=strawberry

[頁面內容]
複製程式碼

客戶端設定

在瀏覽器端，你可以檢視和修改Cookie。

搞清楚Cookie
可以通過開發者工具檢視Cookie，也可以直接修改。

JS 讀寫Cookie

讀取Cookie: allCookies = document.cookie;

寫入Cookie: document.cookie = newCookie;

詳細的API用法: developer.mozilla.org/zh-CN/docs/…

但一般不允許客戶端對Cookie進行操作，這可以在伺服器端進行設定：

Set-Cookie: id=a3fWa;HttpOnly // 設定了HttpOnly , 這樣JS 無法讀寫Cookie

禁用Cookie

客戶端(瀏覽器)可以禁用Cookie , 這個首部可能會被完全移除，例如在瀏覽器的隱私設定裡面設定為禁用cookie。

Cookie的域

cookie 會被髮給哪些URL呢？ 這是服務端設定 Cookie 時進行設定的，通過Set-Cookie 的 Domain 和 Path 兩個標識可以設定。

  1. Domain 設定

如果設定了 Domain 是 baidu.com 那麼子域下也會有Cookie 即 a.baidu.com 也會有Cookie

  1. Path 設定

還可以設定 Path 指定哪些路徑可以接受Cookie，子路徑也會被匹配

例如設定了： Path=/JS 則 /JS/Ajax/ 路徑也會有Cookie

Cookie的同源策略

這裡和常規的同源策略不太一樣，Cookie只關注域名是否一致。 不管使用哪個協議（HTTP/HTTPS）或埠號，瀏覽器都允許給定的域以及其任何子域名(sub-domains) 訪問 cookie。

也就是說 A 網頁的網址是http://w1.example.com/a.html，B 網頁的網址是http://w2.example.com/b.html，那麼只要設定相同的document.domain，兩個網頁就可以共享 Cookie。

設定 cookie 時，你可以使用Domain，Path，Secure，和Http-Only標記來限定其訪問性。

相關文章