前端面试-网络-cookie、storage一、引入客户端和服务端的数据传输使用的是http协议，http协议是无状态

客户端和服务端的数据传输使用的是http协议，http协议是无状态的（每次请求都是相互独立的，服务器不会在多个请求之间保留客户的状态信息，当前请求成功后，就断开连接），即服务器不知道这一次请求的人，和之前请求的人是不是同一个人，所以引入cookie/storage来进行身份认证。

key：键
value：值
domain：域，表示这个cooke是属于哪个网站的
- 如baidu.com，表示这个cookie是属于baidu.com这个网站的
- 若不设置，则浏览器会自动设置为当前请求域，如浏览器请求的地址为http://www.baidu.com，则domain为www.baidu.com
- 值得注意的是，若服务器响应了一个无效的域（响应的域和请求的地址不一样），浏览器是不认的，如当前请求地址为www.baidu.com，但服务器响应为`set-cookie:juejin.com`，这样的域浏览器是不认的
expire：过期时间，GMT标准时间格式，过期时客户端会自动删除
max-age：cookie的相对有效时间，单位s
- 如设置1000s，则浏览器会自动设置它的expire为当前时间上加上1000s
- 一般expire和max-age设置一个就好
- 若不设置expire和max-age，则表示当前会话结束后过期
path：页面路由（路径），如/news
- 若不设置path，则浏览器会自动设置为当前路径，如当前路径为/login，则浏览器会自动设置path为/login
secure：设置浏览器是否安全连接，设置了则表示该cookie后续只能随https请求发送，不设置则随所有请求发送
httponly：设置cookie是否仅能用于传输，若设置，则表示cookie仅能用于传输，而不允许在客户端通过js获取，这对防止跨站脚本攻击（xss）会有用
- 客户端自行设置cookie时，没有这个参数

通过服务器响应设置，浏览器会自动将cookie进行保存
除了键值对是必选，其他参数是可选

set-cookie:cookie1
set-cookie:cookie2

客户端自行设置

document.cookie='a=2323;max-age=3600;'

若想删除cookie，则只需要修改cookie的时间，让其过期即可

document.cookie='a=2323;max-age=-1;'

cookie没有过期
cookie的domain和这次请求的域是匹配的
- 如cookie中的域为baidu.com，则可以匹配的请求域有
  - baidu.com、www.baidu.com、xxx.baidu.com等
- 若cookie中的域为www.baidu.com，则只能匹配www.baidu.com
- cookie不在乎端口，只要域匹配就行
cookie的path一致
- 若cookie的path为/news，则可以匹配/news、/news/detail、news/a/b/c等，但不能匹配/detail
- 若cookie为/，则表示能匹配所有路径
验证cookie的安全传输secoure
- 若为true，则请求协议必须是https，否则不会发送cookie
- 若为false，则https、http协议都会发送

只要满足以上所有条件，则浏览器会自动将cookie加入到请求中

cookie存储大小为4kb，localStorage和sessionStorage的存储大小为5MB~10MB
cookie满足规则后，会自动附加在网络请求中传递给后端，localStorage和sessionStorage不会自动传递给后端，进行token认证时，一般是放在请求头header中
cookie的访问与domain、path关联，而localStorage、sessionStorage仅与domain关联
- 其中sessionStorage为会话级，即不同标签页的sessionStorage不互通、共享，即每打开一个标签页，都会重新开辟一块空间进行sessionStorage存储
- 若想要在新打开的标签页中复制当前sessionStorage状态，可以使用window.open打开，但打开之后，两个标签页的sessionStorage就不再关联
app开发时，一般不支持cookie，但可以使用localStorage和sessionStorage进行token存储认证