關于Cookie的知識的總結

Cookie的類型

會話cookie和持久cookie

會話cookie是一種臨時cookie，它記錄了用戶訪問站點時的設置和偏好，當用戶退出瀏覽器時，會話cookie就會被刪除。

持久cookie的生存時間更長一些，它存儲在用戶的硬盤上，瀏覽器退出或計算機重啟時他們仍然存在。

會話cookie與持久cookie之間的唯一區別就是它們的過期時間。

如果設置了Discard參數（cookie版本1中的參數），或者沒有設置Expires或者Max-Age參數（cookie版本1中的參數）來說明擴展的過期時間，這個cookie就是一個會話cookie。

Cookie是如何工作的

Cookie可以通過服務器進行設置，相當于服務器給用戶貼的一個標簽，用于跟蹤用戶的狀態。

通過服務器設置的cookie信息通過響應頭返回給瀏覽器，瀏覽器將響應頭中的cookie信息保存在本地，當下次向服務器發送HTTP請求時，就自動將保存的這些cookie信息添加到請求頭中（包含通過document.cookie接口設置的cookie）。

下面是退出博客園登錄時的響應頭和請求頭，響應頭中有Set-Cookie字段，請求頭中有Cookie字段：

通過BOM提供的document.cookie接口，在前端可以對cookie進行操作（增、刪、改），本質上是對符合一定規律的一個字符串進行操作，這樣開發人員就可以利用cookie在本地存儲一些數據。當然，建議存儲一些非敏感信息。

Cookie的限制和組成

Cookie的限制

Cookie的限制主要有兩條：

1. 訪問cookie時的同源限制

2. Cookie的個數和尺寸限制

同源限制

Cookie在性質上是綁定在特定的域名下的。當創建了一個cookie后，再給創建它的域名發送請求時，請求頭中都會包含這個cookie。這個限制確保了儲存在cookie中的信息只能讓批準的域訪問，而無法被其他域訪問。

個數和尺寸限制

每個域名下可綁定的cookie的個數是有限的，不同瀏覽器所限制的個數不同。

瀏覽器對同域名下cookie個數的限制見下表：

當超過單個域名限制之后還要再設置cookie，瀏覽器就會清除以前設置的cookie。

瀏覽器中對于單個cookie的尺寸也有限制，一般限制在4MB。尺寸限制影響到一個域名下的所有cookie，而并非每個cookie單獨限制。

Cookie的組成

名稱和值 name = value：必填。name和value都是字符序列，除非包含在雙引號內，否則不包括分號、逗號、等號和空格。Web服務器可以創建任意的name=value關聯，瀏覽器在后繼對站點的訪問中會將其送會給web服務器。

域  domain：可選。表示該cookie對于哪個域是有效的。所有向該域發送的請求中都會包含這個cookie信息。這個值可以包含子域（如www.wrox.com，表示該cookie信息只向該域名發送），也可以不包含（如.wrox.com，則對于wrox.com的所有子域都有效）。如果沒有明確規定，那么這個域會被認作來自設置該cookie的那個服務器所在的域。

路徑  path：可選。通過這個字段可以為服務器上特定的文檔分配cookie。如果path字段是一個URL路徑前綴，就可以附加一個cookie。例如：路徑 /foo與 /foobar和 /foo/bar.html相匹配。路徑 / 與域名中的所有內容都匹配。默認值是設置 Cookie 時的當前目錄。

失效時間  expires（新版的cookie規范中是max-age字段）：可選。這個字段會指定一個日期字符串，用來定義cookie的實際生存期。一旦到了這個日期，就不再存儲或發布這個cookie了，該cookie就會被刪除。如果設置的日期是以前的時間，則cookie會被立刻刪除。

日期格式為GMT格式：Wdy, DD-Mon-YYYY HH:MM:SS GMT。

安全標志  secure：可選。該字段不是鍵值對的形式，如果要指定該字段，只要在設置cookie時添加secure字符即可。設置了該字段后，該cookie只有在使用SSL連接的時候才發送到服務器。例如：指定域為www.wrox.com的cookie，在制定了secure字段后，該cookie只能發送給https://www.wrox.com，而發送給http://www.wrox.com的請求不會添加該cookie。

HTTP專用  HttpOnly：可選。該字段只能在服務端設置，表示該cookie是否能通過JS（BOM的document.cookie接口）去訪問。默認情況下HttpOnly字段為空，表示可以通過JS訪問該cookie。

按照規范，開發人員無法利用JS在前端修改cookie的HttpOnly字段，不過有的瀏覽器沒有這個限制，具體看這篇文章：瀏覽器中因cookie設置HttpOnly標志引起的安全問題

關于如何在服務端設置該字段，請看這篇文章：關于Cookie安全性設置的那些事

注意：域、路徑、失效時間、安全標志（secure）和HttpOnly字段都是服務器給瀏覽器的指示，告訴瀏覽器如何存儲和發送cookie，這些參數并不會作為發送到服務器的cookie信息的一部分，只有cookie中的名值對兒（name=value）才會被發送。

在前面的圖片中，響應頭中的一個Set-Cookie就代表一個cookie；請求頭中的Cookie字段中可以包含多個cookie的名值對兒，而不是僅包含一個cookie的名值對兒。

BOM的document.cookie接口

當用來獲取cookie時，document.cookie返回當前頁面可用的所有cookie的字符串，一系列由分號隔開的名值對兒。

例如，我在Chrome中打開這個頁面：https://segmentfault.com/a/1190000004556040，在控制臺中輸入以下代碼：

