前端面试必备——cookie与本地存储与实践

引言

一个项目考虑缓存和不考虑缓存彻底是两个难度，在用户体验上也大相径庭。考虑缓存确定得了解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.注意点

1. Cookie会被附加在每一个HTTP请求中，因此无形中增长了流量。
2. 因为在HTTP请求中的Cookie是明文传递的，因此安全性成问题，除非用HTTPS。对于存储登陆状态，用token也比用cookie好，一方面安全，一方面去中心化，后面有空确定会专门写一篇文章来细说登陆的。
3. 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数据

3.sessionStorage和vuex的关系

1.首先vuex里面的数据基本上都是各个页面异步获取的，全局的，特别重要的信息，若是说刷新浏览器，vuex数据丢失报致使报错确定不能接受，因此咱们应该将vuex里面的数据存到sessionStorage，刷新的时候vuex从读取ssessionStorage的数据并进行初始化，那样就无惧刷新了
2.其次怎么存储进去，咱们固然能够手动存储，可是太麻烦。这里咱们用的是另一个包vuex-persistedstate，它能够自动同步vuex的数据到ssessionStorage,刷新的时候自动读取ssessionStorage并初始化vuex
3.第三点，也就是我以为最重要的，就是xxxStorage和vuex的关系，有些人认为我不用vuex，我数据就存在xxxStorage里面，还不是同样能够，它两不同的嘛。
实际上xxxStorage和vuex是彻底两样的，前者
的做用是存储，后者的做用是状态管理，惟一的联系就是刷新初始化的时候vuex从xxxStorage里面拿到数据源来初始化。若是你不理解状态管理管理是啥子意思，我就不说vuex mutation,action,getter之类的了，最基本的，xxxStorage存储的数据没有响应式vuex里面的数据有响应式。

实践

1.任务描述

有3个网站，A:聚合平台，B:B广告平台，C:C广告平台
1.ABC三个从各自域名进都须要单独登陆
2.A登陆后能够以A登陆事的用户直接跳到BC的产品页，不用再登陆
3.若是BC是从A跳过去的则能够回退到A,不然回退到登陆

2.架构

咱们团队使用的是vue，这里讲下相关的架构
这是一个最基本的简化过的架构图,并无涉及到权限，可是基本思路是ok的，

注意事项：
1.ABC都是次级域名，须要一个公司的顶级域名而后设cookie，
2.cookie传参有大小现实，开始咱们的客户列表太大，传不过去，我手动进行了拆分和拼接，其实更好的作法是只传用户id过去，到BC了再异步请求获取客户列表

上面的架构图有两个问题
1.A到B、后怎么控制只初始化一次，也就是后面即便刷新也不会从新初始化用户信息
2.怎么结合权鉴，也就是说上面的A跳C-Content能跳过去，可是我新开一个页签网址输入C-content却会先跳到登陆页Clogin，

你们能够想一下怎么优化

3.经过各类“缓存”优化项目

原则
cookie: 各类凭证 举例：登陆凭证token
sessionStorage:刷新不能丢的数据 举例：vuex里面数据，表单里正填了一半的数据
localStorage:量大基本不变的数据，不用再异步请求 举例：地图数据，记住密码？

总结

本文首先对cookie以及本地储存进行了详细介绍，而后结合本身的项目进行了进一步讲解，但愿能给各位带来帮助。此次的文章主要讲的是本地存储相关，并不涉及到浏览器缓存（304）之类的，这些内容估计会在下一篇中会详细介绍下，敬请期待！