那么通過閱讀本文，你可以了解：

1.cookie是什么，cookie的屬性有哪些，如何設(shè)置cookie，cookie的缺點(diǎn)，和session的區(qū)別
2.不再混淆cookie和webStorage，簡單介紹瀏覽器的本地存儲(chǔ)的兩種方式：sessionStorage和localStorage

cookie是當(dāng)你瀏覽某個(gè)網(wǎng)站的時(shí)候，由web服務(wù)器存儲(chǔ)在你的機(jī)器硬盤上的一個(gè)小的文本文件。它其中記錄了你的用戶名、密碼、瀏覽的網(wǎng)頁、停留的時(shí)間等等信息。當(dāng)你再次來到這個(gè)網(wǎng)站時(shí)，web服務(wù)器會(huì)先看看有沒有它上次留下來的cookie。如果有的話，會(huì)讀取cookie中的內(nèi)容，來判斷使用者，并送出相應(yīng)的網(wǎng)頁內(nèi)容，比如在頁面顯示歡迎你的標(biāo)語，或者讓你不用輸入ID、密碼就直接登錄等等。

當(dāng)客戶端要發(fā)送http請(qǐng)求時(shí)，瀏覽器會(huì)先檢查下是否有對(duì)應(yīng)的cookie。有的話，則自動(dòng)地添加在request header中的cookie字段。注意，每一次的http請(qǐng)求時(shí)，如果有cookie，瀏覽器都會(huì)自動(dòng)帶上cookie發(fā)送給服務(wù)端。那么把什么數(shù)據(jù)放到cookie中就很重要了，因?yàn)楹芏鄶?shù)據(jù)并不是每次請(qǐng)求都需要發(fā)給服務(wù)端，畢竟會(huì)增加網(wǎng)絡(luò)開銷，浪費(fèi)帶寬。所以對(duì)于那設(shè)置“每次請(qǐng)求都要攜帶的信息（最典型的就是身份認(rèn)證信息）”就特別適合放在cookie中，其他類型的數(shù)據(jù)就不適合了。

簡單的說就是：

(1) cookie是以小的文本文件形式（即純文本），完全存在于客戶端；cookie保存了登錄的憑證，有了它，只需要在下次請(qǐng)求時(shí)帶著cookie發(fā)送，就不必再重新輸入用戶名、密碼等重新登錄了。

(2) 是設(shè)計(jì)用來在服務(wù)端和客戶端進(jìn)行信息傳遞的；

這里我簡單地畫了個(gè)圖，可以方便理解：

第一次請(qǐng)求時(shí)：

第一次請(qǐng)求

下一次請(qǐng)求時(shí)：

下一次請(qǐng)求

瀏覽器會(huì)把cookie放到請(qǐng)求頭一起提交給服務(wù)器，cookie攜帶了會(huì)話ID信息。服務(wù)器會(huì)根據(jù)cookie辨認(rèn)用戶：由于cookie帶了會(huì)話的ID信息，可以通過cookie找到對(duì)應(yīng)會(huì)話，通過判斷會(huì)話來判斷用戶狀態(tài)。

在瀏覽器的控制臺(tái)中，可以直接輸入：document.cookie來查看cookie。cookie是一個(gè)由鍵值對(duì)構(gòu)成的字符串，每個(gè)鍵值對(duì)之間是“; ”即一個(gè)分號(hào)和一個(gè)空格隔開。

document.cookie

注意，這個(gè)方法只能獲取非 HttpOnly 類型的cookie

每個(gè)cookie都有一定的屬性，如什么時(shí)候失效，要發(fā)送到哪個(gè)域名，哪個(gè)路徑等等。這些屬性是通過cookie選項(xiàng)來設(shè)置的，cookie選項(xiàng)包括：expires、domain、path、secure、HttpOnly。在設(shè)置任一個(gè)cookie時(shí)都可以設(shè)置相關(guān)的這些屬性，當(dāng)然也可以不設(shè)置，這時(shí)會(huì)使用這些屬性的默認(rèn)值。在設(shè)置這些屬性時(shí)，屬性之間由一個(gè)分號(hào)和一個(gè)空格隔開。代碼示例如下：

"key=name; expires=Sat, 08 Sep 2018 02:26:00 GMT; domain=ppsc.sankuai.com; path=/; secure; HttpOnly"

cookie的屬性可以在控制臺(tái)查看：Application選項(xiàng)，左邊選擇Storage，最后一個(gè)就是cookie，點(diǎn)開即可查看。

