LocalStorage 容量

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

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

我們以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ò)說(shuō)明超出最大存儲(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，累加起來(lái)就是已使用的容量了~~~

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è)萘亢鸵咽褂萌萘?，那么剩余可用容?= 總?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`)
})()

可以得出剩余可用容量

以上就是JS代碼計(jì)算LocalStorage容量示例詳解的詳細(xì)內(nèi)容，更多關(guān)于JS計(jì)算LocalStorage容量的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論