面試官居然要我用JS程式碼計算LocalStorage容量！

前言

大家好，我是林三心，用最通俗易懂的話講最難的知識點是我的座右銘，基礎是進階的前提是我的初心

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

可以得出剩餘可用容量

結語

我是林三心，一個熱心的前端菜鳥程式設計師。如果你上進，喜歡前端，想學習前端，那我們們可以交朋友，一起摸魚哈哈，摸魚群，加我請備註【思否】