Expires、Max Age:

Expires選項(xiàng)用來設(shè)置“cookie 什么時(shí)間內(nèi)有效”。Expires其實(shí)是cookie失效日期，Expires必須是 GMT 格式的時(shí)間（可以通過 new Date().toGMTString()或者 new Date().toUTCString() 來獲得）。

new Date().toGMTString()或者 new Date().toUTCString()

如expires=Sat, 08 Sep 2018 02:26:00 GMT表示cookie將在2018年9月8日2:26分之后失效。對(duì)于失效的cookie瀏覽器會(huì)清空。如果沒有設(shè)置該選項(xiàng)，這樣的cookie稱為會(huì)話cookie。它存在內(nèi)存中，當(dāng)會(huì)話結(jié)束，也就是瀏覽器關(guān)閉時(shí)，cookie消失。

補(bǔ)充：

Expires是 http/1.0協(xié)議中的選項(xiàng)，在http/1.1協(xié)議中Expires已經(jīng)由 Max age 選項(xiàng)代替，兩者的作用都是限制cookie 的有效時(shí)間。Expires的值是一個(gè)時(shí)間點(diǎn)（cookie失效時(shí)刻= Expires），而Max age的值是一個(gè)以秒為單位時(shí)間段（cookie失效時(shí)刻= 創(chuàng)建時(shí)刻+ Max age）。 另外， Max age的默認(rèn)值是 -1(即有效期為 session )； Max age有三種可能值：負(fù)數(shù)、0、正數(shù)。負(fù)數(shù)：有效期session；0：刪除cookie；正數(shù)：有效期為創(chuàng)建時(shí)刻+ Max age

Domain和Path

Domain是域名，Path是路徑，兩者加起來就構(gòu)成了 URL，Domain和Path一起來限制 cookie 能被哪些 URL 訪問。即請(qǐng)求的URL是Domain或其子域、且URL的路徑是Path或子路徑，則都可以訪問該cookie，例如：

某cookie的 Domain為“baidu.com”, Path為“/ ”，若請(qǐng)求的URL(URL 可以是js/html/img/css資源請(qǐng)求，但不包括 XHR 請(qǐng)求)的域名是“baidu.com”或其子域如“api.baidu.com”、“dev.api.baidu.com”，且 URL 的路徑是“/ ”或子路徑“/home”、“/home/login”，則都可以訪問該cookie。

補(bǔ)充：

發(fā)生跨域xhr請(qǐng)求時(shí)，即使請(qǐng)求URL的域名和路徑都滿足 cookie 的 Domain和Path，默認(rèn)情況下cookie也不會(huì)自動(dòng)被添加到請(qǐng)求頭部中。

Size

Cookie的大小

Secure

Secure選項(xiàng)用來設(shè)置cookie只在確保安全的請(qǐng)求中才會(huì)發(fā)送。當(dāng)請(qǐng)求是HTTPS或者其他安全協(xié)議時(shí)，包含 Secure選項(xiàng)的 cookie 才能被發(fā)送至服務(wù)器。

默認(rèn)情況下，cookie不會(huì)帶Secure選項(xiàng)(即為空)。所以默認(rèn)情況下，不管是HTTPS協(xié)議還是HTTP協(xié)議的請(qǐng)求，cookie 都會(huì)被發(fā)送至服務(wù)端。但要注意一點(diǎn)，Secure選項(xiàng)只是限定了在安全情況下才可以傳輸給服務(wù)端，但并不代表你不能看到這個(gè) cookie。

補(bǔ)充：

如果想在客戶端即網(wǎng)頁中通過 js 去設(shè)置Secure類型的 cookie，必須保證網(wǎng)頁是https協(xié)議的。在http協(xié)議的網(wǎng)頁中是無法設(shè)置secure類型cookie的。

httpOnly

這個(gè)選項(xiàng)用來設(shè)置cookie是否能通過 js 去訪問。默認(rèn)情況下，cookie不會(huì)帶httpOnly選項(xiàng)(即為空)，所以默認(rèn)情況下，客戶端是可以通過js代碼去訪問（包括讀取、修改、刪除等）這個(gè)cookie的。當(dāng)cookie帶httpOnly選項(xiàng)時(shí)，客戶端則無法通過js代碼去訪問（包括讀取、修改、刪除等）這個(gè)cookie。

在客戶端是不能通過js代碼去設(shè)置一個(gè)httpOnly類型的cookie的，這種類型的cookie只能通過服務(wù)端來設(shè)置。

