面试官居然要我用JS代码计算LocalStorage容量！

LocalStorage 容量

localStorage的容量大家都知道是5M，但是却很少人知道怎么去验证，而且某些场景需要计算localStorage的剩余容量时，就需要我们掌握计算容量的技能了~~ctw28资讯网——每日最新资讯28at.com

计算总容量

我们以10KB一个单位，也就是10240B，1024B就是10240个字节的大小，我们不断往localStorage中累加存入10KB，等到超出最大存储时，会报错，那个时候统计出所有累积的大小，就是总存储量了！ctw28资讯网——每日最新资讯28at.com

注意：计算前需要先清空LocalStoragectw28资讯网——每日最新资讯28at.com

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 ≈ 5Mctw28资讯网——每日最新资讯28at.com

图片ctw28资讯网——每日最新资讯28at.com

已使用容量

计算已使用容量，我们只需要遍历localStorage身上的存储属性，并计算每一个的length，累加起来就是已使用的容量了~~~ctw28资讯网——每日最新资讯28at.com

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`)})()

可以查看已用容量ctw28资讯网——每日最新资讯28at.com

图片ctw28资讯网——每日最新资讯28at.com

剩余可用容量

我们已经计算出总容量和已使用容量，那么剩余可用容量 = 总容量 - 已使用容量ctw28资讯网——每日最新资讯28at.com

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`)})()

可以得出剩余可用容量ctw28资讯网——每日最新资讯28at.com

本文链接：http://www.28at.com/showinfo-26-82034-0.html面试官居然要我用JS代码计算LocalStorage容量！

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇： 分布式限流方案的探索与实践

下一篇： React Router v6 完全指南，超实用！