浏览器不提供直接读取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 精确估算当前体积
每次写入前，应将待存数据序列化后转为真实字节长度：
- 用
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 设计
