Cookie:
Cookie:全称 HTTP Cookie,是浏览器存储数据的一种方式。存储在用户本地,一般会随着浏览器发送的请求自动发送到服务器端。
Cookie 出现的原因:
Cookie 的出现,是来弥补 HTTP 无状态的问题的。
由于 HTTP 是无状态的,因此每次连接都需要重新验证身份。Cookie 可以作为一个状态保存的状态机,用来保存用户的相关登录状态;当第一次验证通过后,服务器可以通过 Set-Cookie
令客户端将自己的 Cookie 保存起来;当下一次再发送请求的时候,直接带上 Cookie 即可,服务器在检测到客户端发送的 Cookie 与其保存的 Cookie 值保持一致时,则直接信任该连接,不再进行验证操作。
Cookie 的缺点:
- Cookie 会在每次浏览器与服务器进行同源通信时都自动包含在 HTTP 请求中,无论服务器是否需要这些数据,可能会浪费一部分的带宽。
同域会携带 Cookie,跨域不会。
- 单个 Cookie 有大小限制,每个 Cookie 的存储容量很小,最多只有 4KB 左右。
- 每个域名下的 Cookie 有数量限制,不同浏览器的限制不同,当超过域名数量限制之后,再设置新的 Cookie,浏览器就会清除最开始设置的 Cookie。
Cookie 的工作流程:
一般来说,都是第一次登录请求后,服务器将 Cookie 返回给浏览器,之后浏览器每次请求都自动带上,以让服务器识别用户身份。
- 当服务器接收到 HTTP 请求,要返回 HTTP 响应时,可以生成一个 Cookie 并将其设置到响应头
Set-Cookie
中。 - 浏览器在接收到响应后会自动将 Cookie 保存下来。
- 之后浏览器对该服务器的每一次请求,都会自动地通过请求头
cookie
将 Cookie 发送给服务器。 - 服务器就可以根据 Cookie 跟踪客户端状态。
Cookie 的属性:
只有 domain、path、name 这三个字段都相同的时候,才是同一个 Cookie。
只有 domain、path、secure 都满足条件,并且还未过期的 Cookie,才会随着 HTTP 请求发送到服务器端。
- name 名称、value 值:是最重要的两个属性,创建 Cookie 时必须填写。其他属性可以不写使用默认值。
Cookie 的名称或值如果包含非英文字母,则写入时需要使用
encodeURIComponent()
编码,读取时使用decodeURIComponent()
解码。document.cookie=`username=${encodeURIComponent('小明')}`
- domain:域。限定了可以访问当前 Cookie 的域名范围。设置了 domain 的话,当前Cookie 只能在设置的域名及其子域名下访问。
不设置 domain 的话,浏览器会自动把 Cookie 写入当前的域名下。
使用 JS 只能读写当前域或者父域的 Cookie,无法读写其他域的 Cookie。 - path:路径。限定了可以访问当前 Cookie 的地址范围。设置了 path 的话,当前 Cookie 只能在设置的路径及其下级路径下访问。
不设置 domain 的话,浏览器会自动把 Cookie 写入当前的根路径下。
使用 JS 只能读写当前路径或者上级路径的 Cookie,无法读写下级路径的 Cookie。 - expires、
max-age
:到期时间。失效的 Cookie 会被浏览器自动清除。- expires:值为 Date 类型,表示具体什么时间过期。
max-age
:值为数字,表示当前时间再过多少秒后过期,单位是秒。如果max-age
的值为 0 或者负数,那么这个 Cookie 会被删掉。
如果没有设置到期时间,这样的 Cookie 称为会话 Cookie,它存在于内存中。当会话结束,也就是浏览器关闭(不是关闭当前标签页,而是整个浏览器都必须被关闭),Cookie 会被自动清除。
// 属性之间由一个分号和空格隔开 document.cookie=`username=Lee; expires=${new Date('2022-10-01 00:00:00')}` document.cookie='username=Lee; max-age=1000'
- httpOnly:设置了 httpOnly 属性的 Cookie 不能通过 JS 去读写,只能后端来设置。
- secure:限制了只有在使用 HTTPS 而不是 HTTP 的情况下才可以将 Cookie 发送给服务器端。
通过 JS 操作 Cookie:
前后端都可以操作 Cookie。
写入 Cookie:
document.cookie='username=Lee'
document.cookie='age=18'
document.cookie='username=Lee;age=18' // 错误。不能这样一起设置,只能一个一个设置
读取 Cookie:
读取的是一个由名值对构成的字符串,每个名值对之间由一个分号和空格隔开。
读取的是全部的 Cookie,无法根据具体的名读取对应的值。
document.cookie
修改 Cookie:
只需要新建一个同名的 Cookie 来覆盖原来Cookie。
删除 Cookie:
可以设置 max-age
到期时间等于 0 或者负数;或者设置 expires 为当前时间之前的时间,即可删除 Cookie。
document.cookie='username=Lee; max-age=0'
Token:
Token:令牌。就是类似 Cookie 的一种验证信息。客户端通过登录验证后,服务器会返回给客户端一个加密的 Token;当客户端再次向服务器发起连接时,带上 Token;服务器直接对 Token 进行校验即可完成身份校验。
Token 出现的原因:
Cookie 作为 HTTP 规范,存在自动保存、自动发送、跨域限制、限制存储数量和大小等问题。相较于 Cookie,Token 需要自己存储、自己发送、不存在跨域限制、存储数量和大小更多更大,因此 Token 更加的灵活。
Token 的工作流程:
和 Cookie 类似。
一般来说,都是第一次登录请求后,服务器将 Token 返回给浏览器,之后浏览器在需要的请求中带上,以让服务器识别用户身份。