React部署Azure后localStorage数据存后跳转消失问题求助

问题背景 #

部署在Azure App Service上的React应用，开发环境登录流程正常，但线上环境登录成功后，localStorage中保存的用户展示数据（displayName/avatarRef/username）会短暂存在后自动消失。目前已确认：

• 认证Cookie正常生效
• 服务器返回的用户数据完全正确（通过console.log可验证）
• 问题在Chrome、Edge浏览器中均复现

登录请求核心代码：

fetch('api...', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({email, password}),
  credentials: 'include'
})
.then(res => res.json())
.then(...)

登录成功后的处理逻辑：

if (!data || !data.success) {
  // 设置错误信息并返回
} else {
  // 保存用户展示数据
  localStorage.setItem('displayName', data.displayName);
  localStorage.setItem('avatarRef', data.avatarRef);
  localStorage.setItem('username', data.username);

  // 调试日志可输出正确的用户数据
  console.log(data);

  // 延迟100ms跳转至账户页
  setTimeout(() => {
    window.location.href = '/account';
  }, 100);
}

排查方向与解决方案 #

1. 验证localStorage写入的可靠性 #

localStorage.setItem是同步操作，但极端情况下可能因浏览器进程调度出现写入延迟：

• 直接移除setTimeout，在写入完成后立即跳转，或延长延迟时间（如500ms）测试
• 在跳转前主动验证写入结果，确认成功后再执行跳转：

  localStorage.setItem('displayName', data.displayName);
  // 写入后立即读取验证
  const savedName = localStorage.getItem('displayName');
  if (savedName === data.displayName) {
    window.location.href = '/account';
  } else {
    console.error('localStorage写入失败，请检查权限或存储容量');
  }
  

2. 更换客户端跳转方式 #

window.location.href会触发全页面刷新，可能因浏览器或服务器的异常机制导致数据丢失：

• 若使用React Router，改用客户端路由跳转（避免全页面刷新）：

  import { useNavigate } from 'react-router-dom';
  
  const navigate = useNavigate();
  // 写入完成后直接跳转
  navigate('/account');
  

3. 检查Azure App Service配置 #

• 确认是否开启HTTPS强制跳转：若登录请求为HTTP、跳转后页面为HTTPS，部分浏览器可能因跨协议隔离localStorage数据
• 查看应用的会话隔离配置，排除Azure层面的缓存或会话重置机制影响
• 在浏览器开发者工具Application标签中，实时监控跳转前后localStorage的变化，同时检查Console是否有隐藏的权限错误

4. 排除外部干扰因素 #

• 在浏览器无痕模式下测试，排除隐私类扩展自动清理localStorage的可能
• 检查应用中是否有第三方脚本（统计、监控类）在页面卸载时执行localStorage清理操作

5. 验证存储数据的合法性 #

• 确认data.displayName等字段不为undefined/null：localStorage仅支持字符串存储，非字符串值会被转为"undefined"，后续读取易被误判为不存在
• 检查localStorage存储容量是否已满（单域名默认5MB），可通过localStorage.length和已存储数据总大小排查

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