React JS项目使用sessionStorage时新开标签页数据丢失、用户登出问题

这是sessionStorage的原生设计特性导致的：sessionStorage的作用域被限制为单个浏览器标签页的同站会话，不同标签页哪怕打开完全相同的域名，各自的sessionStorage都是完全隔离的，关闭原标签页后存储的内容也会被自动清除，和你的业务代码逻辑无关。

• 先确认存储介质：打开浏览器开发者工具的「应用(Application)」面板，分别查看原登录态标签页和新标签页的sessionStorage存储列表，确认新标签页下确实没有用户ID字段，排除是前端初始化逻辑误删存储项的问题。
• 校验域名一致性：对比两个标签页的访问域名，确认协议（HTTP/HTTPS）、域名、端口完全一致，哪怕是顶级域名相同、二级域名不同的情况，也会被判定为跨域，无法读取到对应存储。
• 检查新开标签页的跳转逻辑：如果是从原页面通过<a target="_blank">或者window.open跳转打开的新标签页，排查跳转过程中是否有额外的登出逻辑被触发，或者跳转的URL带了错误的会话过期参数。

根据你的业务需求选择对应方案即可：

• 方案1：替换存储介质为localStorage
  如果业务允许用户关闭浏览器后下次打开仍然保持登录状态，直接把代码里所有sessionStorage的读写API替换为localStorage即可，localStorage是同域名下所有标签页共享的，只要用户不主动清除浏览器缓存就会永久保留。

注意：不要往localStorage里存储明文的敏感信息（比如密码、接口鉴权token），如果存储用户ID等非敏感信息可以直接使用，敏感数据建议加密后存储，或者搭配后端HttpOnly Cookie使用。

• 方案2：需要保留sessionStorage的会话隔离特性（关闭标签页自动登出）
  如果你的业务要求关闭标签页就自动清除登录态，不能用持久化存储，可以用两种方式实现新标签页状态同步：

  1. 原页面跳转新开标签页时，通过URL参数、或者window.postMessage把用户ID传递给新标签页，新标签页初始化时拿到参数后写入自身的sessionStorage即可。
  2. 监听浏览器storage事件，用localStorage做临时中转：原页面写入sessionStorage时同步写入localStorage，其他标签页监听到storage更新后，把对应值写入自身sessionStorage，再删除localStorage里的临时中转数据。

• 方案3：更安全的凭证存储方案
  如果是敏感业务系统，建议把登录鉴权凭证存在HttpOnly 安全Cookie中，Cookie会自动在同域名的所有请求中携带，不会被前端JS读取，既可以避免XSS攻击盗取凭证，也完全不存在新标签页丢失登录态的问题。

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