HTML5 localStorage无自动限流机制，需开发者主动预估容量、预留0.5–1MB缓冲，并通过probe试探、前缀分类清理及内存/URL等分级降级兜底。
HTML5 本地存储（主要是 localStorage）本身**没有内置的“自动限流”或“软性配额上限设置”机制**，浏览器不会主动阻止你写入、也不会在达到某个百分比时预警。所谓“限制最大占用空间”，实际是靠开发者主动设计策略来规避溢出——不是浏览器帮你限，而是你得自己管。
预估容量 + 预留缓冲
别等 QuotaExceededError 才反应。关键动作是：提前估算、主动留余。
- 用
new TextEncoder().encode(str).length（现代浏览器）或兼容写法encodeURIComponent(str).length计算字符串真实字节长度（注意：中文、emoji 在 UTF-16 下占 2 或 4 字节，.length不等于字节数） - 对每个待存对象，先
JSON.stringify(obj).length得出原始体积；叠加已有估算值，超过目标阈值（如 4MB）就触发清理或降级 - 始终预留至少 0.5–1MB 缓冲空间，避免因浏览器内部开销（如 key 名、元数据）意外触顶
写入前轻量试探
最简单可靠的“是否还能写”判断，不依赖估算误差：
- 调用
localStorage.setItem('probe', 'x')尝试写入一个极小项 - 成功则立即
localStorage.removeItem('probe')清除，不影响业务数据 - 失败则说明已满或被禁用（如 Safari 无痕模式），直接走降级逻辑
按前缀分类管理 + 定期清理
避免一刀切 clear() 导致登录态、用户设置丢失：
立即学习“前端免费学习笔记（深入）”；
- 所有缓存类 key 统一加前缀，例如
cache_search_、draft_form_、log_error_ - 写入新数据前，检查同类 key 总量或总大小，超限时按时间戳（如 key 含
_ts1725387600）删除最旧的若干条 - 可配合
localStorage.key(i)遍历 + 正则匹配前缀，安全删除，不污染原型链
分级降级兜底路径
当 localStorage 真的不可用，要有明确 fallback：
- 降级到内存 Map：页面生命周期内有效，适合临时状态（如表单草稿、筛选条件）
- 关键操作后立即
getItem()校验，确保写入成功（iOS Safari 后台可能静默丢弃） - 若连内存都不想依赖，可将最小必要状态序列化进 URL hash 或
sessionStorage（部分浏览器仍允许）
