同标签页跳转URL时sessionStorage被清除问题咨询

可能的原因 #

• 同源策略限制：sessionStorage 严格遵循同源规则，只有当跳转前后的页面协议、域名、端口完全一致时，才能共享同一sessionStorage上下文。如果跳转的URL与原页面存在任一维度的差异（比如从http://example.com跳https://example.com，或example.com跳sub.example.com），新页面会生成独立的sessionStorage，原数据自然无法访问。
• 自定义函数的隐式操作：你提到的几个函数可能存在隐性清除逻辑：
  • sessionStorageSyncReducer：如果是用于Redux状态同步的工具，可能在页面初始化时错误覆盖或清空了sessionStorage中的数据；
  • clearState(reducer)：若该函数在路由切换时被触发，可能连带清除了sessionStorage中绑定的状态数据；
  • localStorageSync({})：如果配置不当，可能误操作sessionStorage（比如混淆了localStorage和sessionStorage的存储目标）。
• API调用错误：你代码中写的session storage.set('key', 'value')和sessionStorage.get('key')并非原生API（原生应为sessionStorage.setItem()和sessionStorage.getItem()），如果是自定义封装方法，可能存在逻辑bug，导致数据未正确存入或读取。
• 浏览器/插件干扰：隐私模式、隐私保护类插件可能会自动清除sessionStorage；部分浏览器在异常退出后重启，也可能出现sessionStorage数据丢失的情况。

解决方案 #

• 验证同源性：在跳转前后的页面控制台分别执行console.log(window.origin)，确认两个页面的origin完全一致。若不同：
  • 调整跳转目标至同源地址；
  • 改用localStorage（若为子域名，可通过document.domain设置共享）或后端存储方案（如Cookie、服务器Session）。
• 排查自定义函数：
  • 检查sessionStorageSyncReducer的实现逻辑，确认它在页面初始化时不会清空sessionStorage，同步状态时不会覆盖原有数据；
  • 追踪clearState(reducer)的触发时机，确认路由切换时是否调用了该函数，且是否存在清除sessionStorage的逻辑；
  • 核对localStorageSync({})的配置，确保它仅操作localStorage，未误触sessionStorage。
• 修复API调用：
  • 若使用原生API，确保调用正确：

    // 存储数据
    sessionStorage.setItem('key', 'value');
    // 获取数据
    const value = sessionStorage.getItem('key');
    

  • 若为自定义封装方法，检查内部逻辑，确认数据被正确写入sessionStorage。
• 调试验证：
  • 跳转前执行console.log(sessionStorage.getItem('key'))，确认数据已成功存入；
  • 跳转后在新页面控制台直接输入sessionStorage，查看所有键值对，确认数据是否真的丢失，还是读取逻辑有误。
• 排除浏览器干扰：关闭隐私模式、禁用隐私类插件，更换不同浏览器测试，确认问题是否由浏览器环境导致。

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