简述浏览器缓存之cookie

前言

　　cookie是客户端的一种缓存技术，作为无状态的HTTP扩展，常保存在浏览器中作为身份识别。西法分别简述一下cookie的属性、js操作cookie以及cookie的容量限制。

cookie的属性

属性	说明
Name	key
value	value
Domain	所在域名
Path	所在路径
Expires/Max-Age	过期时间
Size	大小
Secure	布尔值，如true，只能通过https传递
HTTP	布尔值，如true,则表示httponly，不能使用JS操作该cookie
SameSite	Strict或Lax，前者不允许第三方站进入本站时使用该cookie，默认为后者

cookie域名有同源策略，cookie不能被跨域读写，但主域可设置删除子域cookie，子域只可读主域不可设置删除子域cookie，其他二级域名则互相不可访问。

虽然有同源策略，却可以csrf攻击，可使用token解决

cookie与端口无关

expires是HTTP/1.0定义的，指GMT格式的过期时间，一般比北京时间晚8小时，超过该时间点后失效；Max-Age指访问之后有效时间长度，是一个时间段。为了向下兼容，expires表现形式多一些

JS操作

class cookieStorage {

setCookie (name, value, sec) {

let cookie = name + '=' + encodeURIComponent(value) + ';path=/';

if (sec) {

cookie += ";max-age=" + sec;

}

document.cookie = cookie;

}

getCookie (name){

let val;

let cookieArr = document.cookie.split(';');

for(let v of cookieArr){

let cookie = v.split('=');

if(cookie[0].replace(/(^\s*)|(\s*$)/g, "") === name){

val = cookie[1].replace(/(^\s*)|(\s*$)/g, "");;

break;

}

}

return val;

}

clearCookie(name){

this.setCookie(name, '', -1);

}

}

cookie容量限制

　　chrome下，同一个域名，最后可加入169个cookie。

　　同一个cookie，name与value值最长是4K左右(其中包括11个占位字节)，但实际使用中并不意味着cookie真能这么长，因为cookie会带入在http中header请求头cookie属性，会把doucment.cookie传给后台，header过大时，服务器会返回400 Bad Request Request Header Or Cookie Too Large错误，这由nginx　large_client_header_buffers设置的，一般默认是16K，可修改，但如果改的过大，可能会造成服务器处理慢、占用网络带宽等问题。

　　在部分老浏览器中，同一域名最多可能只使用30个cookie，所以，除了必要的数据，次要缓存可考虑保存在localStore或indexedDB中。