HTML5客户端存储需通过组合策略估算占用并用进度条呈现，localStorage用字符数累加估算，IndexedDB用queryUsageAndQuota检测，配合语义化展示及异常清理引导。
HTML5 客户端存储没有统一、直接暴露的“已用/总配额”数值，但可以通过组合策略估算占用情况，并用进度条直观呈现。关键不是追求绝对精确，而是提供用户可感知、有参考价值的空间使用反馈。
localStorage：用 length + 字符估算构建轻量仪表盘
localStorage.length 只表示键的数量，不反映字节数。要展示“空间占用”，需手动估算字符串总长度：
- 遍历所有 key，累加 key 名称和对应 value 的字符数（JavaScript 中每个字符 ≈ 2 字节，按 UTF-16 粗略计算）
- 代码示例：function getStorageByteSize() { let total = 0; for (let i = 0; i
- 设定保守上限（如 5 MB = 5242880 字节），算出百分比后更新
的value属性
IndexedDB：依赖 StorageManager.estimate() 间接评估
IndexedDB 本身无配额 API，但 navigator.storage.estimate() 可返回当前 origin 下所有持久化存储（含 IndexedDB、Cache API 等）的综合 usage 和 quota：
- 调用后检查
usage / quota比值，>80% 即提示空间紧张 - 注意兼容性：Safari 可能返回
quota: 0，需加try/catch并降级为“不可知”状态 - 建议在关键操作前（如批量写入前）主动检测一次，避免高频轮询
进度条 UI 实现：语义化 + 可访问 + 视觉友好
用原生 标签是最简方案，兼顾语义和无障碍支持：
- 结构示例：
- 必须设置
aria-valuenow、aria-valuemin、aria-valuemax，确保屏幕阅读器正确播报 - CSS 定制轨道与填充色（如
progress::-webkit-progress-bar和::-webkit-progress-value），不同占用率可用颜色区分（绿色→黄色→红色）
异常与引导：配额不足时不只是显示红色
单纯进度条满格不够，用户需要知道“接下来怎么办”：
- 监听 IndexedDB 的
QuotaExceededError，捕获后立即暂停写入并触发清理逻辑 - 前端可温和提示：“本地缓存接近上限，已自动清理 7 天前日志”
- 提供一键清空按钮，调用
indexedDB.deleteDatabase()或清空 localStorage，并重置进度条 - 对非核心数据，主动降级为内存 Map 或 sessionStorage 存储，缓解压力
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
