详解HTTP Cookie状态管理机制

程序员文章站 2022-06-09 09:19:50

http cookies，通常又称作"cookies"，已经存在了很长时间，但是仍旧没有被予以充分的理解。首要的问题是存在了诸多误区，认为cookies是后门程序或病毒，或...

http cookies，通常又称作"cookies"，已经存在了很长时间，但是仍旧没有被予以充分的理解。首要的问题是存在了诸多误区，认为cookies是后门程序或病毒，或压根不知道它是如何工作的。第二个问题是对于cookies缺少一个一致性的接口。尽管存在着这些问题，cookies仍旧在web开发中起着如此重要的作用，以至于如果cookie在没有可替代品出现的情况下消失，我们许多喜欢的web应用将变得毫无用处。

一、cookie 起源

cookie 最早是网景公司的雇员 lou montulli 在1993年3月发明，后被 w3c 采纳，目前 cookie 已经成为标准，所有的主流浏览器如 ie、chrome、firefox、opera 等都支持。

cookie 的诞生是由于 http 协议的天生缺陷，http 是一种无状态的协议，简单的 request 和 response 一旦请求/响应结束，客户端与服务器端的连接就会关闭，再次交换数据需要建立新的连接。这就意味着服务器无法从连接上跟踪会话，即服务器并不清楚是哪个客户端。

一些典型应用如登陆/购物车就无法实现了。比如，用户 a 在购物商城购买的商品都应该放在 a 的购物车内，不论是用户 a 什么时间购买的，这都是属于同一个会话的，不能放入用户 b 或用户 c 的购物车内，这不属于同一个会话。

基本的原理如图

详解HTTP Cookie状态管理机制

二、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，提供了更多便捷函数。

三、cookie 类型

1.普通 cookie，服务器端和 js 都可以创建，js 可以访问
2.httponly cookie，只能由服务端创建，js 是无法读取的，主要基于安全考虑
3.安全的 cookie (仅https)，服务器端和 js 都可以创建，js 仅https下访问

比如，在新浪云上测试页面：，我种了 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 访问

详解HTTP Cookie状态管理机制