文章目录
# 前言
每天一个知识点系列，会更多的采用问问题的方式去了解这个知识，比如起源，需求，解决。每一个技术的诞生，肯定有它解决的问题，那么我们就能知道为什么他会出现，那么对待一个问题可能会有多个方案，明白了解决的问题，我们就能去明白不同的方案他们针对的问题的不同在哪，这样才能便于我们的使用。简单来说就是：是什么，为什么，怎么做！文艺点来说就是：知其然，知其所以然。
一、有什么用，解决什么问题
cookie有什么用？
- 首先我们知道HTTP协议是无状态的协议。一旦数据交换完毕，客户端与服务器端的连接就会关闭，再次交换数据需要建立新的连接。这就意味着服务器无法从连接上跟踪会话就是他无法对自身请求和响应之间的通信状态进行保存，那么为什么不设计之初，不保存呢？那是为了更加的便于处理大量的是事务情况等。但是，随着我们的发展，比如你登录了你的学校官网处理你的信息，你应该不会想，每打开一个信息页面，你的登录信息就不见了吧~~
- 所以cookie技术就响应了，这个需求而诞生了，解决如何能在某个域名下的所有网站能够共享某些数据。那么什么是cookie呢？
- 他实际是当我们第一次向服务端发送http请求时
- 服务端接收后就会创建session，并发送一个http响应到客户端，响应头中包含Set-Cookie头部 ，sessionId等，客户端存储在本地。
- 当客户端再次访问该服务端时，就会把该cookie一起添加到http请求中，发送到服务器，服务端就能分解 cookie 解析出 sessionId 来在 session 列表中查找出对应的 session ，就可以识别当前用户是否登录。
- cookie类似一个通行证，有了他之后，你就能在该服务器中，畅行啦。
session有什么用？
- session的作用和cookie的基本类似，但是两者的不同在于，cookie存储在客户端端，session保存在服务器端，是在服务器端使用的一种记录客户端状态的机制。
- 他会在客户端第一次访问服务端时生成，后面客户端访问时，会携带session_id，服务器就会在自身的储存中查询该用户的状态
- 两者对比好比如一个会议要检查用户是否被邀请，cookie的就是邀请者有邀请函，session就是有举办方有一份名单，名单上有邀请者的名字，就能进入，没有就没有被邀请。
cookie只是实现session的其中一种方案，还有很多中方式实现session，同时cookie和session往往是一起出现的，前者在客户端，后者在服务端。一般数据量比较大的时候是存储在服务端的.
token有什么用？
-
token 也称作令牌，由uid+time+sign[+固定参数]，当我们的客户端频繁的向服务端请求数据的时候，服务端就需要频繁的用密码和账户名去对比，为了避免这个频繁的操作。token就应运而生了，只要在登录了一次后，一般就会存储 token 在客户端的 localStorage 中，每次请求的时候带上就好了。
-
组成：
- uid: 用户唯一身份标识
- time: 当前时间的时间戳
- sign: 签名, 使用 hash/encrypt 压缩成定长的十六进制字符串，以防止第三方恶意拼接
- 固定参数(可选): 将一些常用的固定参数加入到 token 中是为了避免重复查库
-
解决问题：
- 减轻服务器的压力，减少频繁的查询数据库。
- 由应用管理，所以它可以避开同源策略
- 可以避免 CSRF 攻击
- 可以是无状态的，可以在多个服务间共享，便于分布式服务
为什么tokken可以避免CSRF攻击呢？
之所以会被CSRF攻击是因为我们的 cookie 别劫持了，攻击者伪造我们的请求，在我们不知道的情况下，拿到我们的 cookie 去访问服务器。对于服务器来说，因为是携带了 cookie 这个凭证，就会认为是本人在进行操作。
同时 POST 请求并不受到浏览器同源策略的限制，因此可以任意地使用其他域的 Cookie 向其他域发送 POST 请求，根据上卖的条件就形成 CSRF 攻击了。
但token不同，token是开发者为了防范csrf而特别设计的令牌，浏览器不会自动添加到headers里，攻击者也无法访问用户的token，所以提交的表单无法通过服务器过滤，也就无法形成攻击。
localStorage有什么用？
- 那么我们又要问为什么了？我们上面已经说过有两种方式来记录存储了，那么为什么还有 localStorage 的出现呢？那么出现必然有它的原因的。
- 因为需要发送到服务端，所以cookie的存储很小，4K左右，因为大了会影响每次访问携带的，而大多数浏览器支持2M以上，我们就可以使用localStorage来存储
- 其是绑定到源的（域/协议/端口三者）,非同源的无法访问到
- 那么localStorage 最主要的特点是：
- 在同源的所有标签页和窗口之间共享数据。
- 数据不会过期。它在浏览器重启甚至系统重启后仍然存在。除非你去删除了。
- 具有更大的存储我们能做的就更多了，比如在一个单页面应用中，它的很多Label是自定义的，我们就可以把它存储到本地，以及一些当前登录用户的信息。
- 曾经在某篇文章中这么说：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生，形容的非常贴切。
sessionStorage有什么用？
- sessionStorage 和localStorage大体上是相近的，但有更多的限制条件：
-
sessionStorage 的数据只能存在于当前浏览器标签页。具有相同页面的另一个标签页中将会有不同的存储。且在同一标签页下的 iframe 之间是共享的（假如它们来自相同的源）。
-
数据在页面刷新后仍然保留，但在关闭/重新打开浏览器标签页后不会被保留。
-
sessionStorage我们从名称可以看出，session是会话的意思，这也表明了，该web 存储它的生命周期，只能保证在该会话中。
-
总结来说，前面两者（其实还有个token）可以说，是为了解决HTTP协议无状态的问题，后面两者就是浏览器上的存储功能。
二、他们有什么区别
下面通过一张图表来展示对他们的不同
| 类型 | cookie | session | localStorage | sessionStorage |
|---|---|---|---|---|
| 数据的生命期 | 一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效 | 服务器会把长时间没有活动的Session从服务器内存中清除，默认失效时间为30分钟。 | 除非被清除，否则永久保存 | 仅在当前会话下有效，关闭页面或浏览器后被清除 |
| 存放数据大小 | 4KB | 不知道，好像没限制 | 5MB | 5MB |
| 与服务器端通信 | 每次都会携带在HTTP头中，所以过大不好 | 仅在服务端使用 | 仅在客户端使用 | 仅在客户端使用 |
| 类型 | 客户端存储 | 服务器端存储 | webstorage本地存储 | webstorage本地存储 |
四、注意点和扩展点
1. localStorage和sessionStorage的简单使用
//保存数据
localStorage.setItem(“key”, “value”);
sessionStorage .setItem(“key”, “value”);
//读取数据：
let lastname = localStorage.getItem(“key”);
let lastname = sessionStorage .getItem(“key”);
//删除数据语法：
localStorage.removeItem(“key”);
sessionStorage .removeItem(“key”);
在浏览器中如图：
2. JWT
定义
Json web token（JWT）是为了网络应用环境间传递声明而执行的一种基于JSON的开发标准（RFC 7519），该token被设计为紧凑且安全的，特别适用于分布式站点的单点登陆（SSO）场景。JWT的声明一般被用来在身份提供者和服务提供者间传递被认证的用户身份信息，以便于从资源服务器获取资源，也可以增加一些额外的其它业务逻辑所必须的声明信息，该token也可直接被用于认证，也可被加密。
组成
- 头部（header)： 分为声明类型和声明加密的算法
- 载荷（payload)：用来存放实际需要传递的数据
- 签证（signature)：部分是对前两部分的签名，防止数据篡改。
如下是一连串很长的对象，分为三部分，每一部分之间会用 “.” 来分割。
JWT的细节就不在这里补充了，有需要的大佬可以看看文末的文章，也可以查阅相关的资料
总结
推荐阅读：
扫一扫
317
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
