摘要：背景是一種無狀態的協議，它不對請求和響應之間的通信狀態進行保存，即無法根據之前的狀態進行本次請求的處理。為了保留無狀態協議這個特征的同時又要解決類似的矛盾問題，于是引入了。主要目的是為防止跨站腳本攻擊對的信息竊取。

一個Vue單頁應用，A、B、C 三個頁面都引用了一個公用的時間選擇器。用戶在各自頁面選擇完時間后，A，B，C頁面互相切換時保存選擇的時間，在關閉瀏覽器tab后，清除選擇的時間，恢復初識值。一開始的想法是使用會話 cookie（不手動設置過期時間），但是會話 cookie 在關閉瀏覽器 tab 的時候不會被清除。所以決定研究下會話 cookie 何時清除。

背景

HTTP 是一種無狀態的協議，它不對請求和響應之間的通信狀態進行保存，即無法根據之前的狀態進行本次請求的處理。假如要求登錄驗證的 web 頁面本身無法進行狀態的管理，那么每次跳轉新頁面就要再次登錄，或者要在請求報文中附加參數來管理登錄狀態。無狀態協議有它的優點，由于不必保存狀態，可以減少服務器的 CPU 及內存資源。為了保留無狀態協議這個特征的同時又要解決類似的矛盾問題，于是引入了 cookie。

原理

cookie 技術通過在請求和響應報文中寫入 cookie 信息來控制客戶端的狀態。cookie 會根據從服務器端發送的響應報文內的一個叫做 Set-Cookie 的首部字段信息，通知客戶端保存。當下次客戶端再往該服務器發送請求時，客戶端會自動在請求報文中加入 cookie 值后發送出去。
服務端發現客戶端發送過來的 cookie 后，會去檢查究竟是從哪一個客戶端發來的連接請求，然后對比服務器上的記錄，最后得到之前的狀態信息。

客戶端設置

// 屬性之間由一個分號和一個空格隔開
document.cookie = "name=value; expires=date; path=path"

// 設置多個cookie
document.cookie = "name=irene; domain=www.baidu.com";
document.cookie = "age=18; path=/welcome";

document.cookie 一次只能設置一條 cookie，如果需要設置多條，需要多次設置。客戶端可以設置的屬性有：expires、max-age、domain、path、secure（https協議下才能設置成功），不能設置 HttpOnly。

  Set-Cookie: name=value[; expires=date][; domain=domain][; path=path][; secure]

  // 設置多個cookie
  Set-Cookie: name=irene; domain=www.baidu.com;
  Set-Cookie: age=18; path=/welcome;

一個 Set-Cookie 只能設置一條 cookie，如果需要設置多條，需要多次使用 Set-Cookie。cookie 除了設置名稱和值之外，還可以設置其他的屬性。服務端可以設置的屬性有：expires、max-age、domain、path、secure、HttpOnly 等。

expires 和 max-age

設置 cookie 的失效時間。expires 的值是一個時間點（cookie 失效時刻 = expires），max-age?的值是秒數（cookie 失效時刻 = 創建時刻 + max-age）。expires?是 http/1.0 協議中的選項，在新的 http/1.1 協議中 expires 已經由?max-age?選項代替。如果兩者同時存在，max-age 的優先級高于 expires。max-age 有兩種可能值：小于等于0：有效期為能表示的最早時間；大于0：有效期為當前時間 + max-age。

// expires
document.cookie="name=irene; expires=Wed, 13 Jun 2019 10:28:27 GMT"
// max-age > 0
document.cookie="name=irene; max-age=3600"
// max-age <= 0
document.cookie="name=irene; max-age=0"

注意：一旦 cookie 從服務器端發送至客戶端，服務器端就不存在可以顯式刪除 cookie 的方法。但可通過覆蓋 cookie，實現對客戶端 cookie 的刪除操作。

domain & path

Domain 設置域名，默認是當前域名。path 設置路徑，默認是當前目錄。domain 和 path 一起限制了哪些請求可以帶上該 cookie。比如上面第二個的 cookie，若請求的 URL 的域名是 juejin.com 或 xxx.juejin.com，并且 URL 的路徑是 / 或 子路徑 "/home"，則瀏覽器會將此 cookie 添加到該請求的 cookie 頭部中。

