JavaScript中window.sessionStorage的具体使用
更新时间：2025年07月07日 10:34:27 作者：咖啡の猫
window.sessionStorage是浏览器端临时存储数据的机制,仅在当前会话有效,支持键值对操作,下面就来介绍一下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 | localStorage |
|---|---|---|
| 生命周期 | 当前页面会话期间（关闭页面即失效） | 永久存储（除非手动清除） |
| 多标签共享 | 否（每个标签页独立） | 是（同一域名下共享） |
| 数据大小限制 | 一般为 5MB 左右 | 一般为 5MB 左右 |
| 是否随请求发送到服务器 | 否（不参与 HTTP 请求） | 否 |
| 适用场景 | 表单缓存、页面间传参、临时登录信息 | 长期用户偏好设置、持久化数据 |
五、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');
}六、注意事项与常见错误
| 场景 | 建议 |
|---|---|
| 存储非字符串类型 | ❗ sessionStorage 只能存储字符串，复杂类型需先使用 JSON.stringify() 转换 |
| 数据安全 | ❌ 不应存储敏感信息（如密码），因为它是明文存储 |
| 同源策略限制 | ❗ 只能在同源页面访问，不同子域名/协议/端口视为不同源 |
| 移动端兼容性 | ✅ 所有现代移动端浏览器都支持 |
| 事件监听 | ✅ 可通过 storage 事件监听变化（但仅在其他标签页触发时生效） |
七、进阶技巧：结合 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八、总结对比表
| 方法 | 说明 | 是否推荐 |
|---|---|---|
| setItem() | 设置键值对 | ✅ 推荐 |
| getItem() | 获取指定键的值 | ✅ 推荐 |
| removeItem() | 删除指定键 | ✅ 推荐 |
| clear() | 清除所有数据 | ✅ 推荐 |
| key() | 获取指定索引的键名 | ✅ |
| length | 获取存储项数量 | ✅ |
九、结语
到此这篇关于JavaScript中window.sessionStorage的具体使用的文章就介绍到这了,更多相关JavaScript window.sessionStorage内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
在开发百度“地裂特效”时，发现了一些匪夷所思的 bug，第一反应是特效本身的代码与页面上原有的脚本发生了冲突，经过调试发现，问题出现在 cloneNode 的应用上2012-11-11
详解Python中logging日志模块在多进程环境下的使用
许多应用程序中都会有日志模块，用于记录系统在运行过程中的一些关键信息，以便于对系统的运行状况进行跟踪。这篇文章给大家主要介绍了在Python中logging日志模块在多进程环境下的使用,需要的朋友可以参考借鉴，下面来一起看看吧。2016-12-12
这篇文章主要介绍了js中传递特殊字符(+,&)的方法，有需要的朋友可以参考一下2014-01-01
今天小编就为大家分享一篇layui多图上传实现删除功能的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要给大家介绍了关于如何利用d3.js力导布局绘制资源拓扑图的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-01-01
很多时候，跟后端接口开发对接时，因为需求的关系，需要前端地区数据跟后端的数据要一一对应，有时候需要的是多维数据，这篇文章主要介绍了JS一维数组转化为三维数组的实现示例，感兴趣的可以了解一下2021-12-12
在测试过程中发现alert会中断settimeout的计时功能,关闭对话框后，settimeout的时间会重头开始计时，而不是从中断处，感兴趣的朋友可以了解下2013-07-07
这篇文章主要介绍了js点击列表文字对应该行显示背景颜色的实现代码,感兴趣的小伙伴可以参考下2015-08-08
这篇文章主要介绍了关于promise.all()的使用及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要介绍了js之如何筛选出两个数组相同的值问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
最新评论