SessionStorage 是一种 Web 存储机制，属于 Web Storage API 的一部分，它允许浏览器以键值对的形式存储数据。与 LocalStorage 相比，SessionStorage 的数据是 临时存储 的，它只在浏览器的当前会话（即一个浏览器标签页或窗口）期间有效。浏览器会话结束时（如关闭标签页或浏览器窗口），存储的数据会被自动清除。
SessionStorage 的基本概念
SessionStorage 提供了一种简单的方式来在浏览器会话中存储数据，且该数据是 仅限于当前会话 的。每个浏览器标签页或窗口都有独立的 SessionStorage，彼此之间的数据不能共享。SessionStorage 与 LocalStorage 类似，但它的生命周期更加短暂。
它的主要特性有以下几个方面：
-
会话级存储：数据只在当前浏览器会话期间有效。会话结束时，数据会自动清除。
-
每个标签页独立：每个浏览器标签页或窗口都有独立的 SessionStorage，标签页之间不能共享 SessionStorage 数据。
-
存储容量：SessionStorage 的存储空间通常与 LocalStorage 相同，通常为 5MB 或更多，具体取决于浏览器。
-
同步 API：SessionStorage 的 API 是同步的，意味着每次读取、存储或删除数据时，操作会立即完成。
如何使用 SessionStorage
SessionStorage 使用 键值对 存储数据。与 LocalStorage 类似，SessionStorage 提供了 setItem()、getItem()、removeItem() 和 clear() 等方法来操作数据。
存储数据
你可以使用 sessionStorage.setItem(key, value) 方法将数据存储在 SessionStorage 中。与 LocalStorage 一样，值必须是字符串，如果要存储对象或数组，需要先将其转换为字符串。
// 存储数据
sessionStorage.setItem('username', 'JohnDoe');
sessionStorage.setItem('age', '30');获取数据
通过 sessionStorage.getItem(key) 方法获取存储的值。如果该键不存在，返回 null。
// 获取数据
const username = sessionStorage.getItem('username'); // "JohnDoe"
const age = sessionStorage.getItem('age'); // "30"删除数据
使用 sessionStorage.removeItem(key) 方法删除指定的键值对。
// 删除某个键值对
sessionStorage.removeItem('username');清空所有数据
sessionStorage.clear() 可以删除存储在 SessionStorage 中的所有数据。
// 清空所有存储的数据
sessionStorage.clear();3. SessionStorage 与 LocalStorage 的比较
| 特性 | SessionStorage | LocalStorage |
|---|---|---|
| 存储容量 | 5MB 或更多，取决于浏览器 | 5MB 或更多，取决于浏览器 |
| 生命周期 | 仅在当前会话（标签页）有效，会话结束时删除 | 永久存储，直到显式删除 |
| 数据隔离性 | 不同标签页、不同窗口的数据隔离 | 同一域下的数据共享 |
| 存储方式 | 键值对，字符串 | 键值对，字符串 |
| 传输到服务器 | 不会随每个请求自动发送 | 会随每个 HTTP 请求自动发送到服务器 |
| API 异步性 | 同步 API | 同步 API |
| 适用场景 | 临时存储会话信息，如用户登录状态、购物车等 | 长期存储用户设置、偏好、浏览历史等 |
SessionStorage 的使用场景
会话管理
SessionStorage 适用于存储和管理 会话级数据，例如用户的登录状态、表单填写状态等。在用户关闭标签页或浏览器窗口时，数据会被自动清除。
例如，存储用户登录状态：
sessionStorage.setItem('isLoggedIn', 'true');表单数据
在多步骤表单中，SessionStorage 可以临时存储用户输入的数据，使得用户可以在不同页面之间导航而不丢失填写的内容。关闭标签页或窗口后，数据会被清除，确保不会有过期的临时数据残留。
sessionStorage.setItem('userInput', 'example text');临时缓存
SessionStorage 也适合用作缓存机制，用于存储临时数据，如从服务器获取的数据，以便在用户会话中重复使用，避免多次请求相同的数据。
例如，缓存某次 API 请求的响应数据：
const apiResponse = { data: 'some data' };
sessionStorage.setItem('apiData', JSON.stringify(apiResponse));单页应用（SPA）
在单页应用中，SessionStorage 可以用来存储当前用户的状态信息，例如当前浏览的页面或滚动位置，确保即使在用户切换路由时，某些状态不会丢失。
sessionStorage.setItem('currentPage', 'profile');SessionStorage 的优缺点
它的优点主要有以下几个方面：
-
临时存储：SessionStorage 数据仅在浏览器会话期间有效，浏览器关闭后会自动清除，确保数据不会残留。
-
较大的存储空间：通常提供比 Cookie 更大的存储空间（通常为 5MB 或更多），比 Cookie 更适合存储较多的数据。
-
同步操作：SessionStorage 提供同步的 API，操作简单直观。
-
跨页面、跨请求有效：数据在同一标签页中有效，即使用户在当前页面和其他页面之间切换，数据仍然存在。
它的缺点主要有以下几个方面：
-
生命周期短：数据会在会话结束时被删除，因此不适用于长期存储。
-
只能存储字符串：与 Cookie 和 LocalStorage 一样，SessionStorage 也只能存储字符串类型的数据，其他类型的数据需要进行序列化。
-
不能跨标签页共享：SessionStorage 在不同标签页或窗口之间无法共享，且标签页关闭时数据会丢失。
-
同步 API：SessionStorage 使用的是同步 API，虽然操作简便，但当存储的数据量较大时，可能会导致性能问题，影响页面的响应性。
7. 总结
SessionStorage 存储在浏览器中，任何通过浏览器运行的脚本都可以访问其数据，因此要避免存储敏感信息，如密码或支付信息。由于 SessionStorage 容易受到 XSS 攻击，恶意脚本可能窃取其中的数据。为确保安全，避免将敏感数据存储在其中，并始终使用 HTTPS 加密传输数据，防止中间人攻击。
SessionStorage 是一种用于浏览器会话级数据存储的机制，适合存储临时数据，如用户登录状态、表单填写状态和缓存数据。与 LocalStorage 相比，SessionStorage 的生命周期较短，它的数据仅在浏览器会话期间有效，浏览器关闭时会被清除。SessionStorage 提供了 同步的 API，易于使用，但也有一些限制，如无法跨标签页共享数据、只能存储字符串等。
在使用 SessionStorage 时，适合存储不需要长久保留的数据，且需要注意避免存储敏感信息，以防数据泄露。