可以在瀏覽器的控制臺(tái)中看出哪些cookie是httpOnly類型的，HTTP下帶綠色對(duì)勾的即是，如圖：

httponly

只要是httponly類型的,在控制臺(tái)通過document.cookie是獲取不到的，也不能進(jìn)行修改。

之所以限制客戶端去訪問cookie，主要還是出于安全的目的。因?yàn)槿绻魏?cookie 都能被客戶端通過document.cookie獲取，那么假如合法用戶的網(wǎng)頁受到了XSS攻擊，有一段惡意的script腳本插到了網(wǎng)頁中，這個(gè)script腳本，通過document.cookie讀取了用戶身份驗(yàn)證相關(guān)的 cookie，那么只要原樣轉(zhuǎn)發(fā)cookie，就可以達(dá)到目的了。

cookie既可以由服務(wù)端來設(shè)置，也可以由客戶端來設(shè)置。

前面1.1中介紹過，客戶端第一次向服務(wù)端請(qǐng)求時(shí)，在相應(yīng)的請(qǐng)求頭中就有set-cookie字段，用來標(biāo)識(shí)是哪個(gè)用戶。

下圖我是登錄騰訊云的某個(gè)頁面的響應(yīng)頭截圖，可以看到響應(yīng)頭中有兩個(gè)set-cookie字段，每段對(duì)應(yīng)一個(gè)cookie，注意每個(gè)cookie放一個(gè)set-cookie字段中，不能將多個(gè)cookie放在一個(gè)set-cookie字段中。具體每個(gè)cookie設(shè)置了相關(guān)的屬性：expires、path、httponly，具體屬性含義可以結(jié)合1.2 cookie的屬性來看：

response headers

服務(wù)端設(shè)置cookie的范圍：

服務(wù)端可以設(shè)置cookie 的所有選項(xiàng)：expires、domain、path、secure、HttpOnly

cookie不像web Storage有setItem，getItem，removeItem，clear等方法，需要自己封裝。簡單地在瀏覽器的控制臺(tái)里輸入：

document.cookie="name=lynnshen; age=18"

但發(fā)現(xiàn)只添加了第一個(gè)cookie:"name=lynnshen"，后面的cookie并沒有添加進(jìn)來:

最簡單的設(shè)置多個(gè)cookie的方法就是重復(fù)執(zhí)行document.cookie = "key=name"：

document.cookie = "name=lynnshen";
document.cookie = "age=18";

再看控制臺(tái)：

注意：

當(dāng)name、domain、path 這3個(gè)字段都相同的時(shí)候，cookie會(huì)被覆蓋。

下面是我自己簡單封裝的設(shè)置、讀取、刪除cookie的方法：

設(shè)置cookie:

function setCookie(name,value,iDay){
    var oDate = new Date();
    oDate.setDate(oDate.getDate() + iDay);
    document.cookie = name + "=" + value + ";expires=" + oDate;
}

讀取cookie，該方法簡單地認(rèn)為cookie中只有一個(gè)“=”，即key=value，如有更多需求可以在此基礎(chǔ)上完善:

function getCookie(name){
    //例如cookie是"username=abc; password=123"
    var arr = document.cookie.split("; ");//用“;”和空格來劃分cookie
    for(var i = 0 ;i < arr.length ; i++){
        var arr2 = arr[i].split("=");
        if(arr2[0] == name){
            return arr2[1];
        }
    }
    return "";//整個(gè)遍歷完沒找到，就返回空值
}

刪除cookie:

function removeCookie(name){
    setCookie(name, "1", -1)//第二個(gè)value值隨便設(shè)個(gè)值，第三個(gè)值設(shè)為-1表示：昨天就過期了，趕緊刪除
}

cookie的缺點(diǎn)：

(1) 每個(gè)特定域名下的cookie數(shù)量有限：

IE6或IE6-(IE6以下版本)：最多20個(gè)cookie

IE7或IE7+(IE7以上版本)：最多50個(gè)cookie

FF:最多50個(gè)cookie

Opera:最多30個(gè)cookie

Chrome和safari沒有硬性限制

當(dāng)超過單個(gè)域名限制之后，再設(shè)置cookie，瀏覽器就會(huì)清除以前設(shè)置的cookie。IE和Opera會(huì)清理近期最少使用的cookie，F(xiàn)F會(huì)隨機(jī)清理cookie；

(2) 存儲(chǔ)量太小，只有4KB；

