为何localStorage触发JSON.parse错误，替换为sessionStorage即可运行，二者有何区别？

你遇到的场景本质上不是sessionStorage和localStorage的读写逻辑存在能力差异，核心诱因集中在三个方面：

• localStorage 域的历史脏数据污染（90%以上同类问题的诱因）
  localStorage是同源下跨标签页、跨浏览器会话长期共享的公共存储域，所有同域名下运行过的业务代码、嵌入的第三方脚本、浏览器扩展、甚至历史版本的旧代码，都可以无差别向这个存储域写入内容。如果你的存储key被其他脚本提前写入了非合法JSON格式的内容——比如纯文本字符串、被截断的半段JSON、特殊占位符，读取时直接就会触发JSON.parse的语法错误。
  换成sessionStorage后功能正常，是因为sessionStorage是严格绑定单个标签页生命周期的隔离存储域，你当前测试的标签页不存在提前写入的同key脏数据，第一次写入的就是你自己用JSON.stringify序列化的合法值，读取时自然不会碰到解析失败的情况。
• 存储配额触发的静默写入截断
  部分老版本浏览器、无痕浏览模式下，localStorage的容量配额限制更严格，且当写入内容超出配额时，部分浏览器实现不会直接抛出配额超限的同步异常，反而会静默把待写入内容截断成不完整的字符串存下来。这种被截断的半截JSON，下次读取时必然触发解析错误。
  sessionStorage的容量配额是按单个标签页独立计算的，不会跨标签页累积占用，你每次测试都是全新的干净会话空间，不会因为存量数据占满配额触发截断，因此读写都正常。
• 管控环境下的写入权限差异
  在浏览器隐私模式、企业统一管控的浏览器配置中，localStorage的持久化写入通常会被部分禁用，写入的内容仅在当前页面会话临时保留，甚至存在写入内容丢字节的情况；而sessionStorage的写入权限在同个标签页会话内通常不受这类管控限制，能完整存储序列化后的合法内容。

你贴的读写逻辑本身存在无兜底的崩溃点：

read(key: string): any {
    const item = localStorage.getItem(key);
    return JSON.parse(item);
  }

只要getItem返回空字符串、非JSON格式的任意文本，就会直接抛出解析错误，没有任何合法性校验和兜底逻辑。

• 打开浏览器开发者工具的应用面板，定位到当前域名对应的Local Storage节点，搜索你正在使用的存储key，核对对应的value值是否为合法JSON格式，绝大多数情况都能找到之前残留的脏值
• 手动清空Local Storage下对应key的内容，切回原来的localStorage逻辑测试，如果功能恢复，即可100%确认是历史脏数据导致的问题
• 给read方法增加合法性兜底：读取到非字符串类型、空值、非合法JSON格式的内容时返回预设默认值，避免解析崩溃影响业务

内容的提问来源于stack exchange，提问作者Martin01478