console.log(document.cookie);

控制臺中會輸出以下結果：

PHPSESSID=web2~f57e474e4a8mc396h5du05qsa0;
Hm_lvt_e23800c454aa573c0ccb16b52665ac26=1495500966; 
Hm_lpvt_e23800c454aa573c0ccb16b52665ac26=1495500966;
_ga=GA1.2.1399344530.1495500966; 
_gid=GA1.2.584865054.1495500966; 
showRegister2=; 
showRegister=

有七個由分號分隔得名值對兒，表示有七個cookie可用（所有名字和值都是經過URL編碼的，所以必須使用decodeURIComponent()來解碼。）。

點擊開發者工具中的Application選項，在左邊找到Cookies下拉菜單，點擊第一個域名，就可以看到這七個cookie的詳細信息。具體如下：

當用于設置cookie時，document.cookie可以設置一個新的cookie字符串，這個cookie字符串會被解釋并添加到當前現有的cookie集合中。其中名值對兒（name=value）是必須的（最好用encodeURIComponent()對name和value進行編碼），其它字段在cookie的組成部分已做過介紹。

通過document.cookie設置的cookie并不會覆蓋現有的cookie，除非設置的cookie的name在現有cookie集合中已經存在，并且path/domain/secure這幾個選項一定要和舊cookie 保持一樣。否則不會修改舊cookie，而是添加了一個新的 cookie。

例子（使用wamp環境）：

PHP代碼：

<?php setcookie("abc", "test",null, '/' );   ?>

HTML代碼：

<button id="btn" type="button" value="submit">發送請求</button><button id="display-cookie" type="button" value="submit">顯示cookie</button><button id="reset-cookie" type="button" value="submit">設置cookie</button>

JS代碼：

function myAJAX(url) {    var xhr  = new XMLHttpRequest();
    xhr.onreadystatechange = function() {        if(xhr.readyState === 4) {            if((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
                console.log(xhr.responseText);
                console.log(xhr.responseXML);
            } else {
                console.log(xhr.statusText);
                console.log(xhr.status);
            }
        }
    };
    xhr.open("get",url,true);//true表示異步，false表示同步
    //此處設置頭部信息
    xhr.send(null);
}function init(){    var btn = document.getElementById('btn');    var displayCookie = document.getElementById('display-cookie');    var resetCookie = document.getElementById('reset-cookie');    var removeCookie = document.getElementById('remove-cookie');
    btn.addEventListener('click',function(event) {        var url = 'cookie.php';
        myAJAX(url);
    },false);
    
    displayCookie.addEventListener('click',function(event) {
        console.log(document.cookie);
    },false);

    resetCookie.addEventListener('click',function(event) {
        document.cookie = "abc=ok;path=/"
    },false);
}
init();

 第一次打開該頁面時，點擊顯示cookie按鈕，控制臺無輸出內容，谷歌開發者工具中Application選項卡中的cookie選項中也為空。

點擊發送請求按鈕，在Network選項卡中查看頭部信息：

在Application選項卡中的cookies選項查看cookie：

 現在點擊顯示cookie按鈕：

只顯示出了名值對兒，沒有顯示該cookie的其它字段的信息。

接下來點擊設置cookie按鈕，重設該cookie，然后再點擊顯示cookie按鈕：

該cookie的值被重設為了ok。

我們再點擊發送請求按鈕，看看這一次請求的頭部信息：

請求頭中的Cookie字段是瀏覽器發送給服務器的cookie信息，cookie的值之前被我們設置為了ok。響應頭中的Set-Cookie字段是服務器返回給瀏覽器的cookie信息（實際上這時，cookie的值又被設置為了test）（我只是描述這個現象，不知道理解的對不對。）。

沒有刪除已有cookie的直接方法。所以，需要使用相同的路徑（path）、域（domain）和安全選項（secure）再次設置原cookie，并將失效時間設置為過去時間。

通過document.cookie設置的cookie也會被瀏覽器添加到請求頭中。

舉例，用document.cookie設置cookie：

document.cookie = encodeURIComponent(“username”) + “=” +encodeURIComponent(“jack”) + “; domain=.wrox.com; path=/”;

子cookie

子cookie是存放在單個cookie中的更小段的數據。也就是使用cookie值來存儲多個名值對兒。

一種子cookie的格式：

name=name1=value1&name2=value2&name3=value3&name4=value4

本質上還是字符串的操作。

CORS中的cookie

（摘自阮一峰老師的文章：跨域資源共享 CORS 詳解）

CORS請求默認不發送Cookie和HTTP認證信息。如果要把Cookie發到服務器，一方面要服務器同意，指定Access-Control-Allow-Credentials字段為true。另一方面，開發者必須在AJAX請求中打開XMLHttpRequest對象的withCredentials屬性。否則，即使服務器同意發送Cookie，瀏覽器也不會發送。或者，服務器要求設置Cookie，瀏覽器也不會處理。

但是，如果省略withCredentials設置，有的瀏覽器還是會一起發送Cookie。這時，可以顯式關閉withCredentials。

需要注意的是，如果要發送Cookie，Access-Control-Allow-Origin就不能設為星號，必須指定明確的、與請求網頁一致的域名。同時，Cookie依然遵循同源政策，只有用服務器域名設置的Cookie才會上傳，其他域名的Cookie并不會上傳，且（跨源）原網頁代碼中的document.cookie也無法讀取服務器域名下的Cookie。