共计 1813 个字符，预计需要花费 5 分钟才能阅读完成。
引言
一个项目考虑缓存和不考虑缓存完全是两个难度，在用户体验上也截然不同。考虑缓存肯定得了解 web 本地存储与它们的区别和适用场景。
正好这次负责一个项目，在做了这个项目后抽空给大家来一次总结，希望能给大家带来帮助。
cookie
1. 是什么
Cookie 指某些网站为了辨别用户身份而
储存在用户本地终端（Client Side）上的数据（通常经过加密）。
2. 为什么
因为
HTTP 协议是无状态的，即服务器不知道用户上一次做了什么，这严重阻碍了交互式 Web 应用程序的实现。在典型的网上购物场景中，用户浏览了几个页面，买了一盒饼干和两瓶饮料。最后结帐时，由于 HTTP 的无状态性，不通过额外的手段，服务器并不知道用户到底买了什么，所以 Cookie 就是用来绕开 HTTP 的无状态性的“额外手段”之一。服务器可以设置或读取 Cookies 中包含信息，借此维护用户跟服务器会话中的状态。
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 左右，对于复杂的存储需求来说是不够用的。
4. 由于 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: 量大基本不变的数据，不用再异步请求 举例：地图数据，记住密码？
总结
本文首先对 cookie 以及本地储存进行了详细介绍，然后结合自己的项目进行了进一步讲解，希望能给各位带来帮助。
这次的文章主要讲的是本地存储相关，并不涉及到浏览器缓存（304）之类的，这些内容估计会在下一篇中会详细介绍下，敬请期待！