如何用window.sessionStorage实现仅在当前会话有效的临时状态存储-js教程-PHP中文网

sessionStorage 和 localStorage 的关键区别在于生命周期和作用域：sessionStorage 仅在当前浏览器标签页会话期间有效，关闭标签即清除；localStorage 持久保存，除非手动清除。两者均以字符串键值对存储，容量约5–10MB，同源访问，不自动发送至服务器。

如何用window.sessionstorage实现仅在当前会话有效的临时状态存储

sessionStorage 和 localStorage 的关键区别在哪 `sessionStorage` 的生命周期绑定到浏览器标签页（或窗口）的会话周期：页面关闭（包括刷新、跳转、关闭标签）后，只要不是主动调用 `clear()` 或 `removeItem()`，数据在当前标签页内始终存在；而 `localStorage` 会持久保留，除非手动清除或用户清空浏览器数据。注意：新开一个相同 URL 的标签页，`sessionStorage` 是完全隔离的——这常被误认为“没存进去”，其实是预期行为。

常见错误现象：sessionStorage.setItem('user', 'alice') 后刷新页面取不到值？检查是否启用了无痕模式且禁用了 sessionStorage（极少数企业策略），或是否在 iframe 中跨域访问（会直接抛 SecurityError）。

怎么安全地写入和读取 session 数据写入前建议先做类型校验和字符串化处理，因为 `sessionStorage` 只接受字符串值；读取后需主动 `JSON.parse()`（如果存的是对象）。不要依赖未定义行为，比如直接存 `undefined` 或 `function`。

实操建议：

存对象时统一用 JSON.stringify()，避免 TypeError: Converting circular structure to JSON
读取时加 try...catch，防止后端返回格式异常或存储损坏导致解析失败
使用前可先检查 if (typeof sessionStorage !== 'undefined')，兼容旧版 IE 或禁用 JS 的环境

// 安全写入
const saveUser = (user) => {
  try {
    sessionStorage.setItem('currentUser', JSON.stringify(user));
  } catch (e) {
    console.warn('Failed to save to sessionStorage:', e);
  }
};

// 安全读取
const loadUser = () => {
  try {
    const raw = sessionStorage.getItem('currentUser');
    return raw ? JSON.parse(raw) : null;
  } catch (e) {
    console.warn('Failed to parse sessionStorage data:', e);
    return null;
  }
};