JavaScript基础-window.sessionStorage

一、前言

在前端开发中，我们经常需要在浏览器端存储一些临时数据，例如用户的登录状态、表单输入缓存、页面跳转参数等。除了使用 Cookie 和 localStorage，JavaScript 还提供了一个轻量级的数据存储方式 —— sessionStorage。

本文将带你全面了解 window.sessionStorage 的使用方法，包括它的生命周期、API 操作、适用场景及常见问题，帮助你掌握这一重要的前端存储工具。

二、什么是 sessionStorage？

✅ 定义：

sessionStorage 是 Web Storage API 提供的一种客户端存储机制，它允许你在浏览器中以键值对的形式临时保存数据。

⚠️ 关键特性：

• 存储的数据仅在当前会话期间有效（关闭页面或标签页后数据会被清除）
• 同一个网站的不同标签页之间互不影响
• 数据不会自动发送到服务器

✅ 支持浏览器：

现代主流浏览器均支持 sessionStorage，包括 Chrome、Firefox、Safari、Edge 等。

三、sessionStorage 的基本用法

✅ 1. 存储数据：setItem(key, value)

sessionStorage.setItem('username', 'Qwen');

✅ 2. 读取数据：getItem(key)

const name = sessionStorage.getItem('username');
console.log(name); // 输出: Qwen

✅ 3. 删除数据：removeItem(key)

sessionStorage.removeItem('username');

✅ 4. 清空所有数据：clear()

sessionStorage.clear();

✅ 5. 获取所有键名：key(index)

for (let i = 0; i < sessionStorage.length; i++) {
    const key = sessionStorage.key(i);
    const value = sessionStorage.getItem(key);
    console.log(`${key}: ${value}`);
}

四、sessionStorage 与 localStorage 的区别

五、sessionStorage 的典型应用场景

✅ 1. 页面间临时传参

适用于从 A 页面跳转到 B 页面时传递参数，如订单编号、用户 ID 等。

// 页面A：存储数据
sessionStorage.setItem('orderId', '1001');

// 页面B：读取数据
const orderId = sessionStorage.getItem('orderId');
console.log(orderId); // 输出: 1001

⚠️ 注意：跨域页面无法访问相同 sessionStorage。

✅ 2. 表单数据缓存

当用户填写了部分表单但刷新页面时，可以通过 sessionStorage 缓存已填写内容。

<input type="text" id="nameInput" placeholder="请输入姓名">
<button onclick="saveForm()">保存草稿</button>
<button onclick="loadForm()">恢复草稿</button>

<script>
function saveForm() {
    const name = document.getElementById('nameInput').value;
    sessionStorage.setItem('formName', name);
}

function loadForm() {
    const savedName = sessionStorage.getItem('formName');
    if (savedName) {
        document.getElementById('nameInput').value = savedName;
    }
}
</script>

✅ 3. 控制页面行为（如只提示一次）

某些弹窗或提示信息只需要在本次会话中显示一次。

if (!sessionStorage.getItem('hasShown')) {
    alert("欢迎来到本页面！");
    sessionStorage.setItem('hasShown', 'true');
}

六、注意事项与常见错误

七、进阶技巧：结合 JSON 使用复杂对象

const user = { name: "Qwen", age: 25 };
sessionStorage.setItem('user', JSON.stringify(user));

const storedUser = JSON.parse(sessionStorage.getItem('user'));
console.log(storedUser.name); // 输出: Qwen

八、总结对比表

九、结语

感谢您的阅读！如果你有任何疑问或想要分享的经验，请在评论区留言交流！