计算localStorage总量/剩余容量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>容量</title>
</head>
<body>
<div class="use">
使用：
</div>
<button class="btn1">获取使用</button>
<hr />
<div class="total">
总数：
</div>
<button class="btn2">获取总数</button>
<button class="btn3">暂停总数</button>
<hr />
<script>
function getUseSize() {
var size = 0;
for(item in window.localStorage) {
if(window.localStorage.hasOwnProperty(item)) {
size += window.localStorage.getItem(item).length;
}
}
document.querySelector('.use').innerHTML = '使用：' + (size / 1024).toFixed(2) + 'KB'
}
document.querySelector('.btn1').addEventListener('click', function () {
getUseSize();
})
var timer
function getTotalSize() {
localStorage.clear();
var test = '0123456789';
var add = function(num) {
num += num;
if(num.length === 10240) {
test = num;
return;
}
add(num);
}
add(test);
var sum = test;
timer = setInterval(function(){
sum += test;
try {
localStorage.removeItem('test');
localStorage.setItem('test', sum);
document.querySelector('.total').innerHTML = '总数：' + sum.length / 1024 + 'KB'
} catch(e) {
alert(sum.length / 1024 + 'KB超出最大限制');
clearInterval(timer);
}
}, 0.1)
}
document.querySelector('.btn2').addEventListener('click', function () {
getTotalSize();
})
document.querySelector('.btn3').addEventListener('click', function () {
clearInterval(timer);
})
</script>
</body>
</html>
标签:
JavaScript
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· winform 绘制太阳，地球，月球 运作规律
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· AI与.NET技术实操系列（五）：向量存储与相似性搜索在 .NET 中的实现
2019-03-27 HTML中href、src区别
2019-03-27 JS常用插件