前言
浏览器存储主要是分为cookie、web storage。
web storage中又包含localStorage和SessionStorage
本文主要讲cookie,localStorage,SessionStorage,token
Cookie
http为无状态的，为了记录用户的状态，所以就出现了cookie
例如前端登陆的时候，会给后端发送一些用户的账号密码的信息，后端进行存储该用户，并且返回一个响应头就包含Set-Cookie头部，前端获取到cookie之后进行存储，接着发送请求的时候携带cookie。
缺点:
- 只能存储4MB，存储大小有限。
- 安全方面:不安全，不法分子可以看到cookie内容，进行解析，来伪造cookie，获取到用户信息。
- 性能方面:
Cookie请求每次都会携带上完整的Cookie，随着请求数增多，造成性能浪费。
session
计算机里服务器为了区分各个浏览器客户端是哪一个发送的请求，为每个web客户端加的身份标识就是session，用于区别不同web客户端的的请求。
服务器是怎样辨别用户?利用的是session_id。客户端传来cookie，在cookie里面存储着seesion_id，然后服务端能够把这个session_id解析出来进行识别用户。
一般建议:登录这些重要信息存储在session里面，其他的信息存储在cookie里。
web Storage
Local Storage
本地存储，同一个域名下，会存储相同的一段 Local Storage。
有着getItem和setItem来获取存储内容和设置存储的内容。
//设置值
localStorage.setItem("name", "merikle");
let obj = { name: "merikle", age: 18 };
localStorage.setItem("info", JSON.stringify(obj));
//取值
let name = localStorage.getItem("name");
let info = JSON.parse(localStorage.getItem("info"));
特点:
- 可以存储5MB
- 只存在于客户端，不与服务端进行通信
- 生命周期:永久，除非手动删除
Session Storage
用法和Local Storage一样，但他们的生命周期不一样，Session Storage生命周期是浏览器关闭它就销毁了。
应用场景:
- 对表单信息做维护。用户刷新页面不丢失。
- 存储本次浏览记录。看过的页面不怕找不到。
token
token是用户身份的验证方式，我们通常叫它：令牌。
token的组成:
"用户 id" + "过期时间" + SHA1("用户 id" + "用户口令" + "过期时间" + "SecretKey")
应用场景:
- 输入账号密码进行登录
- 将商品加入购物车
前后端通信:
- 用户注册输入了账号密码，此时向后端发送了请求，后端在数据库中进行存储该用户，分配用户id根据id，并且通过设置一些其他的信息来生成token，发送给前端
- 前端获取到token，存储到浏览器的本地存储
- 每次请求都要携带token
- 后端根据提取到前端每次传入来的token和数据库的token来进行对比。
对比一：如果两个 token 值相同， 说明用户登录成功过!当前用户处于登录状态！
对比二：如果没有这个 token 值, 则说明没有登录成功。
对比三：如果 token 值不同: 说明原来的登录信息已经失效,让用户重新登录。
