为何$window.localStorage对象为空？已正确注入$window仍异常

嘿，我来帮你梳理下这个问题的可能原因，毕竟我也碰到过好几次类似的情况😉：

• 浏览器/运行环境不支持或禁用了localStorage
  这是最常见的情况！比如：

  • 你在**服务端渲染（SSR）**环境里运行代码（比如Angular Universal），服务端根本没有真实的window对象，注入的$window只是个模拟的空壳，自然没有可用的localStorage；
  • 浏览器开启了隐私/无痕模式，部分浏览器会在这种模式下禁用localStorage，或者让它看起来是空的；
  • 你用的是无头浏览器或测试沙箱，默认没有配置localStorage支持。
    👉 快速排查：直接在浏览器控制台敲localStorage，看看能不能正常访问，以此确认环境本身的问题。

• 代码调用时机过早
  如果你是在AngularJS的config阶段尝试访问$window.localStorage，那肯定会出问题！因为config阶段是在服务初始化之前执行的，此时$window还没完全绑定真实的浏览器对象。
  👉 解决方法：把访问localStorage的逻辑移到run阶段，或者控制器、指令的link/controller函数里。

• 浏览器插件或安全策略限制
  有些隐私保护插件（比如AdBlock、Privacy Badger）会阻止网站使用localStorage；另外，如果你的网站设置了严格的内容安全策略（CSP），没有允许localStorage相关的规则，也会导致它变成空对象。
  👉 排查方式：看看浏览器控制台有没有CSP相关的报错，或者暂时禁用所有插件再测试。

• 测试环境未正确模拟localStorage
  如果你是在单元测试中遇到这个问题，那大概率是测试框架默认没有模拟localStorage。比如用Karma/Jasmine时，你需要手动提供一个模拟的localStorage对象：

  beforeEach(module(function($provide) {
    const mockLocalStorage = {};
    $provide.value('$window', {
      localStorage: {
        getItem: key => mockLocalStorage[key],
        setItem: (key, value) => mockLocalStorage[key] = value,
        removeItem: key => delete mockLocalStorage[key]
      }
    });
  }));
  

先从环境排查入手，再检查代码执行时机，应该就能找到问题所在啦！

内容的提问来源于stack exchange，提问作者Olioul Islam Rahi