WebStorage是什么？sessionStorage怎么用

哈喽！大家好，很高兴又见面了，我是golang学习网的一名作者，今天由我给大家带来一篇《Web Storage是什么？sessionStorage使用详解》，本文主要会讲到等等知识点，希望大家一起学习进步，也欢迎大家关注、点赞、收藏、转发! 下面就一起来看看吧！

sessionStorage是仅限当前标签页的会话级字符串键值存储，关闭标签页即清空；存取需手动JSON序列化/反序列化，刷新保留但新开同URL标签页无数据，不响应自身修改，适用于表单草稿等临时场景，非安全存储。

sessionStorage 是浏览器提供的会话级键值对存储机制，只在当前标签页生命周期内有效，关闭该标签页后数据自动清空。它不是“临时变量”，也不是“内存缓存”，而是一个有明确作用域、隔离性与序列化要求的持久化 API。

怎么存和取数据？注意类型转换

sessionStorage 只接受字符串作为值，传对象、数字、布尔值都会被 .toString() 强转，导致信息丢失：

// ❌ 错误：直接存对象 → 存进去的是 "[object Object]"
sessionStorage.setItem('user', { name: 'Alice' });
// ✅ 正确：手动序列化 + 反序列化
sessionStorage.setItem('user', JSON.stringify({ name: 'Alice', id: 123 }));
const user = JSON.parse(sessionStorage.getItem('user') || '{}');

• getItem() 找不到 key 时返回 null，不是 undefined，所以 || '{}' 或 ?? '{}' 是安全兜底
• 数字、布尔等基础类型也建议统一走 JSON.stringify，避免隐式转换歧义（比如 0 → ''）

为什么刷新页面还在，但新开同个 URL 的标签页就没了？

这是 sessionStorage 最常被误解的一点：

• ✅ 同一标签页内刷新、前进/后退、Ctrl+Shift+T 恢复关闭的页面 → 数据保留
• ❌ 新开一个标签页（哪怕地址栏完全一样）→ 创建全新会话，sessionStorage 隔离且为空
• ⚠️ window.open() 打开的子窗口会复制初始值，但之后各自独立修改，互不通知

这和 Cookie 的“会话 Cookie”行为不同——后者是按域名+协议共享的，而 sessionStorage 是严格按渲染进程实例隔离的。

监听别人改了 sessionStorage？别指望它

storage 事件不会响应当前页面自身的修改，只在同源的其他标签页调用 setItem/removeItem 时触发：

window.addEventListener('storage', (e) => {
  console.log('其他标签页改了：', e.key, e.newValue);
});

• 当前页改了 sessionStorage，自己收不到这个事件