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 只会作为存储登录信息之用
    举报/反馈

    文江博客

    2080获赞 763粉丝
    文江的个人博客,平凡的草根站长。
    关注
    0
    0
    收藏
    分享