一、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 是一種無狀態(tài)的協(xié)議，簡單的 Request 和 Response 一旦請求/響應(yīng)結(jié)束，客戶端與服務(wù)器端的連接就會關(guān)閉，再次交換數(shù)據(jù)需要建立新的連接。這就意味著服務(wù)器無法從連接上跟蹤會話，即服務(wù)器并不清楚是哪個客戶端。

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

基本的原理如圖

二、cookie 操作

對 cookie 的操作包括如下

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

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

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

/* * JS 寫cookie和讀cookie操作 * * **取cookie** *   cookie(name) * * **寫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 類型

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

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

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

用 Firefox 訪問

我種的三個都有，saeut是新浪云種的。

在 firebug 控制臺輸入 document.cookie

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

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

四、cookie 的坑

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

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

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