Skip to content

cookie的使用

🕒 Published at:

基础知识

为什么需要cookie?

是因为http是一个上下文无关,无状态的协议,上一次请求和下一次请求没有关系。当http协议需要维持某种状态的时候,比如登录状态,就比较棘手,所以需要cookie。但其实也有其他方案解决http无状态的问题,这里只讨论cookie。

set-cookie 服务器设置

  1. cookie不可以跨域
  2. cookie存储在浏览器
  3. cookie存储有数量和大小的限制
    1. 每个域名数量在50个左右
    2. 每一个域名cookie总大小在4kB左右
  4. cookie的存储时间非常灵活
  5. cookie服务器可以设置,浏览器也可以设置

document.cookie

key:value

cookie的属性

  1. name(cookie的名称,具有唯一性)

  2. value(cookie的值)

  3. domain(设置cookie在哪个域下是有效的)

  4. path(cookie的路径)

  5. expires(cookie的过期时间)

    GMT:格林尼治时间

    UTC:协调世界时

  6. max-age(cookie的有效期)

    -1 0 正数

  7. HttpOnly 有这个标记的cookie,前端通过JS无法获取

  8. Secure 设置cookie只能通过HTTPS协议传输

  9. SameSite 设置cookie在跨域请求的时候不能被发送

expires和max-age都能决定cookie是否过期,expires是属于旧版的属性,兼容性较好,而max-age是新版的属性,语义化较好。

两个值同时设置的话,max-age的优先级更高

js
document.cookie = `name=oliver; max-age=-1; expires=${new Date(2066, 6, 18)};`
document.cookie = `major=law; expires=${new Date(1970, 0, 1)}; max-age=3600;`

如果不同时设置,后面的值会覆盖前面的值

==一般推荐使用max-age,而不使用expires==

第三方封装库

js-cookie

https://blog.csdn.net/proglovercn/article/details/45514705

chrome使用cookie一个域一般不超过20条,不超过4KB