JavaScript 中 LocalStorage 存储上限超出怎么捕获异常-js教程-PHP中文网

localstorage 超限时 setitem 会抛出 domexception（name 为 "quotaexceedederror" 或 "ns_error_dom_quota_reached"），需 try/catch 主动捕获；读取和清空不触发该异常，估算大小不可靠，建议统一检查 err.name 是否含 'quota' 并降级处理。

javascript 中 localstorage 存储上限超出怎么捕获异常

LocalStorage 存储超出上限时，JavaScript 不会抛出标准异常（如 RangeError 或 QuotaExceededError），但现代浏览器在调用 localStorage.setItem() 失败时，**会抛出 DOMException，且其 name 属性为 "QuotaExceededError"**（部分旧版 Safari 可能返回 "NS_ERROR_DOM_QUOTA_REACHED"）。关键在于：这个异常**只在写入失败时触发，且必须主动 try/catch 捕获，不会静默失败。**

如何可靠捕获存储超限异常

直接对 setItem 做 try/catch 是最直接有效的方式：

包裹每次 setItem 调用，检查是否因配额不足被拒绝
注意：读取（getItem）或清空（clear）操作不会触发该异常
不要依赖 localStorage.length 或估算大小来预判——浏览器实际限制受编码、内部开销等影响，不可靠

兼容性处理：主流浏览器的异常名称差异

不同浏览器抛出的 DOMException.name 略有不同，建议同时检查多个可能值：

Gradle 9.8.0

Gradle 9.8.0 官方二进制分发包，适用于 Windows、macOS 与 Linux 的 Java、Kotlin 和 Android 项目构建。

下载

Chrome / Firefox / Edge：通常为 "QuotaExceededError"
Safari（尤其旧版本）：可能为 "NS_ERROR_DOM_QUOTA_REACHED" 或 "QuotaExceededError"
可统一用 err.name.includes('Quota') || err.name.includes('QUOTA') 粗略匹配，更稳妥则显式列出

实用示例：安全写入 + 降级提示

以下代码演示了捕获异常并提供用户友好反馈：

function safeSetItem(key, value) {
  try {
    localStorage.setItem(key, value);
    return true;
  } catch (err) {
    if (err.name === 'QuotaExceededError' || 
        err.name === 'NS_ERROR_DOM_QUOTA_REACHED') {
      console.warn('LocalStorage 已满，无法保存数据');
      alert('本地存储空间已满，请清理浏览器缓存或尝试其他保存方式');
      return false;
    }
    throw err; // 其他异常继续上抛
  }
}

// 使用
safeSetItem('userPrefs', JSON.stringify({ theme: 'dark', lang: 'zh' }));