localstorage 无直接获取容量的 api,需估算:遍历所有键值对,用 textencoder 获取 utf-8 字节长度求和,可较准确得出实际占用字节数。

LocalStorage 本身没有提供直接获取已使用容量的 API,无法像文件系统那样查“用了多少 MB”。但可以通过估算方式大致判断当前 LocalStorage 的占用情况。
计算已存储数据的字符串长度
LocalStorage 中所有键值对最终都以字符串形式存储,浏览器限制通常是 5MB(约 5,242,880 字节)(不同浏览器略有差异,Chrome/Firefox/Edge 均为 5MB,Safari 约 5MB 但策略更严格)。我们可以将所有 key 和 value 拼接成一个长字符串,用 length 或 UTF-16 编码字节数 来估算占用空间:
- JavaScript 字符串按 UTF-16 编码,大部分常用字符占 2 字节;含 emoji 或部分 Unicode 字符可能占 4 字节
-
localStorage.key(i)配合localStorage.getItem()可遍历所有条目 - 简单估算可用:
JSON.stringify({ ...allEntries }).length * 2(粗略按每字符 2 字节算)
更贴近实际的字节估算方法
更准确的方式是模拟浏览器内部的编码开销,用 TextEncoder 获取 UTF-8 字节长度(更接近底层存储实际占用):
function getLSUsageInBytes() {
let total = 0;
const encoder = new TextEncoder();
for (let i = 0; i <p>注意:<code>TextEncoder</code> 在所有现代浏览器中支持良好(IE 不支持,但 IE 已淘汰);该结果接近真实磁盘/内存占用,比单纯用 <code>.length</code> 更可靠。</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6235" title="Java Maven Code Review"><img
src="https://img.php.cn/upload/skill/000/000/081/179084711841712.jpg" alt="Java Maven Code Review" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill6235" title="Java Maven Code Review" class="overflowclass">Java Maven Code Review</a>
<p class="overflowclass">审查Java Maven项目(ZIP压缩包或GitLab仓库URL),检查代码规范、命名、模块边界、可维护性问题以及重复代码。</p>
</div>
<a rel="nofollow" href="/xiazai/skill6235" title="Java Maven Code Review" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div><h3>查看当前使用率的实用建议</h3><p>单纯数字意义有限,关键在于预防超出限制导致 <code>QuotaExceededError</code>。推荐做法:</p>
- 写入前先估算:
encoder.encode(newKey).length + encoder.encode(newValue).length,再加当前已用,判断是否接近 5MB - 定期清理过期或冗余数据,尤其避免存大量日志、原始图片 base64 等大体积内容
- 对重要数据做 try-catch 包裹,捕获
QuotaExceededError并降级处理(如提示用户、清缓存或切换到 IndexedDB)
浏览器实际限制不是绝对固定值
虽然常说 “5MB”,但真实限制受多种因素影响:
- 同源策略下,每个 origin(协议+域名+端口)独立配额
- 某些浏览器(如 Safari)在隐私模式下会大幅缩减配额(甚至低至 0),或完全禁用
- 系统级存储压力、扩展程序干扰等也可能触发提前拒绝写入
因此,依赖精确容量不如建立健壮的容错机制——监控、分片、降级、提示缺一不可。
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南










