HTML5的sessionStorage是Web Storage规范中提供的客户端存储方案，它允许开发者在当前浏览器会话的标签页内临时存储键值对数据，数据不会在不同标签页之间共享，关闭当前标签页后存储的所有数据都会被自动清除，非常适合处理页面级的临时数据存储需求。
sessionStorage的基本特性
在使用sessionStorage之前，需要先了解它的核心特性，避免在实际开发中出现不符合预期的使用结果：
- 存储容量通常为5MB左右，比传统的cookie存储容量大很多
- 仅在当前浏览器会话中有效，刷新页面数据不会丢失，关闭标签页或浏览器后数据自动清除
- 存储的数据仅在同源的同标签页内可访问，不同标签页、不同源之间无法共享数据
- 只能存储字符串类型的数据，如果要存储对象或数组，需要先通过JSON.stringify方法转换为字符串
sessionStorage的基础操作方法
sessionStorage提供了几个简单易用的方法来完成数据的增删改查操作，下面逐一介绍每个方法的用法。
1. 存储数据
存储数据可以使用setItem方法，该方法接收两个参数，第一个是键名，第二个是要存储的键值：
// 存储字符串类型的数据
sessionStorage.setItem('username', '张三');
// 存储对象类型的数据，需要先转换为字符串
const userObj = { id: 1, age: 20, hobby: ['读书', '运动'] };
sessionStorage.setItem('userInfo', JSON.stringify(userObj));
除了使用setItem方法，也可以直接使用点语法或者方括号语法赋值：
// 点语法存储 sessionStorage.tempData = '临时测试数据'; // 方括号语法存储 sessionStorage['pageStatus'] = 'loading';
2. 读取数据
读取存储的数据可以使用getItem方法，传入对应的键名即可获取对应的键值，如果键名不存在则返回null：
// 读取字符串类型的数据
const username = sessionStorage.getItem('username');
console.log(username); // 输出：张三
// 读取对象类型的数据，需要先转换为对象
const userInfoStr = sessionStorage.getItem('userInfo');
if (userInfoStr) {
const userInfo = JSON.parse(userInfoStr);
console.log(userInfo.age); // 输出：20
}
同样也可以使用点语法或者方括号语法读取数据：
const tempData = sessionStorage.tempData; console.log(tempData); // 输出：临时测试数据 const pageStatus = sessionStorage['pageStatus']; console.log(pageStatus); // 输出：loading
3. 修改数据
修改数据和存储数据的操作一致，直接对已有的键名重新赋值即可覆盖原来的数据：
// 修改已有的username数据
sessionStorage.setItem('username', '李四');
console.log(sessionStorage.getItem('username')); // 输出：李四
4. 删除数据
如果只需要删除某一个键对应的数据，可以使用removeItem方法，传入要删除的键名即可：
// 删除username对应的数据
sessionStorage.removeItem('username');
console.log(sessionStorage.getItem('username')); // 输出：null
如果要清除当前sessionStorage中存储的所有数据，可以使用clear方法：
// 清除所有存储的数据 sessionStorage.clear(); console.log(sessionStorage.length); // 输出：0
实际使用示例：页面间临时传参
在实际开发中，经常会遇到从列表页跳转到详情页，需要把列表页的选中数据传递到详情页的场景，这时候就可以用sessionStorage临时存储数据，下面是完整的实现示例。
列表页代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>列表页</title>
</head>
<body>
<ul>
<li data-id="1">商品1 <button class="detail-btn">查看详情</button></li>
<li data-id="2">商品2 <button class="detail-btn">查看详情</button></li>
<li data-id="3">商品3 <button class="detail-btn">查看详情</button></li>
</ul>
<script>
// 给所有详情按钮绑定点击事件
document.querySelectorAll('.detail-btn').forEach(btn => {
btn.addEventListener('click', function() {
const li = this.parentElement;
const goodsId = li.getAttribute('data-id');
const goodsName = li.textContent.replace('查看详情', '').trim();
// 临时存储商品信息到sessionStorage
sessionStorage.setItem('currentGoods', JSON.stringify({
id: goodsId,
name: goodsName
}));
// 跳转到详情页
window.location.href = 'detail.html';
});
});
</script>
</body>
</html>
详情页代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>详情页</title>
</head>
<body>
<div id="goods-info"></div>
<script>
// 从sessionStorage中获取临时存储的商品信息
const goodsStr = sessionStorage.getItem('currentGoods');
if (goodsStr) {
const goods = JSON.parse(goodsStr);
document.getElementById('goods-info').innerHTML = `商品ID：${goods.id}<br>商品名称：${goods.name}`;
// 如果数据只需要使用一次，可以在读取后删除
sessionStorage.removeItem('currentGoods');
} else {
document.getElementById('goods-info').textContent = '未获取到商品信息';
}
</script>
</body>
</html>
注意事项
使用sessionStorage的时候需要注意以下几点，避免出现数据异常：
- 存储的数据会被序列化为字符串，所以如果是对象、数组等复杂类型，一定要先使用JSON.stringify转换，读取的时候再用JSON.parse还原，否则会得到[object Object]这样的字符串
- 不要在sessionStorage中存储敏感数据，比如用户密码、身份证号等，因为客户端存储的数据可以被用户轻易查看和修改
- 如果需要在多个标签页之间共享数据，或者需要长期存储数据，应该改用localStorage，localStorage的数据不会随会话关闭而清除，除非手动删除
- 部分浏览器在无痕模式下可能会限制sessionStorage的使用，或者关闭无痕窗口后数据不会自动清除，实际开发中需要做兼容处理
sessionStorageHTML5Web_Storage修改时间：2026-07-01 09:09:38