浏览器存储方式对比

Cookie

1.因为HTTP请求无状态，所以需要Cookie去维持客户端状态。
2.浏览器客户端记录保存Cookie,服务端辨别用户的信息。
3.Cookie的生成方式：http response header 中的set-cookie，由服务端生成，客户端把Cookie存储和维护。
4.JS中可以通过document.cookie来读写cookie。
5…之后的请求都携带Cookie,就像健身房办卡，维护会员的信息。
作用：
1.用于浏览器和服务器的交互。
2.客户端自身数据的存储。
Cookie初衷是为了维护客户端的状态
存储的限制：大小4KB，需要设置过期时间。
Cookie的存储能力被localstorage代替
httponly为了保证安全，不支持JS读写，防止黑客攻击。
Cookie在相关域名下面会带来CDN的流量损耗，因为只要是这个域名下的信息都会携带cookie
对于静态资源来说，每次都在HTTP头部中携带Cookie信息，对大流量来说经济损失很大
解决：CDN的域名和主站的域名要分开

Localstorage

1.接口封装好
2.浏览器的本地缓存方案
3.大小在5Mz左右
4.仅在客户端存在，不和服务端交互
5.场景：网速慢，本地缓存，在网不好的情况下，第一次请求来的信息我会保存，把首屏上的不变的信息存下来，不会有首屏的白屏情况，后期有接口返回的新数据，再重新渲染，提升首屏渲染速度