// 在 https://juejin.im/welcome/frontend 設置如下 cookie，則瀏覽器 Cookie 面板顯示的 domain=juejin.im，path=/welcome
document.cookie = "name=irene"
// 在 https://juejin.im/welcome/frontend 設置如下 cookie，則瀏覽器 Cookie 面板顯示的 domain=.juejin.im(有前綴.)，
document.cookie = "name=irene; domain=juejin.im; path=/welcome/frontend"
// 關于 domain 有無前綴點可參考 http://www.it1352.com/548425.html

HttpOnly

當設置了 HttpOnly，瀏覽器就不會將該 cookie 添加到非 HTTP 請求的頭部。
設置 cookie 是否能通過 js 去訪問（讀取、修改、刪除等）。默認情況下，cookie 不會帶 HttpOnly 選項，所以客戶端是可以通過 js 代碼去訪問這個 cookie 的。當 cookie 帶 HttpOnly 選項時，客戶端則無法通過 js 代碼去訪問這個cookie。主要目的是為防止跨站腳本攻擊對 cookie 的信息竊取。HttpOnly 只能從服務端設置，不能通過客戶端設置。

Secure

設置僅在 HTTPS 安全連接時，才可以發送 cookie。

domain-matching

一個字符串（str）匹配（domain-matches）一個給定的域名字符串（domain str）至少需要滿足以下條件中的一個：

str 和 domain str 完全相同（轉成小寫后比較）。

或者同時滿足以下條件：
2.1 domain str 是 str 的后綴。
2.2 str 中最后一個不包含在 domain str 中的字符是點（.)。

domain str = google.com;  str = map.googole.com  =>  符合
domain str = google.com;  str = map.mgoogle.com  =>  最后一個不包含在 domain str 中的字符是 m，不符合 

2.3 str 必須是一個域名，而不是 IP 地址。

path-matching

一個請求路徑（request-path）匹配（path-matches）一個給定的 cookie-path 至少需要滿足以下條件中的一個：

request-path 和 cookie-path 完全一樣。

cookie-path 是 request-path 的前綴，并且 cookie-path 的最后一個字符是 / 。

cookie-path 是 request-path 的前綴，并且 request-path 中第一個不包含在 cookie-path 中的字符是 / 。

注意：domain-matching & path-matching 只是瀏覽器決定是否攜帶 cookie 諸多參考項中的其中兩個，瀏覽器還會參考諸如是否過期等項。

問題:

cookie 不設置失效時間的話，默認是會話結束失效，這個會話結束是指瀏覽器的所有窗口都關閉，還是說這個網站的頁面全部關閉就可以了?

具體場景：

Chrome瀏覽器開了兩個窗口A B，A打開了網站1的兩個標簽頁（tab1 & tab2）和網站2的兩個標簽頁（tab3 & tab4），B打開了網站1的兩個標簽頁（tab1 & tab2）和網站2的兩個標簽頁（tab3 & tab4），如果想網站1的cookie失效的話，是不是把窗口A B關于網站1的tab頁關掉就行 還是 需要把瀏覽器的所有窗口都關閉？

實驗對象：

https://segmentfault.com。它的 PHPSESSION 是會話結束失效，所以用來測試。

工具：

通過chrome://settings/cookies/detail?site=segmentfault.com查看該網站下的所有cookie。

結論：

瀏覽器的所有窗口都關閉，網站1的cookie（會話cookie）才失效。windows 在瀏覽器窗口都關閉的情況下，會退出程序，所以 cookie 會失效；mac 在瀏覽器窗口都關閉的情況下，不會退出程序，所以 cookie 不會失效，需要退出程序 cookie 才失效。

如果一個 cookie 同時設置了 Max-Age 和 Expires 屬性，Max-Age 的優先級更高。如果兩個都沒有設置，UA 會保存該 cookie 直到當前 會話結束。