面试官居然要我用JS代码计算LocalStorage容量！
前端阳光
共 1410字，需浏览 3分钟
·
2022-04-14 17:43
点击上方 前端阳光，关注公众号
回复加群，加入技术交流群交流群
前言
大家好，我是阳光☀️，今天分享一下一个知识点（快做笔记）
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`)
})()
可以得出剩余可用容量
结语
点个【赞】和【在看】是对林三心最大的鼓励，林三心会非常开心的~~~
关注公众号【前端之神】，回复【加群】，即可获得加入【千人前端学习大群】的方式
我组建了技术交流群，里面有很多 大佬，欢迎进来交流、学习、共建。回复 加群 即可。后台回复「电子书」即可免费获取 27本 精选的前端电子书！
“分享、点赞、在看” 支持一波👍
评论