JavaScript 中 BOM 怎么使用 sessionStorage 缓存会话数据-js教程-PHP中文网

sessionstorage 是浏览器通过 web storage api 提供的会话存储机制，挂载在 window 对象上，以键值对形式存储字符串数据，生命周期限于当前标签页，关闭即清空；支持 setitem、getitem、removeitem 和 clear 方法，需配合 json 序列化处理对象，同源隔离且容量有限。

javascript 中 bom 怎么使用 sessionstorage 缓存会话数据

JavaScript 中 BOM（Browser Object Model）本身不直接提供 sessionStorage，而是由浏览器环境提供的 Web Storage API 实现。它属于 BOM 的一部分，但更准确地说，是浏览器暴露给 JavaScript 的全局接口之一，挂载在 window 对象上。你可以通过 window.sessionStorage（通常简写为 sessionStorage）来操作会话级缓存数据。

sessionStorage 的基本用法

它以键值对形式存储字符串数据，生命周期与当前浏览器标签页（或窗口）的会话一致：关闭标签页后自动清空，刷新页面仍保留。

保存数据：sessionStorage.setItem('key', 'value') —— 值必须是字符串；如需存对象，先用 JSON.stringify()
读取数据：sessionStorage.getItem('key') —— 返回字符串，对象需用 JSON.parse() 还原
删除单个项：sessionStorage.removeItem('key')
清空全部：sessionStorage.clear()

常见使用场景示例

适合临时保存用户在当前会话中产生的轻量级状态，比如表单草稿、筛选条件、登录态标识等。

Java JDK 25

Java JDK 25 来自 OpenJDK 官方归档，版本为 JDK 25，本条下载地址已指向官方 Windows x64 zip 安装包直链，适合调试旧项目或兼容旧版 Java 运行环境。

下载

表单输入暂存：sessionStorage.setItem('draft', document.getElementById('msg').value)，页面刷新后可恢复
路由跳转传参替代：sessionStorage.setItem('returnUrl', '/settings')，返回时读取并跳转
避免重复弹窗：if (!sessionStorage.getItem('seenWelcome')) { showWelcome(); sessionStorage.setItem('seenWelcome', '1'); }

注意事项和限制

它不是万能缓存方案，使用前需注意边界条件。

仅限同源（协议 + 域名 + 端口）访问，跨标签页不共享（即使同 URL）
容量通常为 5–10 MB（因浏览器而异），超出会抛出 QuotaExceededError
不支持监听变化，如需响应式更新，需手动触发或结合自定义事件
不能存储函数、undefined、Symbol 或 DOM 节点等非序列化值

封装一个安全的工具函数

为避免频繁的 try-catch 和类型转换，可简单封装：

const safeSession = {
  set(key, value) {
    try {
      sessionStorage.setItem(key, JSON.stringify(value));
    } catch (e) {
      console.warn('sessionStorage set failed:', e);
    }
  },
  get(key) {
    try {
      const str = sessionStorage.getItem(key);
      return str ? JSON.parse(str) : null;
    } catch (e) {
      console.warn('sessionStorage get failed:', e);
      return null;
    }
  },
  remove(key) {
    sessionStorage.removeItem(key);
  }
};

调用方式：safeSession.set('user', { id: 123, name: 'Alice' });，自动处理序列化与错误。