cookie, session, token, localStorage, sessionStorage的区别

1、 cookie

HTTP协议是无状态的协议。一旦数据交换完毕，客户端与服务器端的连接就会关闭，再次交换数据需要建立新的连接。为解决该问题，引入cookie。
第一次向服务端发送http请求时，服务端接收后就会创建session，并响应到客户端，响应头中包含Set-Cookie头部 ，sessionId等，Cookie被客户端存储在本地。
当客户端再次访问该服务端时，就会把该cookie一起添加到http请求中，发送到服务器，服务端就能分解 cookie 解析出 sessionId 来在 session 列表中查找出对应的 session ，就可以识别当前用户是否登录。

2、session

session的作用和cookie的基本类似，但是两者的不同在于，cookie存储在客户端端，session保存在服务器端，是在服务器端使用的一种记录客户端状态的机制。
他会在客户端第一次访问服务端时生成，后面客户端访问时，会携带session_id，服务器就会在自身的储存中查询该用户的状态。

3、token

token 也称作令牌，由uid+time+sign[+固定参数]，当我们的客户端频繁的向服务端请求数据的时候，服务端就需要频繁的用密码和账户名去对比，为了避免这个频繁的操作。token就应运而生了，只要在登录了一次后，一般就会存储 token 在客户端的 localStorage 中，每次请求的时候带上就好了。
token可以避免CSRF攻击，被CSRF攻击是因为我们的 cookie 别劫持了，攻击者伪造我们的请求，在我们不知道的情况下，拿到我们的 cookie 去访问服务器。但token不同，token是开发者为了防范csrf而特别设计的令牌，浏览器不会自动添加到headers里，攻击者也无法访问用户的token，所以提交的表单无法通过服务器过滤。

4、localStorage

cookie的存储很小，4K左右，因为大了会影响每次访问携带的，而大多数浏览器支持2M以上，我们就可以使用localStorage来存储。
Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而localStorage仅仅是为了在本地“存储”数据而生。
localStorage 最主要的特点是：

• 在同源的所有标签页和窗口之间共享数据。
• 数据不会过期。它在浏览器重启甚至系统重启后仍然存在。除非你去删除了。

5、sessionStorage

sessionStorage 和localStorage大体上是相近的，但有更多的限制条件：

• sessionStorage 的数据只能存在于当前浏览器标签页。具有相同页面的另一个标签页中将会有不同的存储。且在同一标签页下的 iframe 之间是共享的（假如它们来自相同的源）
• 数据在页面刷新后仍然保留，但在关闭/重新打开浏览器标签页后不会被保留。

6、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”);