开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第11天，点击查看活动详情

前言

本篇文章主要讲cookie、sessionStorage 、localStorage 、 token他们之间的区别，基本概念问题这边不做介绍。

一 . 说一说cookie sessionStorage localStorage 区别？

1. 存储位置

共同点：C,S,L都是浏览器的本地存储

区别：C是由服务器端写入，S,L是由前端写入。

2. 生命周期

C是由服务器端在写入的时候就设置好的，L是写入就一直存在，除非手动清除，S是页面关闭就自动清除。

3. 存储空间

C是4KB，S和L都5M

4. 数据共享

C,S,L都遵循同源原则，但S限制必须是同一页面。

5. 发送请求

前端向后端发送请求时自动携带C中的数据，但S、L不会

6. 应用场景

C一般用于存储登录验证信息SessionID或者token,L长英语存储不易变动的数据，减轻服务器压力，S用来检测用户是否刷新进入页面，如音乐播放器恢复播放进度条功能

二. cookie和token的区别?

1.cookie:

1. 用户登录成功后，会在服务器存一个session，同时发送给客户端一个cookie，这个cookie里面有唯一标识该用户的sessionID

2. 数据需要客户端和服务器同时存储

3. 用户再进行请求操作时，需要带上cookie，在服务器进行验证

4. cookie是有状态的

2.token:

1. 用户进行任何操作时，都需要带上一个token,token的存在形式有很多种，header/requestbody/url 都可以

2. 这个token只需要存在客户端，服务器在收到数据后，进行解析

3. token是无状态的

token相对cookie的优势是什么？

1. 支持跨域访问 ，将token置于请求头中，而cookie是不支持跨域访问的；

2. 无状态化， 服务端无需存储token ，只需要验证token信息是否正确即可，而session需要在服务端存储，一般是通过cookie中的sessionID在服务端查找对应的session；

3. 无需绑定到一个特殊的身份验证 方案（传统的用户名密码登陆），只需要生成的token是符合我们预期设定的即可；

4. token由于服务器端不存储会话，所以可扩展性强，token更适用于APP中

5. 避免CSRF跨站伪造攻击 ，还是因为不依赖cookie；

6. 非常适用于RESTful API ,这样可以轻易与各种后端（java，.net，python…）相结合，去耦合

三. token 能放在cookie中吗?

能。不设置cookie有效期、重新登录重写cookie覆盖原来的cookie。

token认证流程如下：

1. 客户端使用用户名跟密码请求登录
2. 服务端收到请求，去验证用户名与密码
3. 验证成功后，服务端签发一个 token ，并把它发送给客户端
4. 客户端接收 token 以后会把它存储起来，比如放在 cookie 里或者 localStorage 里
5. 客户端每次发送请求时都需要带着服务端签发的 token（把 token 放到 HTTP 的 Header 里）
6. 服务端收到请求后，需要验证请求里带有的 token ，如验证成功则返回对应的数据

提示：token一般是用来判断用户是否登录的，它内部包含的信息有：uid(用户唯一的身份标识)、time(当前时间的时间戳)、sign（签名，token 的前几位以哈希算法压缩成的一定长度的十六进制字符串） token可以存放在Cookie中，token 是否过期，应该由后端来判断，不该前端来判断，所以token存储在cookie中只要不设置cookie的过期时间就ok了，如果 token 失效，就让后端在接口中返回固定的状态表示token 失效，需要重新登录，再重新登录的时候，重新设置 cookie 中的 token 就行。