關(guān)于Cookie的知識的總結(jié)

Cookie的類型

會話cookie和持久cookie

會話cookie是一種臨時cookie，它記錄了用戶訪問站點(diǎn)時的設(shè)置和偏好，當(dāng)用戶退出瀏覽器時，會話cookie就會被刪除。

持久cookie的生存時間更長一些，它存儲在用戶的硬盤上，瀏覽器退出或計算機(jī)重啟時他們?nèi)匀淮嬖凇?/p>

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

如果設(shè)置了Discard參數(shù)（cookie版本1中的參數(shù)），或者沒有設(shè)置Expires或者M(jìn)ax-Age參數(shù)（cookie版本1中的參數(shù)）來說明擴(kuò)展的過期時間，這個cookie就是一個會話cookie。

Cookie是如何工作的

Cookie可以通過服務(wù)器進(jìn)行設(shè)置，相當(dāng)于服務(wù)器給用戶貼的一個標(biāo)簽，用于跟蹤用戶的狀態(tài)。

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

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

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

Cookie的限制和組成

Cookie的限制

Cookie的限制主要有兩條：

1. 訪問cookie時的同源限制

2. Cookie的個數(shù)和尺寸限制

同源限制

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

個數(shù)和尺寸限制

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

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

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

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

Cookie的組成

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

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

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

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

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

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

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

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

關(guān)于如何在服務(wù)端設(shè)置該字段，請看這篇文章：關(guān)于Cookie安全性設(shè)置的那些事

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

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

BOM的document.cookie接口

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

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

console.log(document.cookie);

控制臺中會輸出以下結(jié)果：

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

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

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

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

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

例子（使用wamp環(huán)境）：

PHP代碼：

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

HTML代碼：

<button id="btn" type="button" value="submit">發(fā)送請求</button><button id="display-cookie" type="button" value="submit">顯示cookie</button><button id="reset-cookie" type="button" value="submit">設(shè)置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表示同步
    //此處設(shè)置頭部信息
    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();

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

點(diǎn)擊發(fā)送請求按鈕，在Network選項卡中查看頭部信息：

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

 現(xiàn)在點(diǎn)擊顯示cookie按鈕：

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

接下來點(diǎn)擊設(shè)置cookie按鈕，重設(shè)該cookie，然后再點(diǎn)擊顯示cookie按鈕：

該cookie的值被重設(shè)為了ok。

我們再點(diǎn)擊發(fā)送請求按鈕，看看這一次請求的頭部信息：

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

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

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

舉例，用document.cookie設(shè)置cookie：

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

子cookie

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

一種子cookie的格式：

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

本質(zhì)上還是字符串的操作。

CORS中的cookie

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

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

但是，如果省略withCredentials設(shè)置，有的瀏覽器還是會一起發(fā)送Cookie。這時，可以顯式關(guān)閉withCredentials。

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