前端 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.注意点

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数据

资源搜索网站大全 https://www.renrenfan.com.cn 广州VI设计公司https://www.houdianzi.com

实践

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:量大基本不变的数据,不用再异步请求 举例:地图数据,记住密码?

posted @ 2020-12-12 11:43  陌路y  阅读(620)  评论(0编辑  收藏  举报