HTTP狀態管理機制之Cookie

1、cookie 起源

cookie 最先是網景公司的僱員 Lou Montulli 在1993年3月發明，後被 W3C 採納，目前 cookie 已經成爲標準，全部的主流瀏覽器如 IE、Chrome、Firefox、Opera 等都支持。

cookie 的誕生是因爲 HTTP 協議的天生缺陷，HTTP 是一種無狀態的協議，簡單的 Request 和 Response 一旦請求/響應結束，客戶端與服務器端的鏈接就會關閉，再次交換數據須要創建新的鏈接。這就意味着服務器沒法從鏈接上跟蹤會話，即服務器並不清楚是哪一個客戶端。

一些典型應用如 登錄/購物車 就沒法實現了。好比，用戶 A 在購物商城購買的商品都應該放在 A 的購物車內，不管是用戶 A 什麼時間購買的，這都是屬於同一個會話的，不能放入用戶 B 或用戶 C 的購物車內，這不屬於同一個會話。

 

基本的原理如圖

 

2、cookie 操做

對 cookie 的操做包括以下

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

注意，cookie 多數時候由服務器端建立，JS 也能夠建立 cookie，但 HttpOnly 類型的 JS 沒法建立。

 

瀏覽器提供的 cookie API （document.cookie）實在過於簡陋，能夠稍封裝下，如如下采用setter/getter方式 cookie 函數就方便了許多

/*
 * 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
	}
};

固然，還有更方便的 https://github.com/florian/cookie.js，提供了更多便捷函數。

　　

3、cookie 類型

1. 普通 cookie，服務器端和 JS 均可以建立，JS 能夠訪問
2. HttpOnly cookie，只能由服務端建立，JS 是沒法讀取的，主要基於安全考慮
3. 安全的 cookie (僅https)，服務器端和 JS 均可以建立，JS 僅HTTPS下訪問

 

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

$d1 = mktime(1,1,1,1,1,2018);
// 普通cookie
setcookie("c1", "Jack", $d1); 

// 安全的cookie，僅https，第6個參數
setcookie("c2", "John", $d1, NULL, NULL, TRUE); 

// HttpOnly cookie 第7個參數
setcookie("c3", "Resig", $d1, NULL, NULL, NULL, TRUE);

用 Firefox 訪問

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

 

在 firebug 控制檯輸入 document.cookie

能夠看到，c2，c3 都是訪問不到的。c2 是 安全的cookie，須要在https協議下訪問，c3 則是 httpOnly 的，JS沒法訪問，這個須要注意。

 

把訪問協議改爲 https： https://snandy.sinaapp.com/php/cookie.php，firebug 切換到控制檯再輸入 document.cookie，能夠看到 c2 就能夠訪問了

 

4、cookie 的坑

1. Cookie 太大或數量過多時頁面訪問報錯，好比會出現以下提示

所以站點的 cookie 須要管理，不能隨意種 cookie。另外儘可能指定path，將cookie限定在指定範圍內。

 

網站 browsercookielimits.squawky.net ，記錄了各瀏覽器 cookie 大小

 

2. 保存中文時須要Unicode編碼(encodeURIComponent)，不然存的是亂碼