文章目录
概述
Cookie 是服务器保存在浏览器的一小段文本信息,每个 Cookie
的大小一般不能超过4KB。浏览器每次向服务器发出请求,就会自动附上这段信息。
Cookie主要用来分辨两个请求是否来自同一客户端,以及用来保存一些状态信息。
不推荐使用Cookie作为客户端存储,Cookie的设计目标并不是这个,它的容量很小,缺乏数据操作接口,而且会影响性能。客户端存储应该使用Webstorage API和IndexedDB。
Cookie包含的信息:
- Cookie的名字
- Cookie的值
- 到期时间
- 所属域名,默认是当前域名
- 生效的路径,默认是当前网址的根路径 /
浏览器的同源政策规定,两个网址只要域名相同和端口相同,就可以共享 Cookie。
Cookie的属性
Expires、Max-Age
- Expires属性指定一个具体的到期时间,到期后浏览器不再保留这个Cookie,它的值是UTC格式,可以通过Date.prototype.toUTCString()进行格式转换
- Max-Age属性指定从现在开始Cookie存在的秒数,经过指定秒数后,浏览器不再保留这个Cookie。
注意:
- Max-Age 优先级高于 Expires;
- 如果没有指定这两个属性,那么这个Cookie是Session Cookie,只在本次对话存在,一旦关闭浏览器,浏览器就不会再保留这个Cookie。
Domain、Path
- Domain属性指定浏览器发出http请求时,哪些域名要附带这个Cookie,不指定时默认为当前URL。
- Path属性指定浏览器发出http请求时,哪些路径可以附带这个Cookie,只要浏览器发现path属性是http请求路径的开头一部分,就会携带此Cookie。
Secure、HttpOnly
- Secure属性指定浏览器只有在加密协议https下,才能携带此Cookie。
- HttpOnly属性指定该Cookie无法通过js脚本(主要是document.cookie、XMLHttpRequest、Request API)拿到,防止该Cookie被脚本读到。
亲测尽管XMLHttpRequest设置了withCredentials = true,也无法携带设置了HttpOnly的Cookie
document.cookie
- 读,document.cookie会输出当前网页的所有Cookie;
- 写,document.cookie一次只能写入一个Cookie,写入不是覆盖,而是添加;
- 删,删除一个现存Cookie的唯一方法,是设置它的expires属性为一个过去的日期。
Cookie与http协议
Cookie由HTTp协议生成,也主要供HTTP协议使用。
http response 生成cookie
服务器如果希望在浏览器保存Cookie,就要在HTTP 回应的头信息里面,放置Set-Cookie字段,可以包含多个Set-Cookie字段。
Set-Cookie: foo=bar; Expires=<date>; HttpOnly;
Set-Cookie: name=fun; Domain=<domain-value>
如果服务器想改变一个早先设置的 Cookie,必须同时满足四个条件:Cookie 的key、domain、path和secure都匹配。举例来说
Set-Cookie: key1=value1; domain=example.com; path=/blog
// 如何改变上面这个Cookie,如下:
Set-Cookie: key1=value2; domain=example.com; path=/blog
// 下面这个设置会生成一个新的Cookie,因为path不一样
Set-Cookie: key1=value2; domain=example.com; path=/
http request 发送cookie
浏览器向服务器发送 HTTP 请求时,每个请求都会带上相应的 Cookie。也就是说,把服务器早前保存在浏览器的这段信息,再发回服务器。这时要使用 HTTP 头信息的Cookie字段。
Cookie: name=value; name2=value;
服务器收到浏览器发来的 Cookie 时,有两点是无法知道的。
Cookie 的各种属性,比如何时过期。
哪个域名设置的 Cookie,到底是一级域名设的,还是某一个二级域名设的。