前端 cookie与本地存储与实践小白知识
引言
一个项目考虑缓存和不考虑缓存完全是两个难度，在用户体验上也截然不同。考虑缓存肯定得了解web本地存储与它们的区别和适用场景。
正好这次负责一个项目，在做了这个项目后抽空给大家来一次总结，希望能给大家带来帮助。
cookie
1.是什么
2.为什么
3.设置
前端后端都能设置
前端可以通过js-cookie这个库来设置键值、过期时间、域名，然后主动调用接口的时候讲cookie放到request header里面
Cookies.set('name', 'value', { expires: 7, domain: 'xxx' })后端也可以设置cookie，不过设置cookie放在response header里面
注意cookie是存储在用户本地终端的，然后每次访问网站都会带上！
4.注意点
Cookie会被附加在每个HTTP请求中，所以无形中增加了流量。
由于在HTTP请求中的Cookie是明文传递的，所以安全性成问题，除非用HTTPS。对于存储登录状态，用token也比用cookie好，一方面安全，一方面去中心化，后面有空肯定会专门写一篇文章来细说登录的。
Cookie的大小限制在4KB左右，对于复杂的存储需求来说是不够用的。
由于cookie可以设置domain,设置父级域名上的cookie子域名也能读到，这个是我唯一适用cookie的地方，跨域信息共享。
H5本地存储
早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速.
这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能.
于是HTML5多了两个web存储api,localStorage和sessionStorage。
1.localStorage
注意点：同源策略，永久性，存储的是字符串，如果是对象需要用JSON.parse、stringify，貌似还有错误捕捉的问题(不过我一直用的good-storage库，从来没有考虑过这个)
2.sessionStorage
注意点：唯一和localStorage不同的是它是针对页签的。比如在当前页签上登录百度，设置ssessionStorage数据,然后在当前页签上不管怎么跳转，最后只要再回到百度，ssessionStorage数据都存在。但是再开一个页签登录百度，则不会有ssessionStorage数据
实践
1.任务描述
有3个网站，A:聚合平台，B:头条广告平台，C:百度广告平台
1.ABC三个从各自域名进都需要单独登录
2.A登录后可以以A登录事的用户直接跳到BC的产品页，不用再登录
3.如果BC是从A跳过去的则可以回退到A,否则回退到登录
2.架构
我们团队使用的是vue，这里讲下相关的架构
注意事项：
1.ABC都是次级域名，需要一个公司的顶级域名然后设cookie，
2.cookie传参有大小现实，开始我们的客户列表太大，传不过去，我手动进行了拆分和拼接，其实更好的做法是只传用户id过去，到BC了再异步请求获取客户列表
3.通过各种“缓存”优化项目
原则
cookie: 各种凭证 举例：登录凭证token
sessionStorage:刷新不能丢的数据 举例：vuex里面数据，表单里正填了一半的数据
localStorage:量大基本不变的数据，不用再异步请求 举例：地图数据，记住密码？
