HTTP cookies，通常又稱(chēng)作"cookies"，已經(jīng)存在了很長(zhǎng)時(shí)間，但是仍舊沒(méi)有被予以充分的理解。首要的問(wèn)題是存在了諸多誤區(qū)，認(rèn)為cookies是后門(mén)程序或病毒，或壓根不知道它是如何工作的。第二個(gè)問(wèn)題是對(duì)于cookies缺少一個(gè)一致性的接口。盡管存在著這些問(wèn)題，cookies仍舊在web開(kāi)發(fā)中起著如此重要的作用，以至于如果cookie在沒(méi)有可替代品出現(xiàn)的情況下消失，我們?cè)S多喜歡的Web應(yīng)用將變得毫無(wú)用處。

一、cookie 起源

cookie 最早是網(wǎng)景公司的雇員 Lou Montulli 在1993年3月發(fā)明，后被 W3C 采納，目前 cookie 已經(jīng)成為標(biāo)準(zhǔn)，所有的主流瀏覽器如 IE、Chrome、Firefox、Opera 等都支持。

cookie 的誕生是由于 HTTP 協(xié)議的天生缺陷，HTTP 是一種無(wú)狀態(tài)的協(xié)議，簡(jiǎn)單的 Request 和 Response 一旦請(qǐng)求/響應(yīng)結(jié)束，客戶(hù)端與服務(wù)器端的連接就會(huì)關(guān)閉，再次交換數(shù)據(jù)需要建立新的連接。這就意味著服務(wù)器無(wú)法從連接上跟蹤會(huì)話(huà)，即服務(wù)器并不清楚是哪個(gè)客戶(hù)端。

一些典型應(yīng)用如 登陸/購(gòu)物車(chē) 就無(wú)法實(shí)現(xiàn)了。比如，用戶(hù) A 在購(gòu)物商城購(gòu)買(mǎi)的商品都應(yīng)該放在 A 的購(gòu)物車(chē)內(nèi)，不論是用戶(hù) A 什么時(shí)間購(gòu)買(mǎi)的，這都是屬于同一個(gè)會(huì)話(huà)的，不能放入用戶(hù) B 或用戶(hù) C 的購(gòu)物車(chē)內(nèi)，這不屬于同一個(gè)會(huì)話(huà)。

基本的原理如圖

二、cookie 操作

對(duì) cookie 的操作包括如下

1.名稱(chēng)(Name)
2.值(Value)
3.域(Domain)
4.路徑(Path)
5.失效日期(Expires)
6.安全標(biāo)志(Secure)
7.HttpOnly (僅服務(wù)器端)

注意，cookie 多數(shù)時(shí)候由服務(wù)器端創(chuàng)建，JS 也可以創(chuàng)建 cookie，但 HttpOnly 類(lèi)型的 JS 無(wú)法創(chuàng)建。

瀏覽器提供的 cookie API （document.cookie）實(shí)在過(guò)于簡(jiǎn)陋，可以稍封裝下，如以下采用setter/getter方式 cookie 函數(shù)就方便了許多

/*
* JS 寫(xiě)cookie和讀cookie操作
*
* **取cookie**
* cookie(name)
*
* **寫(xiě)cookie**
* cookie(name, value)
* cookie(name, value, option)
*/
var cookie = function(name, value, option) {
var doc = document
if (value != undefined) { // set 
option = option || {}
if (value === null) {
value = ''
option.expires = -1
}
var expires = ''
if (option.expires && (typeof option.expires == 'number' || option.expires.toUTCString)) {
var date = new Date
if (typeof option.expires == 'number') {
date.setTime(date.getTime() + (option.expires * 24 * 60 * 60 * 1000))
} else {
date = option.expires
}
// for IE
expires = '; expires=' + date.toUTCString()
}
var path = option.path ? '; path=' + option.path : ''
var domain = option.domain ? '; domain=' + option.domain : ''
var secure = option.secure ? '; secure' : ''
doc.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('')
} else { // get 
var cookieValue = null
if (doc.cookie && doc.cookie != '') {
var cookies = doc.cookie.split(';')
for (var i = 0; i < cookies.length; i++) {
var cookie = $.trim(cookies[i]).split('=')
if ( cookie[0] == name && cookie.length > 1 ) {
try {
cookieValue = decodeURIComponent(cookie[1])
} catch(e) {
cookieValue = cookie[1]
}
break
}
}
}
return cookieValue
}
}; 

當(dāng)然，還有更方便的 https://github.com/florian/cookie.js，提供了更多便捷函數(shù)。

三、cookie 類(lèi)型

1.普通 cookie，服務(wù)器端和 JS 都可以創(chuàng)建，JS 可以訪(fǎng)問(wèn)
2.HttpOnly cookie，只能由服務(wù)端創(chuàng)建，JS 是無(wú)法讀取的，主要基于安全考慮
3.安全的 cookie (僅https)，服務(wù)器端和 JS 都可以創(chuàng)建，JS 僅HTTPS下訪(fǎng)問(wèn)

比如，在新浪云上測(cè)試頁(yè)面：http://snandy.sinaapp.com/php/cookie.php，我種了 3 個(gè) cookie，分別是 c1, c2, c3

$d1 = mktime(1,1,1,1,1,2018);
// 普通cookie
setcookie("c1", "Jack", $d1); 
// 安全的cookie，僅https，第6個(gè)參數(shù)
setcookie("c2", "John", $d1, NULL, NULL, TRUE); 
// HttpOnly cookie 第7個(gè)參數(shù)
setcookie("c3", "Resig", $d1, NULL, NULL, NULL, TRUE); 

用 Firefox 訪(fǎng)問(wèn)

我種的三個(gè)都有，saeut是新浪云種的。

在 firebug 控制臺(tái)輸入 document.cookie

可以看到，c2，c3 都是訪(fǎng)問(wèn)不到的。c2 是 安全的cookie，需要在https協(xié)議下訪(fǎng)問(wèn)，c3 則是 httpOnly 的，JS無(wú)法訪(fǎng)問(wèn)，這個(gè)需要注意。

把訪(fǎng)問(wèn)協(xié)議改成 https： https://snandy.sinaapp.com/php/cookie.php，firebug 切換到控制臺(tái)再輸入 document.cookie，可以看到 c2 就可以訪(fǎng)問(wèn)了

四、cookie 的坑

1. Cookie 太大或數(shù)量過(guò)多時(shí)頁(yè)面訪(fǎng)問(wèn)報(bào)錯(cuò)，比如會(huì)出現(xiàn)如下提示

因此站點(diǎn)的 cookie 需要管理，不能隨意種 cookie。另外盡量指定path，將cookie限定在指定范圍內(nèi)。

網(wǎng)站 browsercookielimits.squawky.net ，記錄了各瀏覽器 cookie 大小

2. 保存中文時(shí)需要Unicode編碼(encodeURIComponent)，否則存的是亂碼