区别cookie,localStorage,sessionStorage前端三大缓存

生命周期

0. cookie

   0. 具有最大超时时间Max-Age

      0. 如果没有超过最大超时时间,只要用户不主动清空,或者开发人员通过js代码删除,数据一直存在不会销毁

   1. 不具有最大超时时间(会话cookie)

      0. 关闭当前页面或者浏览器,都会导致会话cookie中的数据丢失

1. localStorage

   0. 只要用户不主动清空,或者开发人员通过js代码删除,数据一直存在不会销毁

2. sessionStorage

   0. 关闭当前页面或者浏览器,都会导致sessionStorage中的数据丢失

存储位置

0. cookie

   0. 具有最大超时时间Max-Age

      0. 硬盘

   1. 不具有最大超时时间(会话cookie)

      0. 内存

1. localStorage

   0. 硬盘

2. sessionStorage

   0. 内存

存储大小

0. cookie -> 4KB
1. localStorage -> 5MB
2. sessionStorage -> 5MB

与服务器之间的关系

0. cookie

   0. 服务器创建,浏览器存储
   1. 浏览器能否使用该cookie,会受到服务器约束
   2. 服务器返回cookie是通过响应头中的set-Cookie字段实现的
   3. 浏览器携带cookie是通过请求头中的Cookie字段实现的

1. localStorage

   0. 跟服务器不熟

2. sessionStorage

   0. 跟服务器不熟

比较三者的优缺点

0. cookie体积太小
1. cookie每次发送请求都会自动携带上(有可能并不需要cookie中的数据,还是会自动携带上)
2. cookie不仅受服务器约束,还要受用户的气
3. 用户学精了,会动不动清空cookie
4. cookie的安全性比较差

token与上面三者的区别

0. token的本质:只是一个存储了用户唯一标识的字符串(而且还是经过加密的)

session存储

0. 本质:他只是服务器上的一个普通对象
1. 该对象具有至少一个属性session_id(是这个对象的唯一标识)
2. 服务器会将session对象的唯一标识存在cookie中,并返回给前端进行存储
3. session对象中一般会存储重要数据

扩展

0. 多标签页面数据通信

   0. 需要接受数据的网页给window绑定事件监听,事件名storage
   1. 需要发送数据的网页,将数据存入localStorage中,那么就可以触发另外一个网页的storage事件