Cookie知識總結（-）

code_susu發表於2019-02-15
Cookie

學習了Cookie之後，對登入註冊功能的實現，又有了全新的認識。

首先，我們先了解一下Cookie的基礎知識，這些都是很重要的點（這裡主要參考阮一峰老師的部落格）。

Cookie的基本概念

1. Cookie是伺服器儲存在瀏覽器的一小段文字資訊，<!注意，這裡是伺服器儲存在瀏覽器中的>
2. 每個Cookie的大小一般不超過4KB
3. 瀏覽器每次向伺服器發起請求，就會自動附上這段資訊 
    <注意 自動兩個字，是自動，這個功能是瀏覽器自己完成的，
    所以我們寫Js的時候不用管怎麼拿到Cookie怎麼傳給伺服器，瀏覽器會幫我們完成的
複製程式碼

Cookie的常用場景

Cookie主要用來分辨兩個請求是否來自同一個瀏覽器，以及用來儲存一些狀態資訊，常用場合：

1. 對話（session）管理: 儲存登入，購物車等需要記錄的資訊。
2. 個性化： 儲存使用者的偏好，如網頁的背景色，字型大小等。
3. 追蹤： 記錄和分析使用者行為

複製程式碼

很多人用Cookie作客戶端的儲存，雖然可行，但是並不推薦這種做法。

因為Cookie的設計初衷並不是整個，且容量很小，只有4KB,
缺乏資料操作介面，
而且會影響效能
（每次請求都要傳送給伺服器端，很佔用流浪，
  假如你有一個3kb的Cookie,傳送了10次請求，那麼總計就會有30kb的資料在網路上傳輸）
複製程式碼

客戶端儲存推薦用 Web storage API 和 IndexedDB。

Cookie的基本資訊

1.名字
2. 值（真正的資料寫在這裡）
3. 到期時間
4. 所屬域名（預設是當前域名）
5. 生效的路徑 (預設是當前網址)
複製程式碼
舉例來說：
當我們訪問 www.example.com 時，伺服器就會在瀏覽器寫入一個 Cookie了
那個這個Cookie包含了什麼呢？
1. cookie的名字和值
2. www.example.com這個域名
3. 根路徑 `/`,根路徑為`/`意味著這個 Cookie對該域名的根路徑和它的所有子路徑都有效
...(可能還有到期時間等其他資訊)

注意：如果路徑設為/forums，
那麼這個 Cookie 只有在訪問www.example.com/forums及其子路徑時才有效
複製程式碼
檢視瀏覽器是否開啟 Cookie 功能
window.navigator.cookieEnabled // true

獲取當前網頁的Cookie
document.cookie
複製程式碼

Cookie大小和數量的限制

每個瀏覽器對Cookie的大小和數量的限制不一樣，
但是一般來說，單個域名（注意這裡是單個域名）設定的Cookie不應超過30個，
且每個Cookie的大小不應超過4kb，超過以後，Cookie將會被忽略，不會被設定
複製程式碼

共享Cookie

瀏覽器的同源政策規定，兩個網址，只要域名相同，埠相同，就可以共享Cookie
注意，這裡不需要協議相同
也就是說，http://example.com設定的 Cookie，可以被https://example.com讀取
複製程式碼

Cookie與HTTP協議

1.Cookie的生成

伺服器是如何將Cookie寫入到瀏覽器的呢？
伺服器只要在回應的頭資訊中，放置一個 Set-cookie欄位就可以了。
Set-cookie: foo = bar;
也可以設定多個Set-cookie，下面是一個回應例子：
HTTP/1.0 200 OK
Content-type: text/html
Set-Cookie: yummy_cookie=choco
Set-Cookie: tasty_cookie=strawberry;Expires=<date>;Domain=<domain-value>;Path=<path-value>;Secure;HttpOnly

[page content]

如果想要更改之前設定的一個Cookie，那麼就必須同時滿足四個條件
（注意這裡是四個條件）：Cookie 的key、domain、path和secure都匹配。
只要有一個屬性不同，就會重新生成一個新的Cookie
複製程式碼
Cookie例子：
Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly
複製程式碼

2.Cookie的傳送

瀏覽器向伺服器傳送 HTTP 請求時，每個請求都會帶上相應的 Cookie。
也就是說，把伺服器早前儲存在瀏覽器的這段資訊，再發回伺服器。
這時要使用 HTTP 頭資訊的Cookie欄位。

一個請求的例子：
GET /sample_page.html HTTP/1.1
Host: www.example.org
Cookie: yummy_cookie=choco; tasty_cookie=strawberry
複製程式碼

Cookie的屬性

  1. Expires :具體到期時間，UTC格式，預設為null，若不設定，則瀏覽器關閉該Cookie就會被刪除
Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT;
複製程式碼
  1. Max-Age屬性指定從現在開始 Cookie 存在的秒數，比如60 * 60 * 24 * 365（即一年）。過了這個時間以後，瀏覽器就不再保留這個 Cookie。
  2. 如果同時指定了Expires和Max-Age，那麼Max-Age的值將優先生效。
  3. Domain
Domain設定域名，就是瀏覽器發出Http請求時，那些域名要帶上這個Cookie
若沒有設定，則預設為當前URL的一級域名
如：
www.example.com會設為example.com，而且以後如果訪問example.com的任何子域名
HTTP 請求也會帶上這個 Cookie
如果Set-Cookie欄位指定的域名，不屬於當前的域名，那麼瀏覽器就會拒絕這個Cookie
複製程式碼
  1. Path
Path指定瀏覽器發出http請求之後，哪些路徑要帶上這個Cookie
比如，PATH屬性是/，那麼請求/docs路徑也會包含該 Cookie。當然，前提是域名必須一致。
複製程式碼
  1. Secure
Secure屬性指定瀏覽器只有在加密協議 HTTPS 下，才能將這個 Cookie 傳送到伺服器。
另一方面，如果當前協議是 HTTP，瀏覽器會自動忽略伺服器發來的Secure屬性。
該屬性只是一個開關，不需要指定值。如果通訊是 HTTPS 協議，該開關自動開啟。
複製程式碼
  1. HttpOnly
HttpOnly屬性指定該 Cookie 無法通過 JavaScript 指令碼拿到，
主要是Document.cookie屬性、XMLHttpRequest物件和 Request API 都拿不到該屬性。
這樣就防止了該 Cookie 被指令碼讀到，只有瀏覽器發出 HTTP 請求時，
才會帶上該 Cookie。
複製程式碼

相關文章