本地存储-sessionStorage-会话存储的特点-前端-HTML5-书闪BookChips

218 - 本地存储 - sessionStorage - 会话存储的特点

作者：

贺及楼

成为作者

更新日期：2025-02-27 18:14:42

本地存储 - sessionStorage - 会话存储的特点

在前端开发中，数据的存储是一个常见的需求。HTML5 为我们提供了多种本地存储的方式，其中 sessionStorage 是一种非常实用的会话存储机制。本文将详细介绍 sessionStorage 的特点，并通过演示代码和生动的例子来帮助大家更好地理解。

什么是 sessionStorage

sessionStorage 是 HTML5 新增的一个会话存储对象，它允许我们在浏览器会话期间临时保存数据。会话期间指的是用户打开一个浏览器窗口，直到该窗口关闭（包括标签页关闭）的这段时间。与 localStorage 不同，sessionStorage 中的数据在会话结束后会被自动清除。

sessionStorage 的特点

1. 数据仅在当前会话有效

sessionStorage 中的数据仅在当前浏览器窗口（或标签页）的会话期间有效。当用户关闭该窗口或标签页时，存储的数据会被自动清除。这一特点使得 sessionStorage 非常适合存储一些临时的数据，例如用户在一个页面中进行的表单填写进度，当用户关闭页面后，这些数据就不再需要保留。

演示代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>sessionStorage 示例</title>
</head>
<body>
    <button id="saveData">保存数据到 sessionStorage</button>
    <button id="getData">从 sessionStorage 获取数据</button>
    <p id="result"></p>
    <script>
        const saveDataBtn = document.getElementById('saveData');
        const getDataBtn = document.getElementById('getData');
        const result = document.getElementById('result');
        saveDataBtn.addEventListener('click', function () {
            sessionStorage.setItem('message', '这是存储在 sessionStorage 中的数据');
            result.textContent = '数据已保存到 sessionStorage';
        });
        getDataBtn.addEventListener('click', function () {
            const data = sessionStorage.getItem('message');
            if (data) {
                result.textContent = '从 sessionStorage 获取的数据：' + data;
            } else {
                result.textContent = 'sessionStorage 中没有数据';
            }
        });
    </script>
</body>
</html>

在上述代码中，我们通过 sessionStorage.setItem() 方法将数据保存到 sessionStorage 中，通过 sessionStorage.getItem() 方法从 sessionStorage 中获取数据。当你关闭当前页面再重新打开时，之前保存的数据将不再存在。

2. 数据独立于不同窗口或标签页

每个浏览器窗口（或标签页）都有自己独立的 sessionStorage 存储空间。这意味着在一个窗口中存储的数据不会影响其他窗口中的 sessionStorage。例如，你在一个标签页中保存了用户的登录状态，在另一个标签页中并不会共享这个数据。

3. 存储大小限制

sessionStorage 有一定的存储大小限制，通常为 5MB 左右，但具体大小可能因浏览器而异。如果尝试存储超过这个限制的数据，会抛出 QuotaExceededError 异常。

4. 仅存储字符串类型的数据

sessionStorage 只能存储字符串类型的数据。如果需要存储其他类型的数据，例如对象或数组，需要先将其转换为字符串（通常使用 JSON.stringify() 方法），在获取数据时再将其转换回原来的类型（使用 JSON.parse() 方法）。

演示代码：

// 存储对象
const user = { name: 'John', age: 30 };
sessionStorage.setItem('user', JSON.stringify(user));
// 获取对象
const storedUser = sessionStorage.getItem('user');
const parsedUser = JSON.parse(storedUser);
console.log(parsedUser.name); // 输出: John

sessionStorage 的使用场景

表单填写进度保存：当用户在一个多步骤的表单中填写信息时，可以使用 sessionStorage 保存每一步的填写进度，防止用户意外关闭页面而丢失数据。
临时状态管理：例如保存用户在一个页面中的临时选择，如筛选条件、排序方式等，当用户关闭页面后这些状态就不再需要。

总结

特点	描述
会话有效	数据仅在当前浏览器窗口（或标签页）的会话期间有效，关闭窗口后数据自动清除
独立存储	每个窗口或标签页有自己独立的 `sessionStorage` 存储空间
大小限制	通常有 5MB 左右的存储大小限制
字符串存储	只能存储字符串类型的数据，其他类型需先转换为字符串

通过了解 sessionStorage 的这些特点，我们可以在前端开发中更加灵活地使用它来存储临时数据，提升用户体验。