.NET+React/TypeScript项目localStorage.getItem部署后返回NULL问题

一、localStorage获取返回NULL的根源排查 #

• 脚本执行时机不匹配：本地环境资源加载速度快，后端注入的localStorage.setItem脚本会在React组件读取操作前执行；但AWS部署后，静态资源加载、页面渲染顺序可能出现延迟，导致React组件初始化时存储项还未写入。解决方式：将React中读取localStorage的逻辑放在useEffect钩子中（确保仅在客户端执行），或者通过状态标记等待脚本执行完成后再读取。
• SSR/客户端Hydration冲突：如果React应用采用服务端渲染（SSR），服务器端不存在localStorage，hydration阶段直接读取会拿到空值。即使后端注入了脚本，也可能晚于组件初始化。必须把localStorage.getItem放在useEffect钩子内，保证只在客户端运行时执行。
• 键名一致性验证：确认后端写入的键名和前端读取的键名完全一致（包括大小写、特殊字符），虽然控制台能读取说明大概率没问题，但部署环境可能存在隐性的大小写敏感差异，需再次核对。

二、简便的前后端数据传递替代方式 #

• API接口调用：后端编写REST/GraphQL接口（比如GET /api/user/info）返回用户数据，前端用fetch或axios发起请求获取，这是最通用、规范的方式，避免依赖页面渲染脚本。
• 全局变量注入：在.NET视图页面中直接渲染全局变量，例如：

  <script>
    window.userInfo = { name: '@Model.Name', surname: '@Model.Surname' };
  </script>
  

  React代码直接读取window.userInfo，无需依赖localStorage，彻底规避时机问题。
• Cookie传递：后端将数据写入Cookie，前端通过document.cookie解析读取，或使用react-cookie等工具库，适合需要跨页面/请求携带数据的场景。
• URL参数传递：页面跳转时将数据作为URL查询参数（比如/profile?name=xxx&surname=yyy），前端用React Router的useSearchParams钩子读取，适合临时数据传递。

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