sessionStorage用于临时存储会话数据，关闭标签页后清除，支持同源单标签页的键值对操作，适合表单暂存与状态管理，仅能存储字符串且容量有限，敏感信息需避免明文保存。
在HTML5中，sessionStorage 提供了一种在浏览器中临时保存数据的方式，数据仅在当前会话期间有效，关闭标签页或浏览器后自动清除。它非常适合用于管理用户在单个浏览会话中的状态信息，比如表单数据、页面状态或临时标识。
sessionStorage的基本特性
sessionStorage 是 Web Storage API 的一部分，与 localStorage 类似，但生命周期更短：
- 数据保存在同一个源（协议 + 域名 + 端口）下
- 仅在当前浏览器标签页的会话中可用
- 关闭标签页后数据被清除
- 不同标签页之间的 sessionStorage 相互隔离，即使打开同一网站
常用操作方法
sessionStorage 提供了简单的键值对操作接口，所有数据都以字符串形式存储：
保存数据：setItem()
立即学习“前端免费学习笔记（深入）”；
sessionStorage.setItem('username', '张三');sessionStorage.setItem('cartCount', '5');
读取数据：getItem()
const name = sessionStorage.getItem('username'); // 返回 "张三"const count = sessionStorage.getItem('cartCount'); // 返回 "5"
删除数据：removeItem()
sessionStorage.removeItem('cartCount');
清空所有数据：clear()
sessionStorage.clear(); // 删除当前会话所有数据实际应用场景示例
一个常见的使用场景是在多步骤表单中暂存用户输入：
// 第一步填写姓名function saveStep1() {
const name = document.getElementById('name').value;
sessionStorage.setItem('step1_name', name);
}
// 第二步加载之前的数据
function loadPreviousData() {
const name = sessionStorage.getItem('step1_name');
if (name) {
document.getElementById('review-name').textContent = name;
}
}
另一个用途是记录用户在页面间的跳转状态，比如是否已执行过某项提示：
if (!sessionStorage.getItem('hasSeenTutorial')) {showTutorialPopup();
sessionStorage.setItem('hasSeenTutorial', 'true');
}
注意事项与限制
使用 sessionStorage 时需要注意以下几点：
- 只能存储字符串，对象需用 JSON.stringify() 转换
- 容量限制通常为5-10MB，具体取决于浏览器
- 不支持跨域和跨标签页共享
- 敏感信息不应明文存储，存在XSS风险
- 在隐私模式下可能不可用
例如存储对象：
const user = { id: 123, role: 'admin' };sessionStorage.setItem('user', JSON.stringify(user));
const savedUser = JSON.parse(sessionStorage.getItem('user')); 基本上就这些。sessionStorage 使用简单，适合短期状态管理，合理使用能提升用户体验。
