JavaScript 中怎么测试包含浏览器存储满异常的处理逻辑-js教程-PHP中文网

javascript中模拟quotaexceedederror的核心是主动抛出domexception，而非耗尽真实存储；单元测试应mock setitem方法强制报错，并验证降级逻辑，同时生产环境需分层防御、预估大小、精准捕获error.name。

javascript 中怎么测试包含浏览器存储满异常的处理逻辑

在 JavaScript 中模拟和测试“浏览器存储满”异常（如 QuotaExceededError）的处理逻辑，核心思路是：**主动触发该错误，再验证你的兜底逻辑是否正确执行**。浏览器不会真的让你填满存储再测，但可以通过超出限额的写入操作可靠复现该异常。

理解 Storage 满异常的常见触发场景

主要发生在以下 API 写入时：

localStorage.setItem()：当尝试存入数据超过浏览器配额（通常 5–10MB，因浏览器而异）时抛出 DOMException，name 为 "QuotaExceededError"
sessionStorage.setItem()：同上，配额与 localStorage 类似
IndexedDB：事务中写入超限时抛出 QuotaExceededError（但更常表现为 AbortError 或 UnknownError，需结合具体环境判断）

注意：cookie 不会抛出此错误；它只是静默截断或拒绝设置。

在单元测试中可靠模拟 QuotaExceededError

不依赖真实配额耗尽（不可控、慢、跨浏览器不一致），而是用 mock 或强制抛错：

Java注释规范Skills

当用户要求为 Java 代码添加注释、修改注释、审查注释、整理注释格式，或要求按照代码注释规范处理 Java 文件时，使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则，并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括：补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。

下载

使用 Jest 等测试框架时，可 mock localStorage.setItem 方法：

// Jest 测试示例
beforeEach(() => {
  Object.defineProperty(window, 'localStorage', {
    value: {
      setItem: jest.fn().mockImplementation(() => {
        throw new DOMException('Quota exceeded', 'QuotaExceededError');
      }),
      getItem: jest.fn(),
      removeItem: jest.fn(),
      clear: jest.fn(),
      length: 0,
      key: jest.fn()
    },
    writable: true
  });
});

test('处理 localStorage 满时的降级逻辑', () => {
  expect(() => saveToStorage('key', 'large-data')).not.toThrow();
  expect(showFallbackUI).toHaveBeenCalled(); // 验证你的降级行为
});

若用 Vitest，语法类似，用 vi.mock 或直接替换 window.localStorage
确保测试后还原原始 localStorage（Jest 可用 jest.restoreAllMocks()，Vitest 用 vi.unstub()）

真实环境中的容错建议（不止于测试）

实际代码中不要只靠 try-catch，应分层防御：

写前预估大小：对要存的数据做 JSON.stringify 后检查长度（例如 JSON.stringify(data).length > 4_500_000 视为高风险）
优雅降级路径明确：比如 localStorage 失败 → 改用 sessionStorage → 再失败 → 提示用户或暂存内存（Map）→ 异步清理旧数据后重试
捕获并区分错误类型：

try {
  localStorage.setItem(key, value);
} catch (err) {
  if (err.name === 'QuotaExceededError') {
    handleStorageFull();
  } else if (err.name === 'SecurityError') {
    // 如隐身模式下 Safari 禁用 localStorage
    handleBlockedStorage();
  }
}

避免用 err.message.includes('quota') —— 消息可能被本地化或变更。