HTTP狀態管理機制之Cookie

cookie 最早是網景公司的雇員 lou montulli 在2023年3月發明，後被 w3c 採納，目前 cookie 已經成為標準，所有的主流瀏覽器如 ie、chrome、firefox、opera 等都支援。

cookie 的誕生是由於 http 協議的天生缺陷，http 是一種無狀態的協議，簡單的 request 和 response 一旦請求/響應結束，客戶端與伺服器端的連線就會關閉，再次交換資料需要建立新的連線。這就意味著伺服器無法從連線上跟蹤會話，即伺服器並不清楚是哪個客戶端。

一些典型應用如登陸/購物車就無法實現了。比如，使用者 a 在購物**購買的商品都應該放在 a 的購物車內，不論是使用者 a 什麼時間購買的，這都是屬於同乙個會話的，不能放入使用者 b 或使用者 c 的購物車內，這不屬於同乙個會話。

基本的原理如圖

對 cookie 的操作包括如下

名稱(name)

值(value)

域(domain)

路徑(path)

失效日期(expires)

安全標誌(secure)

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) 
if (value === null) 
var expires = ''
if (option.expires && (typeof option.expires == 'number' || option.expires.toutcstring))  else 
// 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  catch(e) 
break}}
}		return cookievalue
}};

當然，還有更方便的提供了更多便捷函式。

普通 cookie，伺服器端和 js 都可以建立，js 可以訪問

httponly cookie，只能由服務端建立，js 是無法讀取的，主要基於安全考慮

安全的 cookie (僅https)，伺服器端和 js 都可以建立，js 僅https下訪問

$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 訪問

在 firebug 控制台輸入 document.cookie

可以看到，c2，c3 都是訪問不到的。c2 是安全的cookie，需要在https協議下訪問，c3 則是 httponly 的，js無法訪問，這個需要注意。

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

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

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

2. 儲存中文時需要unicode編碼(encodeuricomponent)，否則存的是亂碼

HTTP狀態管理機制之Cookie

Vue學習之狀態管理機制Vuex

Vuex狀態管理機制的基本使用

記憶體管理機制

HTTP狀態管理機制之Cookie

Vue學習之狀態管理機制Vuex

Vuex狀態管理機制的基本使用

記憶體管理機制

相關推薦