二进制的流浪
0%

会话技术

发表于 更新于 分类于
本文字数： 2.7k 阅读时长 ≈ 2 分钟

在互联网发展之初，Web主要用于文档浏览，服务器无需维护客户端的用户状态，因此HTTP请求是无状态的。然而随着互联网的快速发展，无状态的请求已经无法满足需求，因此就引入了会话技术。

会话技术 （Session）

初代篇——Cookie

简介

  1. cookie是一种存储在用户本地终端（一般为浏览器）上的数据

  2. 文件大小一般不超过4kb

  3. 数据以key-value形式存在

  4. 可以设置过期时间expires（生命周期）

    • 会话型

      当expires属性缺省时，为会话型cookie，且cookie仅保存在内存中，并在用户关闭浏览器时失效

      • 持久型

        cookie会存储在用户的硬盘中，直到生命周期结束或用户进行某些操作例如”登出”等结束会话时才会失效

  5. cookie由服务器生成，发送给浏览器，浏览器把cookie以key-value的形式存储起来，下次请求该服务器时把该cookie一并发送给服务器。

  6. 所有 cookie 都会作为请求头部由浏览器发送给服务器

  7. cookie遵循同源策略限制（即域名、端口等必须一致）

升级篇——Session

1. 简介

session是服务器端存储的一个对象（存储在内存中），主要用于存储访问过服务器的已验证的客户端用户信息。但当服务器重启，内存会销毁，存储的用户信息会消失。

2. 工作原理

客户端用户会使用账号、密码登录服务器，服务器验证成功后，会生成并存储一个sessionid来标记用户，同时会将sessionid通过cookie发送给客户端，客户端会将接收到的sessionid保存到cookie中。客户端再次访问服务器时，会默认携带cookie。

因此，session也是基于cookie的，所以它也遵循同源限制策略。

3. Session持久化

由于session是存储在内存中，因而服务器一旦重启，session就会消失。将session存储在数据库中可以解决这一问题，实现session的持久化。

流行篇—Token

1. 简介

Token是由服务器生成的一串字符串，并将其发送给客户端由客户端存储，而服务端则仅保存密钥，且此密钥不能泄露。

下面以JSON Web Token为例。

2. JWT原理

服务器认证用户后，会生成一个JSON对象（如下代码），返回给客户端。以后用户与服务端通信时，都会发送这个JSON对象，服务器会依据这个JSON对象来识别用户身份。但为了防止用户/中间人篡改数据，服务端会在生成这个对象时，加上签名。这样，服务端就不需要保存任何session数据了，因此服务端变成了无状态，从而比较容易实现扩展。

1
2
3
4
5
{
  "username": "Tom",
  "authority": "admin",
  "expiration": "2021-12-25"
}

3. JWT数据结构

它由三部分组成，分别是header（头）、payload（负载）、signature（签名）。

  1. header

    包含signature的算法

  2. payload

    包含用户信息，用于识别对应请求的客户端用户

  3. signature

    是通过特定算法将密钥、payload、header三部分加密而形成的字符串

最后，token的形式为header.payload.signature的字符串，用于进行前后端的用户数据传递，以维护用户登录状态。

番外篇——Web Storage

随着 Web 应用的发展，客户端存储的使用越来越广泛，其中最简单且兼容性最好的是 Cookie，然而 cookie 也存在很多缺陷。

Web Storage 的目的是解决客户端存储不需要频繁发送回服务器的数据时使用 cookie 的问题。

Web Storage 定义了两个对象：sessionStorage, localStorage（不受页面刷新影响而存储数据的两种方式）。浏览器通过 Web Storage 以同步阻塞的方式实现存储写入，因此数据会被立即提交存储。

1. Storage 类型

Storage 类型用于保存名/值对数据，即 key/value。sessionStorage 和 localStorage 都是 Storage 的实例。Storage 类型只能存储字符串。

Storage 的方法：

  1. clear()
  2. getItem(name)
  3. key(index)
  4. removeItem(name)
  5. setItem(name, value)

2. sessionStorage ——跨会话的存储机制

  1. sessionStorage 用于本地存储一个会话（session）中的数据
  2. 这些数据只有在同一个会话中的页面才能访问使用（在多页应用程序中有限制），并在会话结束后销毁数据
  3. 因此 sessionStorage 不是一种持久化的本地存储，仅仅是会话级别的存储
  4. 不受页面刷新影响

3. localStorage——永久存储机制

  1. localStorage 用于客户端持久存储数据
  2. 除非主动删除数据，否则数据永远不会过期
  3. 访问 localStorage 的数据，页面需要来自同一个域（子域不可以）、在相同的端口上使用相同的协议
  4. 不受页面刷新影响

4. 两种方式的主要区别

  1. 存储时间：

    • localStorage 数据永久保存：存储在 localStorage 中的数据会保留，直到通过 JS 主动删除或用户清除浏览器缓存。因此 localStorage 的数据在关闭窗口、标签页或重启浏览器后，仍然存在。

    • sessionStorage 数据与页面会话时间有关：sessionStorage 的数据在页面或浏览器关闭后就消失了。

  2. 访问权限：

    • 访问使用修改 localStorage 数据：页面需要来自同一个域（子域不可以）、在相同的端口上使用相同的协议
    • sessionStorage更严格：需要是同一个会话的页面，即最初存储数据的页面

5. 限制

  1. 一般来说，客户端数据大小限制为每个源 （协议、域和端口）5MB

IndexedDB

Indexed Database API 简称 IndexedDB，是浏览器中存储结构化数据的一种方案。IndexedDB 用于代替目前已废弃的 Web SQL Database API。

IndexedDB 的设计几乎完全是异步的。

1. 特点

  1. 键值对存储：IndexedDB 内部采用对象仓库（object store）存放数据
  2. 异步：与 Storage 形成对比，异步设计是为了防止大量数据的读写会拖慢页面的表现
  3. 支持事务：不存在只改写一部分数据的情况。一个事务中的一系列的操作步骤中，只要有一步失败，整个事务就都取消。
  4. 同源限制：网页只能访问自身域名下的数据库
  5. 大存储空间：一般来说不小于250 MB
  6. 支持二进制存储：例如 ArrayBuffer 对象和 Blob 对象