浏览器 Cookie 详解

Question

1. cookie 是啥？能干啥？

1.1 cookie 是啥？

• 简单来说 cookie 就是通过客户端，存储的变量
• 一般情况下，服务端与 JS 都可以操作 cookie，都可以对 cookie 进行写入与读取
  • 某些特殊情况下的 cookie，JS 操作不了

1.2 能干啥？

• cookie 可以做客户端缓存
• 进行网络请求时，cookie 会自动挂在 request header 上，因此可以做用户登录状态的记录
  • 前端开发接口时，不用专门传输用户信息，cookie 会自动带过去
  • 原生 app 请求接口时，不能主动携带 cookie 的，但是原生 app，可以向 H5 界面种植 cookie

2. cookie 的属性列表

打开 chrome 的开发者工具，可以看到当前界面的 cookie 列表信息

Name

• cookie 的存储方式类似于 key-value 形式，name 可以理解为 key
• 同域下，name 不能重复，否则后者覆盖掉前面的
• 虽然允许中文存储，但是尽量不要使用中文存储，有的浏览器、有的场景下，会有兼容性问题，导致乱码，name 尽量别是中文

Value

cookie 的实际值，如果存储中文的话，需要进行编码，读取的时候再行解码

Domain

cookie 所在的域，cookie 不能跨域写入、读取，cookie 默认存储在本域，也可以存储在本域的父级域名、根域之下

Path

• cookie 存储的路径，如果不做特殊说明的话，cookie 默认存储是当前路径，但是其余路径的界面，就无法读取到这个 cookie
• 一般而言，都是存储到根目录，即/目录

Expires/Max-Age

为过期时间/最大时效

• 如果是显示未来的某个时间点，该条 cookie 会在这个时间点失效
• 如果是显示着为 session 或者 /，证明该条 cookie 在浏览器关闭之后，就会时效

Size

cookie 的大小，单位为字节，可以查看哪条cookie过去庞大，用于优化

HTTP

是否仅用于传输。如果该栏目为勾选状态，说明该条 cookie 是 JS 无法读取、写入的，只能通过服务器进行读写

Secure

是否仅适用于https，如果此项勾选，该条 cookie 仅在 https 下才能生效

SameSite

• 是否防止跨域发送。
• cookie 信息是可以通过后台代码、node 程序，post 到服务器上去的，以通过验证，达到不可告人的目的。
• 如果改项为勾选，说明该 cookie 信息只能通过本域名下的请求才能传输，不能通过其他域名下发送

3. cookie 的增、删、改、查-通过 JS

服务端也可以对 cookie 进行同样的操作

读取

document.cookie，即可获取当前域名全部可以 JS 操作的 cookie 信息，只是形式为字符串，没条数据按分号隔开，需要JS单独处理

写入

document.cookie="userId=828; userName=hulk; domian=demo.com; path=/; expire="+xxx;

• 可以同时写入多条
• 必填项为 key = value
• domian 选填，默认为当前的域名，也可以设置当前域名的父级、根域名
• path 选填，默认为当前的路径，即 location.pathname，一般设置为根目录 /
• expire 选填，默认是随着浏览器关闭即过期，如果填写的话，是未来的时间点

改写

同样 document.cookie="userId=828; userName=hulk; domian=demo.com; path=/; expire="+xxx; 格式改写，只是 path、domain，都需要与之前的统一，要不然不是改写之前的了，而是写入一个新的了

删除

将 cookie 重新写入，过期时间为现在，或者现在之前的某个时间点即可

4. cookie 与 session

• cookie 是客户端信息，session 是服务端信息
• session 在客户端中，通过 cookie 记录
• 非 session 的 cookie 不会随着浏览器关闭而消失，session 会消失
• session 过期，导致回话过期，网站重新登录等等
• session 默认 15 分钟，可以通过 Tomcat、Java 项目等各种手段设置

5.cookie 的注意点

• cookie是有限制的，不同的浏览器每个域名下，有不同的cookie条数限制，20-50条不等
• 浏览器一共可以存储4kb左右的cookie信息，多了的话就会删除旧的
• 由于cookie信息均会发送到服务器，多余的 cookie 的话，一是浪费带宽，二是增加请求成本，三是增加服务端解析成本
  • 所以cookie一定要减少体积，能不用的话就不用，以达到性能优化的目的
  • 静态资源文件，采用与主站不同的域名，避免在请求css、js的时候，携带上cookie信息

6. 扩展

• 原生操作 cookie 的话，还需要写一下公用 JS 代码，这里推荐一个JS操作 cookie 的代码示例。
• 如果你用的是 jquery 做基础类库，这里还推荐一个 jquery cookie 的插件库，基于 jquery 的，更是简单

7.总结

• cookie 很好用，但是得谨慎
• 在浏览器全面兼容 localstorage 之前，cookie 还是有很大用途的
• 预测在浏览器全面支持 html5 之后，cookie 只会作为存储登录信息之用