LocalStorage 溢出时静默失败,需主动检测容量、写入后校验,并按时间/频次/体积分级清理,必要时降级至 sessionStorage 或 IndexedDB。

LocalStorage 溢出时不会抛出 JavaScript 异常,而是静默失败(setItem 无报错但不写入),因此无法用 try...catch 直接捕获。必须主动检测容量、预判风险,并在写入前或写入后验证是否成功。
判断是否已接近或超出容量限制
可通过尝试写入一段测试数据来间接探测剩余空间,或估算当前使用量与浏览器理论上限(通常 5MB,但实际因编码、键名长度等略有浮动)的差距:
- 用
JSON.stringify(localStorage).length粗略估算字节数(注意:该方式会包含键名、引号、逗号等额外字符,结果偏大,仅作参考) - 更可靠的做法是封装一个试探性写入函数:生成一段可控长度的字符串(如 100KB),循环
setItem直到失败,从而反推可用空间 - 注意:不同浏览器、私密模式、存储策略(如第三方 Cookie 限制)下实际限额可能低至 2MB 或更低,不能硬编码 5MB
写入前主动校验 + 写入后确认有效性
避免“以为存进去了,其实没成功”的陷阱:
- 写入后立即用
localStorage.getItem(key) === value校验内容是否一致(注意类型转换,建议用JSON.stringify对比) - 若校验失败,说明已满或被拦截(如 Safari 无痕模式默认禁用 localStorage),应触发清理逻辑而非静默忽略
- 可封装安全写入函数,例如:
safeSetItem(key, value),内部含校验和 fallback 处理
自动清理策略:按时间/频率/大小分级淘汰
当检测到空间紧张时,不应盲目清空,而应有选择地释放:
Java项目代码review工具。分析Git变更+完整调用链路上下文,推断业务需求,进行多维度评分和分类汇总,生成完整PRD文档。包含细粒度Java代码审查清单(Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
立即学习“Java免费学习笔记(深入)”;
-
按时间淘汰:为每条数据记录写入时间戳(如
{data: '...', ts: Date.now()}),定期清除 7 天前的缓存 - 按访问频次淘汰:配合 usage 计数器,优先保留高频 key(需额外维护计数字段)
- 按体积降级清理:先删最大的几项;或对超大值(如 >500KB 的日志)单独限长、截断或转存 IndexedDB
- 清理后务必重新校验,防止“删完还是写不进”——可能因碎片化导致连续空间不足
降级方案:LocalStorage 不可用时的备选路径
不要把所有鸡蛋放在一个篮子里:
- 优先尝试 localStorage;失败则降级到
sessionStorage(适合临时数据) - 对重要或大量数据,直接使用
IndexedDB(支持事务、更大容量、异步) - 极简场景下可考虑内存缓存(
Map或全局对象),页面刷新即失效,但完全规避存储限制 - 服务端兜底:将关键状态通过 API 同步至后端,前端只存轻量标识
不复杂但容易忽略:溢出不是运行时错误,而是逻辑失效。真正的健壮性来自主动探测、写后验证和分层降级,而不是等待异常发生。

