(3) 每次HTTP請(qǐng)求都會(huì)發(fā)送到服務(wù)端，影響獲取資源的效率；

(4) 需要自己封裝獲取、設(shè)置、刪除cookie的方法；

cookie是存在客戶端瀏覽器上，session會(huì)話存在服務(wù)器上。會(huì)話對(duì)象用來存儲(chǔ)特定用戶會(huì)話所需的屬性及配置信息。當(dāng)用戶請(qǐng)求來自應(yīng)用程序的web頁時(shí)，如果該用戶還沒有會(huì)話，則服務(wù)器將自動(dòng)創(chuàng)建一個(gè)會(huì)話對(duì)象。當(dāng)會(huì)話過期或被放棄后，服務(wù)器將終止該會(huì)話。cookie和會(huì)話需要配合，具體內(nèi)容參見1.1節(jié)。

當(dāng)cookie失效、session過期時(shí)，就需要重新登錄了。

在較高版本的瀏覽器中，js提供了兩種存儲(chǔ)方式：sessionStorage和globalStorage。在H5中，用localStorage取代了globalStorage。

sessionStorage用于本地存儲(chǔ)一個(gè)會(huì)話中的數(shù)據(jù)，這些數(shù)據(jù)只有在同一個(gè)會(huì)話中的頁面才能訪問，并且當(dāng)會(huì)話結(jié)束后，數(shù)據(jù)也隨之銷毀。所以sessionStorage僅僅是會(huì)話級(jí)別的存儲(chǔ)，而不是一種持久化的本地存儲(chǔ)。

localStorage是持久化的本地存儲(chǔ)，除非是通過js刪除，或者清除瀏覽器緩存，否則數(shù)據(jù)是永遠(yuǎn)不會(huì)過期的。

瀏覽器的支持情況：IE7及以下版本不支持web storage，其他都支持。不過在IE5、IE6、IE7中有個(gè)userData，其實(shí)也是用于本地存儲(chǔ)。這個(gè)持久化數(shù)據(jù)放在緩存中，只有不清理緩存，就會(huì)一直存在。

(1) web storages和cookie的作用不同，web storage是用于本地大容量存儲(chǔ)數(shù)據(jù)(web storage的存儲(chǔ)量大到5MB);而cookie是用于客戶端和服務(wù)端間的信息傳遞；

(2) web storage有setItem、getItem、removeItem、clear等方法，cookie需要我們自己來封裝setCookie、getCookie、removeCookie，具體可見1.3節(jié)；

本文縱向上深度介紹了cookie相關(guān)的知識(shí)，包括cookie的作用、各個(gè)屬性的用途、cookie的設(shè)置、缺點(diǎn)等等。橫向上，將cookie和會(huì)話、localStorage做了比較。如有問題，歡迎指正。

此文已由作者授權(quán)騰訊云+社區(qū)發(fā)布

搜索關(guān)注公眾號(hào)「云加社區(qū)」，第一時(shí)間獲取技術(shù)干貨，關(guān)注后回復(fù)1024 送你一份技術(shù)課程大禮包！

• 上一篇：FIBOS讓區(qū)塊鏈支付應(yīng)用一秒到賬
• 下一篇：React 按需加載 - 代碼分隔

notebin

男|高級(jí)講師

我要關(guān)注 我要私信

TA的文章

閱讀更多

• RackNerd 美國勞工節(jié)促銷：美國服務(wù)器，高配置，大硬盤（最高達(dá)10x1.6TB SSD），猶他

  閱讀 3692·2021-09-07 10:19

• OneTechCloud：易科雲(yún)月付9折季付8折，香港cn2 VPS(不限流量)，美國三網(wǎng)cn2 g

  閱讀 3637·2021-09-03 10:42

• 還在問用什么來做接口測試？萬能Jmeter打造性能測試數(shù)據(jù)平臺(tái)。jmeter 【 yyds】

  閱讀 3591·2021-09-03 10:28

• 扯點(diǎn)：FC - Formatting Context

  閱讀 2559·2019-08-29 14:11

• CSS3筆記

  閱讀 816·2019-08-29 13:54

• 學(xué)習(xí)canvas 過程中的幾點(diǎn)總結(jié)

  閱讀 1603·2019-08-29 12:14

• electron跳坑指南 1(electron的安裝)

  閱讀 423·2019-08-26 12:12

• 如何利用JavaScript的Map提升性能

  閱讀 3621·2019-08-26 10:45

最新活動(dòng)