JavaScript中LocalStorage怎么统计已使用的字节大小与剩余空间-js教程-PHP中文网

localstorage无统一容量上限，实际空间取决于浏览器、平台与系统状态；超限时setitem()抛出quotaexceedederror；需用textencoder计算utf-8字节长度并预留余量；应试探+异常捕获双保险；清理须按前缀、过期、损坏精准剔除；大数据应降级至indexeddb或分片存储。

javascript中localstorage怎么统计已使用的字节大小与剩余空间

LocalStorage 本身没有直接提供“已用字节”或“剩余空间”的 API，但可以通过手动计算所有键值对的 UTF-16 字符长度来估算已用空间（单位：字节）。注意：浏览器对 LocalStorage 的限制通常是 5MB（约 5,242,880 字节），但实际可用值因浏览器而异，且按字符串的 UTF-16 编码字节数计算（每个字符占 2 字节，代理对占 4 字节）。

统计 LocalStorage 已使用的字节大小

遍历所有 key 和 value，将它们转为字符串后，累加其 UTF-16 字符数 × 2（粗略估算字节数）。这是最常用、兼容性最好的方式：

OpenJDK 24

下载

function getLocalStorageSize() {
  let total = 0;
  for (let key in localStorage) {
    if (localStorage.hasOwnProperty(key)) {
      // key 和 value 都要算（key 也是字符串，有长度）
      total += key.length * 2;
      const value = localStorage.getItem(key);
      if (value !== null) {
        total += value.length * 2;
      }
    }
  }
  return total; // 单位：字节
}
console.log(getLocalStorageSize() + ' bytes used'); // 例如：1248 bytes used

⚠️ 注意：
- 该方法不计入内部存储开销（如 key 的哈希、元数据），仅估算有效载荷；
- 若 value 是对象，需先 JSON.stringify 再计算，否则 .length 对 [object Object] 返回 15；
- 某些特殊 Unicode 字符（如 emoji）在 JavaScript 中是代理对（surrogate pair），占 2 个 UTF-16 码元 → 实际占 4 字节，但 .length 返回 2，因此上述方法会低估 —— 如需高精度，可用 new TextEncoder().encode(str).length（仅现代浏览器支持）。

判断是否接近容量上限（实用检测）

单纯算字节数不如尝试写入来得可靠。可封装一个安全写入函数，捕获 QuotaExceededError：

function safeSetItem(key, value) {
  try {
    localStorage.setItem(key, value);
    return { success: true };
  } catch (e) {
    if (e.name === 'QuotaExceededError') {
      return { success: false, reason: 'Storage full' };
    }
    throw e;
  }
}

这个方式更贴近真实场景，尤其适合在保存前做兜底判断。