怎么通过HTML5中StorageQuotaExceededError处理本地存储空间溢出异常-H5教程-PHP中文网

html5中不存在storagequotaexceedederror异常，实际抛出的是name为"quotaexceedederror"的domexception；应通过try-catch捕获并检查err.name或err.code，而非实例化该不存在的构造函数。

怎么通过html5中storagequotaexceedederror处理本地存储空间溢出异常

HTML5 中并没有标准的 StorageQuotaExceededError 异常类型，它**不是规范定义的全局错误对象**，也不会在 localStorage 或 sessionStorage 操作中被原生抛出。所谓“存储空间溢出”异常，实际表现因浏览器而异，且需手动检测与处理。

为什么不会自动抛出 StorageQuotaExceededError

根据 HTML 和 Web Storage 规范，localStorage.setItem() 在超出配额时的行为是：静默失败（不抛异常），而是直接抛出 DOMException，其 name 属性可能为 "QuotaExceededError"（注意大小写和拼写，不是 StorageQuotaExceededError）。这个名称是 DOMException 的标准 code name 之一，但并非独立构造函数。

如何正确捕获配额超限错误

应使用 try-catch 捕获 DOMException，并检查其 name 或 code 属性：

响应式烟草公司HTML5网站模板

响应式烟草公司HTML5网站模板是一款适合提供各种不同种类的优质烟草公司宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

✅ 正确方式：检查 err.name === "QuotaExceededError" 或 err.code === 22（DOMException.QUOTA_EXCEEDED_ERR）
❌ 错误方式：试图 new StorageQuotaExceededError() 或 catch (e instanceof StorageQuotaExceededError) —— 浏览器不支持该构造函数

实用的容错写法示例

以下是一个健壮的 setItem 封装，自动清理旧数据并降级处理：

function safeSetItem(key, value) {
  try {
    localStorage.setItem(key, value);
  } catch (err) {
    if (err.name === "QuotaExceededError" || err.code === 22) {
      console.warn("本地存储已满，尝试清理缓存...");
      // 可选：清除部分非关键项，或提示用户
      clearNonEssentialItems();
      // 再试一次（或存到 sessionStorage / IndexedDB）
      try {
        localStorage.setItem(key, value);
      } catch (e) {
        console.error("仍无法写入 localStorage，考虑降级方案");
        fallbackToIndexedDB(key, value); // 如使用 IndexedDB 替代
      }
    } else {
      throw err; // 其他错误继续上抛
    }
  }
}