localstorage写入需预判、检查与降级:写入前估算空间并清理,写入时捕获quotaexceedederror异常,失败后按lru策略智能清理或降级至sessionstorage/内存缓存,并上报监控。

LocalStorage 没有内置的“满容量异常”事件,也不会主动抛出错误(如 QuotaExceededError)直到你真正写入失败。因此,**捕获和清理的关键在于:在写入前预判、写入后检查错误、失败后主动降级或清理**。
写入时捕获 QuotaExceededError 异常
这是最直接的兜底方式。所有设置操作(setItem)在超出配额(通常 5–10MB,因浏览器而异)时会同步抛出 DOMException,且 name 为 "QuotaExceededError":
function safeSetItem(key, value) {
try {
localStorage.setItem(key, value);
} catch (e) {
if (e.name === 'QuotaExceededError') {
console.warn('LocalStorage 已满,清理旧数据中...');
cleanupStorage();
// 可选:重试一次
try {
localStorage.setItem(key, value);
} catch (e2) {
console.error('清理后仍写入失败', e2);
throw e2;
}
} else {
throw e;
}
}
}
写入前估算剩余空间(启发式判断)
虽然无法精确获取已用/剩余字节数,但可通过估算总大小辅助决策:
- 遍历所有 key,累加
key.length + localStorage.getItem(key).length(单位:UTF-16 字符数,近似字节数 ×2) - 设定安全阈值(如 4.5MB),超过即触发清理
- 注意:该方法有性能开销,适合低频写入或初始化时调用
实现智能清理策略(按需 + LRU)
不要盲目清空,而是保留关键数据、移除过期或低优先级项:
- 为每个存入项添加时间戳(如
{value: "...", ts: Date.now()}),JSON 存储 - 清理时按
ts排序,删除最老的若干项,直到预估空间回落到安全线 - 可标记“不可清理”字段(如
keep: true),保护登录态、用户偏好等核心数据 - 示例:只清理带
_temp或_cache后缀的 key
降级方案:写入失败后自动切换存储方式
当 LocalStorage 不可用时,提供优雅回退:
- 尝试写入
sessionStorage(同域、无持久性,适合临时数据) - 内存缓存(
Map或全局对象),页面刷新即丢失,但保证运行时不崩溃 - 上报监控:记录失败次数、key 名、大致体积,用于后续容量优化
- 避免静默失败——对用户关键操作(如草稿保存),应提示“本地保存受限,建议清理浏览器缓存”
不复杂但容易忽略:每次写入都应有防御逻辑,而不是只在初始化时检查一次。真正的稳定性来自写入路径的健壮性,而非预测。
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











