Chrome地址栏点击建议URL时sessionStorage.setItem失效，开DevTools恢复正常

这个问题大概率是Chrome的预加载机制导致的特定行为，而非你的React代码本身存在问题。下面是具体的原因分析和可排查的方向：

核心原因推测 #

Chrome地址栏的建议URL会触发页面预加载机制：当你点击这类建议链接时，Chrome会在后台提前加载页面，但此时页面处于**非激活（hidden）**状态，浏览器会对这类预加载页面的存储操作做限制，导致sessionStorage.setItem失效。而手动输入/粘贴URL、从收藏夹打开时，页面是直接激活加载的，没有这个限制。

另外，打开DevTools时Chrome会自动禁用预加载（或修改预加载行为），这也解释了为什么开DevTools后操作恢复正常；而Firefox和Safari的预加载逻辑与Chrome不同，所以没有出现这个问题。

可排查的具体点 #

• 验证页面可见性状态
  在React启动阶段添加日志，打印document.visibilityState的值。如果异常场景下该值为hidden，则确认是预加载导致的存储限制。可以修改代码，等待页面触发visibilitychange事件变为visible状态后，再执行sessionStorage.setItem操作。
• 调整Chrome预加载设置
  关闭Chrome的「预加载页面以提高浏览速度」选项（路径：设置 → 隐私和安全 → 预加载页面），之后测试异常场景是否消失，以此验证预加载的影响。
• 添加错误捕获与延迟执行
  用try-catch包裹sessionStorage.setItem代码，打印具体错误信息，确认是否有浏览器抛出的权限或配额类异常；同时尝试将存储操作延迟到DOMContentLoaded或window.load事件之后执行（比如放在useEffect的空依赖数组中，或者更晚的生命周期节点）。
• 更新Chrome与清除缓存
  将Chrome升级到最新稳定版，旧版本可能存在预加载相关的bug；同时清除站点缓存和数据，避免缓存的预加载资源干扰。

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