前言
大家好,我是林三心,用最通俗易懂的话讲最难的知识点是我的座右铭,基础是进阶的前提是我的初心
LocalStorage 容量
localStorage
的容量大家都知道是 5M
,但是却很少人知道怎么去验证,而且某些场景需要计算 localStorage
的剩余容量时,就需要我们掌握计算容量的技能了~~
计算总容量
我们以 10KB
一个单位,也就是 10240B
, 1024B
就是 10240
个字节的大小,我们不断往 localStorage
中累加存入 10KB
,等到超出最大存储时,会报错,那个时候统计出所有累积的大小,就是总存储量了!
注意:计算前需要先清空 LocalStorage
let str = '0123456789'
let temp = ''
// 先做一个 10KB 的字符串
while (str.length !== 10240) {
str = str + '0123456789'
}// 先清空
localStorage.clear()const computedTotal = () => {
return new Promise((resolve) => {
// 不断往 LocalStorage 中累积存储 10KB
const timer = setInterval(() => {
try {
localStorage.setItem('temp', temp)
} catch {
// 报错说明超出最大存储
resolve(temp.length / 1024 - 10)
clearInterval(timer)
// 统计完记得清空
localStorage.clear()
}
temp += str
}, 0)
})
}(async () => {
const total = await computedTotal()
console.log(`最大容量${total}KB`)
})()
最后得出的最大存储量为
5120KB ≈ 5M
文章图片
已使用容量 计算已使用容量,我们只需要遍历
localStorage
身上的存储属性,并计算每一个的 length
,累加起来就是已使用的容量了~~~const computedUse = () => {
let cache = 0
for(let key in localStorage) {
if (localStorage.hasOwnProperty(key)) {
cache += localStorage.getItem(key).length
}
}
return (cache / 1024).toFixed(2)
}(async () => {
const total = await computedTotal()
let o = '0123456789'
for(let i = 0 ;
i < 1000;
i++) {
o += '0123456789'
}
localStorage.setItem('o', o)
const useCache = computedUse()
console.log(`已用${useCache}KB`)
})()
可以查看已用容量
文章图片
剩余可用容量 我们已经计算出
总容量
和 已使用容量
,那么 剩余可用容量 = 总容量 - 已使用容量
const computedsurplus = (total, use) => {
return total - use
}(async () => {
const total = await computedTotal()
let o = '0123456789'
for(let i = 0 ;
i < 1000;
i++) {
o += '0123456789'
}
localStorage.setItem('o', o)
const useCache = computedUse()
console.log(`剩余可用容量${computedsurplus(total, useCache)}KB`)
})()
可以得出剩余可用容量
文章图片
结语 我是林三心,一个热心的前端菜鸟程序员。如果你上进,喜欢前端,想学习前端,那咱们可以交朋友,一起摸鱼哈哈,摸鱼群,加我请备注【思否】
【面试官居然要我用JS代码计算LocalStorage容量!】
文章图片
推荐阅读
- [记录] TypeError: Invalid attempt to spread non-iterable instance.
- 《重构 JavaScript》读后感和部分摘录
- DNS域名解析过程简述
- 如何实现一个简单的发布订阅模式
- 选择篇(041)-下面代码的输出是什么?
- 首屏时间,你说你优化了,那你倒是计算出给给我看啊!
- 选择篇(021)-下面代码的输出是什么?
- 精读《zustand 源码》
- 浅谈js的垃圾回收机制