Cookie、Session、LocalStorage、SessionStorage

2022年8月1日大约 3 分钟

HTTP 是无状态的协议,无法记录历史状态,服务端无法确认当前访问者的身份信息,无法分辨上一次的请求发送者和这一次的发送者是不是同一个人。CookieSession 是常用的会话跟踪技术。

客户端向服务端发送首次请求,服务端返回包含 Set-Cookie 头部的响应通知客户端保存 Cookie。在后续的请求中,客户端每次都在请求头携带上 Cookie 发送给服务端。

缺点:不安全,存储量小

Session

  1. 客户端向服务端发送首次请求,服务端会创建一个Session 保存客户端信息,同时生成一个唯一的 SessionID,并保存在服务端,再返回包含 SessionID 的响应给客户端。
  2. 客户端收到后,将 SessionID 存入 Cookie 中。
  3. 在后续的请求中,客户端每次都在请求头携带记录有 SessionIDCookie 发送给服务端,服务端根据 SessionID 匹配对应的 Session 获取客户端状态。

如果浏览器禁用了 Cookie,可以通过将 SessionID 写入 URL 的方式发送给服务端。

缺点:服务器内存消耗大

存储容量生命周期存储位置安全性
Cookie4KB不设置过期时间:关闭浏览器后被清除
设置过期时间:在过期时间后失效
客户端
Session5MB关闭页面或浏览器失效服务端

比喻:

  • Session 像用户档案表,里面包含了用户的认证信息和登录状态等信息,保存在服务端。
  • Cookie 像用户通行证,保存在客户端。

LocalStorage

LocalStorage 是 HTML5 新增的存储对象,用于在浏览器本地长久保存数据。

SessionStorage

SessionStorage 是 HTML5 新增的存储对象,用于在浏览器本地临时保存数据。

打开多个相同的 URL 的标签页,会创建各自的 SessionStorage

Cookie、LocalStorage 与 SessionStorage 的区别

存储容量生命周期存储位置
Cookie4KB不设置过期时间:关闭浏览器后被清除
设置过期时间:在过期时间后失效
客户端,每次请求都会携带
LocalStorage5MB(视浏览器而定)不会自动过期,除非用户手动清除客户端
SessionStorage5MB仅在当前网页会话下有效,关闭页面或浏览器后会被清除客户端

Token

JWT(JSON Web Token) 一种基于 token 的跨域认证方案

  1. 客户端携带用户的登录凭证(一般为用户名和密码)向服务端发送首次请求
  2. 服务端查询数据库验证用户有效性,如果有效会根据储存在服务端秘钥对登录凭证进行签名生成 token,并返回给客户端
  3. 客户端收到 token 信息,可以保存在cookie或者 localStorage
  4. 后续请求中,客户端都在请求头的 Authorization 字段写上token信息,服务端再对 token 解密取得用户登录凭证,根据登录凭证再去数据库中对相应的用户数据进行操作。

参考资料