必须用 JSON.stringify() 序列化对象再存入 localStorage，读取时先判空再 JSON.parse()；sessionStorage 按 tab 隔离，新开标签页即新会话；批量读取需逐项容错处理。

localStorage.setItem() 传对象不报错但存的是 [object Object] 怎么办

直接 localStorage.setItem('user', { name: 'Alice' }) 看似能运行，但取出来是字符串 "[object Object]"，后续 JSON.parse() 必然失败。

根本原因是 setItem() 只接受字符串作为 value 参数，其他类型会被隐式调用 .toString() —— 对普通对象就是 [object Object]。

• 必须手动序列化：localStorage.setItem('user', JSON.stringify({ name: 'Alice', age: 30 }))
• 读取时不能跳过校验：const raw = localStorage.getItem('user'); if (typeof raw === 'string') { const user = JSON.parse(raw); }
• 避免 JSON.parse(null)：getItem() 找不到键时返回 null，不是 undefined，所以用 === null 判断比 == null 更安全

sessionStorage 关闭标签页就丢数据，但新开同 URL 标签页却是空的，正常吗

完全正常。sessionStorage 的作用域是“当前浏览会话 + 当前文档源 + 当前浏览上下文”，也就是单个 tab 页面。哪怕你复制地址栏新开一个 tab，也属于全新会话，sessionStorage 是隔离的。

这和 localStorage 的跨 tab 共享形成鲜明对比 —— 后者只要同源（协议+域名+端口），所有 tab 都能读写同一份数据。

立即学习“前端免费学习笔记（深入）”；

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 适合场景：表单草稿、向导步骤状态、临时 token 缓存
• 不适合场景：用户偏好设置（该用 localStorage）、登录态持久化（应配合服务端 session）
• 调试技巧：在 DevTools → Application → Storage 面板里，左侧能分别看到 Local Storage 和 Session Storage，点开对应 origin 就能实时查看内容

如何安全地批量读取 localStorage 中所有键值对

不能假设 localStorage 里存的都是合法 JSON 字符串。用户可能手动编辑、旧版本代码写入了损坏结构、或第三方脚本污染了存储空间。

遍历必须带完整容错：

• 用 localStorage.length 获取键数量，再用 localStorage.key(i) 拿键名
• 对每个 key 调用 localStorage.getItem(key)，结果先判断是否为字符串，再尝试 JSON.parse()
• 捕获 JSON.parse() 异常，跳过损坏项，不要中断整个循环
• 示例片段：

  for (let i = 0; i < localStorage.length; i++) {
    const key = localStorage.key(i);
    const raw = localStorage.getItem(key);
    if (typeof raw === 'string') {
      try {
        const parsed = JSON.parse(raw);
        console.log(key, parsed);
      } catch (e) {
        console.warn(`Invalid JSON for key "${key}"`);
      }
    }
  }

Web Storage 存 HTML 片段时，事件监听器和内联脚本不会自动恢复

用 element.outerHTML 存进 localStorage，再用 innerHTML = ... 写回去，DOM 结构能还原，但所有绑定的事件监听器、onclick 属性、<script> 标签里的逻辑全部失效。

这不是 bug，是浏览器安全模型的设计：动态插入的 script 不执行，事件绑定必须显式重挂。

• 如果只是静态内容（比如用户编辑过的富文本区域），直接存 outerHTML 没问题
• 如果含交互逻辑，得额外保存行为描述（如“按钮 #save 应触发 saveForm”），恢复后重新绑定
• 更稳妥的做法是分离数据与视图：只存结构化数据（如表单字段值），用模板引擎或框架（React/Vue）重新渲染，而非存原始 HTML 字符串

实际项目里最容易被忽略的，是数据格式校验和跨设备一致性——同一套代码，在用户换手机、清缓存、或用不同浏览器访问时，localStorage 里残留的旧结构很可能让 JSON.parse() 崩溃，而错误日志又很难被捕获。加一层 try/catch 不是防御性编程的终点，而是起点。