quotaexceedederror 表示本地存储空间已用尽，必须每次 localstorage.setitem() 都用 try-catch 捕获并兼容各浏览器错误形式，捕获后按数据重要性分级降级（如 sessionstorage 或内存缓存），严禁 clear()，推荐源头减负或升级至 indexeddb。
遇到 QuotaExceededError，不是代码写错了，而是浏览器明确告诉你：本地存储空间已用尽。它无法提前预知，只能在 localStorage.setItem() 执行瞬间捕获——没有“剩余容量”API，也没有跨浏览器统一配额值。
每次写入都必须 try-catch
这是唯一可靠的方式。不加防护会导致未捕获异常，可能中断逻辑甚至白屏：
- 不能只在初始化或关键节点检查一次，必须包裹每一次
setItem调用 - 用极小数据试探（如
"test"）比大对象更稳妥，避免误判为满 - 同步操作失败不可逆，
catch后的处理必须立即生效
准确识别 QuotaExceededError
不同浏览器返回的错误细节不一致，需兼容多种形式：
- Chrome/Firefox/Edge：通常
err.name === "QuotaExceededError" - 旧版 Safari：可能是
err.name === "NS_ERROR_DOM_QUOTA_REACHED"或err.code === 1014 - Firefox 也可能返回
err.code === 22（即DOMException.QUOTA_EXCEEDED_ERR）
推荐封装判定函数：
function isQuotaExceededError(err) {
return err instanceof DOMException && (
err.name === 'QuotaExceededError' ||
err.name === 'NS_ERROR_DOM_QUOTA_REACHED' ||
err.code === 22 ||
err.code === 1014
);
}
熔断后要分场景响应
捕获错误只是开始，后续动作决定用户体验是否断裂：
- 非关键数据（如滚动位置、表单草稿）：可静默丢弃，并提示“本地缓存已满，当前操作未持久化”
- 核心数据（如登录 token、主题偏好）：优先降级到
sessionStorage（同源同窗口独立配额），再 fallback 到内存缓存 + 下次启动重拉 - 严禁调用
localStorage.clear()——会无差别删除所有键，极易误删关键字段 - 安全清理建议按前缀（如
draft_、cache_）、时间戳（如 7 天前）或解析失败的脏数据筛选删除
写入前轻探 + 异常捕获双保险
浏览器不提供剩余空间 API，最稳妥方式是“试探写入 → 成功即删 → 再正式写”：
- 写入前执行
localStorage.setItem('probe', 'x')，成功后立即removeItem('probe') -
catch到QuotaExceededError后，触发清理逻辑，再重试本次写入 - 绝不依赖
localStorage.length或遍历所有 key 计算总长——它只返回项数，不反映字节总量
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
