Angular生产环境中localStorage无法获取AUTH_TOKEN值，仅返回键名

我在Angular应用中使用localStorage存储JWT令牌，开发环境下调用localStorage.getItem('AUTH_TOKEN')能正常获取对应值，但生产环境里执行相同代码，却只返回键名"AUTH_TOKEN"，而非存储的令牌值。

相关代码片段：

localStorage.setItem('AUTH_TOKEN', value);
localStorage.getItem('AUTH_TOKEN');

排查方向 #

• 确认生产环境中value的有效性：生产构建的代码压缩、变量混淆可能导致value未正确赋值（比如为空、未定义），最终存储了空值，浏览器控制台的显示可能造成误导。可以在生产环境中手动打印value的实际值验证。
• 检查存储上下文是否异常：如果生产环境部署在不同域名/子域名，或存在iframe隔离场景，可能导致localStorage的访问上下文变化，引发异常读取。
• 验证生产构建配置：Angular生产构建的buildOptimizer、minify等优化选项可能意外修改代码逻辑，比如误调换setItem的参数顺序。可以临时关闭优化构建，测试是否恢复正常。
• 检查浏览器存储容量：若生产环境下localStorage已达存储上限，新的存储操作会失败，导致无法读取正确值。可通过浏览器开发者工具的Application面板查看localStorage的实际存储内容。
• 排查第三方脚本干扰：生产环境可能引入监控、统计类第三方脚本，这类脚本有可能篡改localStorage的原生方法。可在控制台执行console.log(localStorage.setItem)，对比开发环境的输出，确认方法是否被修改。

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