面試官居然要我用JS代碼計(jì)算LocalStorage容量！

作者：Sunshine_Lin

簡(jiǎn)介：「前端之神」的號(hào)主江湖人稱林三心，現(xiàn)已有100+篇原創(chuàng)文章，全網(wǎng)粉絲高達(dá)1w+，面試過超過100+個(gè)前端程序員，全網(wǎng)獲贊2w+，全網(wǎng)閱讀量播放量超過60w，更是B站「面試進(jìn)階成為大佬」系列視頻的Up主。喜歡分享Vue，React，Typescript等高級(jí)前端知識(shí)。

來源：SegmentFault  思否社區(qū) 

前言

---

大家好，我是林三心，用最通俗易懂的話講最難的知識(shí)點(diǎn)是我的座右銘，基礎(chǔ)是進(jìn)階的前提是我的初心

LocalStorage 容量

---

localStorage 的容量大家都知道是 5M ，但是卻很少人知道怎么去驗(yàn)證，而且某些場(chǎng)景需要計(jì)算 localStorage 的剩余容量時(shí)，就需要我們掌握計(jì)算容量的技能了~~

計(jì)算總?cè)萘?/span>

---

我們以 10KB 一個(gè)單位，也就是 10240B ， 1024B 就是 10240 個(gè)字節(jié)的大小，我們不斷往 localStorage 中累加存入 10KB ，等到超出最大存儲(chǔ)時(shí)，會(huì)報(bào)錯(cuò)，那個(gè)時(shí)候統(tǒng)計(jì)出所有累積的大小，就是總存儲(chǔ)量了！

注意：計(jì)算前需要先清空 LocalStorage

let str = '0123456789'
let temp = ''
// 先做一個(gè) 10KB 的字符串
while (str.length !== 10240) {
  str = str + '0123456789'
}

// 先清空
localStorage.clear()

const computedTotal = () => {
  return new Promise((resolve) => {
    // 不斷往 LocalStorage 中累積存儲(chǔ) 10KB
    const timer = setInterval(() => {
      try {
        localStorage.setItem('temp', temp)
      } catch {
        // 報(bào)錯(cuò)說明超出最大存儲(chǔ)
        resolve(temp.length / 1024 - 10)
        clearInterval(timer)
        // 統(tǒng)計(jì)完記得清空
        localStorage.clear()
      }
      temp += str
    }, 0)
  })
}

(async () => {
  const total = await computedTotal()
  console.log(`最大容量${total}KB`)
})()

最后得出的最大存儲(chǔ)量為 5120KB ≈ 5M

已使用容量

---

計(jì)算已使用容量，我們只需要遍歷 localStorage 身上的存儲(chǔ)屬性，并計(jì)算每一個(gè)的 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`)
})()

可以查看已用容量

剩余可用容量

---

我們已經(jīng)計(jì)算出 總?cè)萘?nbsp;和 已使用容量 ，那么 剩余可用容量 = 總?cè)萘?- 已使用容量

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

可以得出剩余可用容量

---

點(diǎn)擊左下角閱讀原文，到 SegmentFault 思否社區(qū) 和文章作者展開更多互動(dòng)和交流，掃描下方”二維碼“或在“公眾號(hào)后臺(tái)“回復(fù)“ 入群 ”即可加入我們的技術(shù)交流群，收獲更多的技術(shù)文章~

- END -