DOMException SecurityError — localStorage 访问被拒

症状

错误“DOMException SecurityError — localStorage 访问被拒”指向一个明确的失效模式。下面依次给出症状、定位该原因的检查命令、根本原因、修复方案，以及证明修复有效的验证步骤。

可观察到的症状包括：

• DOMException: 从 Window 读取 localStorage 属性被拒，本文档访问被禁止
• 在 iframe 或第三方上下文中访问存储抛错
• 仅对阻止 Cookie 的用户出现该错误

诊断

先在隔离环境中复现故障，再按顺序执行以下检查，逐步缩小范围。

步骤 1

try { window.localStorage.getItem('k'); } catch (e) { console.log(e.name); }

此处报 SecurityError 即确认存储被阻止，而非键不存在。

步骤 2

const ok = (() => { try { localStorage.setItem('_t', '1'); localStorage.removeItem('_t'); return true; } catch { return false; } })();

特性探测可避免每次访问都抛错，并允许回退。

常见诱因（按出现频率排序）：

• 浏览器阻止该源的存储，常因禁用了 Cookie
• 代码运行在无存储访问权限的沙箱或跨源 iframe 中
• 在获得存储访问许可前就访问

根因

当浏览器禁用该源或文档的存储时（如阻止 Cookie、沙箱 iframe 或阻止第三方存储），访问 window.localStorage 会抛 SecurityError。该异常发生在属性访问时，而非读取值时。

修复

一次性探测存储可用性，并用小型适配器包裹所有访问，回退到内存 map，使存储不可用时应用仍可用。

注意：内存回退不跨标签页或刷新共享；不可依赖它保存跨会话状态。

const storage = (() => {
  try {
    localStorage.setItem('__probe__', '1');
    localStorage.removeItem('__probe__');
    return localStorage;
  } catch {
    const mem = new Map();
    return {
      getItem: (k) => mem.get(k) ?? null,
      setItem: (k, v) => mem.set(k, String(v)),
      removeItem: (k) => mem.delete(k),
    };
  }
})();

验证

在禁用 Cookie 或沙箱 iframe 中运行，确认无未捕获错误且回退生效。

修复后补充一条回归测试，复现原始症状，防止问题再次出现。

这类故障通常是环境问题而非纯逻辑错误，因此在缺陷记录中应写明完整命令、环境变量与工作目录。请用最小的脚本复现，待最小用例清楚后再扩大范围。为这类故障准备一份简短的排查清单，能显著减少下次排障时间。