如何用存储容量限制判断 localStorage 是否已满并执行清理-js教程-PHP中文网

localstorage 无“是否已满”api，需用试探写入+quotaexceedederror捕获判断容量；主流容量5–10mb，推荐封装setitemwithcleanup自动清理，配合预估大小、统一管理和预防性策略提升可靠性。

如何用存储容量限制判断 localstorage 是否已满并执行清理

localStorage 没有直接提供“是否已满”的 API，但可以通过尝试写入数据并捕获异常来判断容量是否耗尽。主流浏览器的 localStorage 容量通常为 5–10 MB（具体因浏览器和隐私模式而异），超出时会抛出 QuotaExceededError。关键不是预先计算剩余空间，而是用“试探写入 + 异常处理”机制触发清理逻辑。

用 try-catch 检测写入失败并触发清理

这是最可靠、兼容性最好的方式：尝试存入一小段测试数据，若失败，说明接近或已达上限，此时执行自定义清理策略。

不要依赖 localStorage.length 或 JSON.stringify(localStorage).length —— 这无法反映真实字节数，且序列化可能本身触发异常
写入内容应足够小（如 "test"），避免因单次写入过大误判
清理前先备份关键字段（如用户偏好、登录态 token），防止误删

实现一个安全的 setItemWithCleanup 方法

封装写入逻辑，自动处理容量不足场景：

function setItemWithCleanup(key, value) {
  try {
    localStorage.setItem(key, value);
  } catch (e) {
    if (e.name === 'QuotaExceededError') {
      console.warn('localStorage 已满，启动清理');
      cleanupStorage();
      // 清理后重试一次
      localStorage.setItem(key, value);
    } else {
      throw e;
    }
  }
}
<p>function cleanupStorage() {
// 示例：删除 30 天前的过期项（需提前约定时间戳字段格式）
const now = Date.now();
for (let i = localStorage.length - 1; i >= 0; i--) {
const key = localStorage.key(i);
const item = localStorage.getItem(key);
try {
const parsed = JSON.parse(item);
if (parsed.<strong>expires && parsed.</strong>expires </p><h3>预防性策略比被动清理更有效</h3><p>单纯等报错再清理体验较差。建议结合以下做法降低风险：</p>

写入前估算大小：用 new TextEncoder().encode(str).length 获取 UTF-8 字节长度，对大对象做粗略预判（注意：实际占用略大于此值，因 key 名、JSON 开销等）
统一管理存储：用封装类（如 StorageManager）接管所有读写，内置容量监控与淘汰逻辑
敏感数据优先使用 sessionStorage 或内存缓存；非关键日志、埋点数据可降级到 cookie 或直接丢弃
在页面加载或空闲时主动调用轻量清理（如清除临时搜索历史），避免集中爆满