localStorage同页面读取正常 跳转下一页返回null是什么原因

常见原因 #

• 同源策略限制：localStorage受浏览器同源策略约束，只有协议、域名、端口三者完全一致的页面才能共享同一份localStorage存储。
  你的场景下大概率是这个问题：
  1. 本地直接打开HTML文件时，浏览器对file://协议的同源判定规则特殊，哪怕两个文件在同一个文件夹下，也可能被判定为不同源，无法共享存储
  2. 部署到服务器后如果出现该问题，检查跳转前后页面的协议是否不一致（比如http跳https）、域名是否有差异（比如带www和不带www）、端口是否不同
• 无痕/隐私浏览模式限制：隐私模式下localStorage的存储生命周期仅限当前标签页，跳转新页面后存储会被自动隔离或清空
• 页面2存在清理存储的逻辑：检查页面2的其他代码是否执行了localStorage.clear()、localStorage.removeItem('eventID')操作，也可能是浏览器安全插件自动清理了指定站点的存储
• 执行时机异常：如果页面2的getEventID函数在页面初始化流程中被提前执行，可能出现读取逻辑早于浏览器加载本地存储的极端情况

排查步骤 #

• 分别在两个页面的控制台执行console.log(location.origin)，对比输出是否完全一致，不一致的话调整站点配置保证同源即可解决
• 本地测试时不要直接双击打开HTML，使用本地静态服务启动（比如VSCode的Live Server插件），规避file://协议的异常同源判定
• 在页面2的控制台手动执行localStorage.getItem('eventID')，如果能正常拿到值，说明是你页面2的代码执行时机问题，可以把getEventID()的调用放到DOMContentLoaded事件回调里：

document.addEventListener('DOMContentLoaded', getEventID)

• 排查浏览器扩展、隐私设置是否限制了站点的存储权限，关闭无痕模式测试

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