JS cookie session token locationstorage sessionstorage等的关系

94 阅读3分钟

大学期间老师就着重给我们讲cookie和session的区别,后来自学前端用到的情景也很少。今天把这些都统一记录下。

参考文章有: # 图解|cookie、session、token的那些事儿

# 深入了解浏览器存储--从cookie到WebStorage、IndexedDB

# 你真的了解 Cookie 和 Session 吗

由于HTTP协议是无状态的,每次请求之间都是相互独立,有时候给服务器发送请求的时候需要附带用户的信息。

cookie

  • 信息存储在客户端,每次发送请求的时候都自动附加在请求头上
  • 大小限制为4K
  • 有安全隐患,早期网站将个人信息存储在cookie中,容易被人获取
  • cookie分为内存cookie和硬盘cookie。内存Cookie由浏览器维护,保存在内存中,浏览器关闭后就消失了,其存在时间是短暂的。 硬盘Cookie保存在硬盘里,有一个过期时间,除非用户手工清理或到了过期时间,硬盘Cookie不会被删除,其存在时间是长期的。 所以,按存在时间,可分为非持久Cookie和持久Cookie。
  • 设置cookie的方法有两种 1.通过响应头里的 Set-Cookie 指定要存储的 Cookie 值
Set-Cookie: id=a3fWa;

2.通过js中的 document.cookie

document.cookie="userName=hello"
  • 过多的cookie会带来性能浪费,不是所有请求都需要cookie中的信息,而这些请求也会携带cookie信息造成性能的浪费。

session

  • session信息存储在服务器中,避免了cookie存储用户信息的安全风险。
  • 用户登录后,服务器会创建一个session对象,并返回一个sessionId,sessionId唯一标识session对象
  • 可以将sessionId存储在cookie中,或者url中,或者请求体中,服务器收到sessionId都会去寻找对应的session对象,获取其中信息。
  • 但是用户大量信息存储在服务器中,对服务器造成很大的存储压力

token(JWT)

token更多用于前后端分离的项目中,session更多用于后端渲染页面的项目中。

Token避免了Session机制带来的海量信息存储问题,也避免了Cookie机制的一些安全性问题。

1.客户端将用户的账号和密码提交给服务器

2.服务器对其进行校验,通过则生成一个token值,将其保存在数据库,同时也返回给客户端,作为后续的请求交互身份令牌

3.客户端拿到服务端返回的token值后,可将其保存在本地,以后每次请求服务器时都携带该token,提交给服务器进行身份校验

4.服务器接收到请求后,解析出其中的Token,再根据相同的加密算法和参数生成Token与客户端的Token进行对比,一致则通过,否则拒绝服务

5.Token验证通过,服务端就可以根据该Token中的uid获取对应的用户信息,进行业务请求的响应

locationstorage、sessionstorage

storage和cookie都是在客户端存储信息的工具,大小都为5左右,但是storage更灵活,存储空间更大,且不用每次都跟随请求发送,逐渐取代cookie的位置。