浏览器不提供直接读取webstorage配额的标准api，因其无类似navigator.storage.estimate()的接口；localstorage/sessionstorage仅能通过textencoder估算字节、试探写入并捕获quotaexceedederror等错误协同判断，且需按环境差异降级处理。

浏览器不提供直接读取 WebStorage 配额上限的标准 API，所谓“判断配额”本质是预估 + 试探 + 捕获三步协同，而非获取一个确定数值。

为什么不能直接查配额

localStorage 和 sessionStorage 没有 navigator.storage.estimate() 这类接口支持，该方法仅对 IndexedDB、Cache API 等持久化存储有效。调用 localStorage.length 或遍历 key 只能知道条目数，无法反映真实字节占用；JSON.stringify(localStorage).length 会严重误判——它按 UTF-16 码元计数，而底层存储按 UTF-8 字节计费（中文、emoji 占 2–4 字节）。

用 TextEncoder 精确估算当前体积

每次写入前，应将待存数据序列化后转为真实字节长度：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 用 new TextEncoder().encode(JSON.stringify(obj)).length 获取 UTF-8 字节数（最贴近实际开销）
• 维护一个本地计数器（如 localStorage.__sizeEstimate），每次 setItem 前加增量、removeItem 后减估算值
• 设定安全阈值（如 4.5 MB），而非硬卡 5 MB，为 key 名、元数据和浏览器预留空间留余量

试探写入 + 异常捕获双保险

预估只是参考，最终必须靠运行时反馈：

• 首次加载或关键操作前，可尝试写入一段 1 MB 的测试字符串，捕获 QuotaExceededError 或 SecurityError（Safari 无痕模式常见）
• 每一次 localStorage.setItem() 都必须单独包裹 try/catch，不能只在初始化时检查一次
• 需同时捕获多种错误：QuotaExceededError（超限）、SecurityError（被禁用）、InvalidStateError（Firefox 特定策略下）

结合环境特征做合理假设

不同环境配额差异显著，需按优先级降级应对：

• iOS Safari：默认约 2.5–5 MB，开启“防跟踪”可能归零；Android WebView 常低于 2 MB，且可能静默截断不报错
• Chrome 桌面：通常 10 MB，但同源总配额受 Cache API、IndexedDB 共享，大量缓存后 localStorage 也可能突然失败
• 隐身/无痕模式：Safari 直接禁用 localStorage；Firefox/Chrome 虽保留但配额更保守，应默认按 2 MB 设计

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！