The interviewer actually asked me to use JS code to calculate the LocalStorage capacity!

foreword

Hello everyone, I am Lin Sanxin, uses the most simple and easy-to-understand words to talk about the most difficult knowledge points. is my motto. foundation is the premise of .

LocalStorage capacity

Everyone knows that the capacity of localStorage is 5M , but few people know how to verify it, and in some scenarios, when the remaining capacity of localStorage needs to be calculated, we need to master the skills of calculating capacity~~

Calculate total capacity

We take 10KB a unit, that is, 10240B , 1024B is the size of 10240 bytes, we keep accumulating 062256730ba2b9 and storing localStorage in 10KB . When the maximum storage is exceeded, an error will be reported. At that time, all the accumulated sizes will be counted, which is the total storage. Measured!

Note: LocalStorage needs to be cleared before calculation

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

The final maximum storage amount is 5120KB ≈ 5M

used capacity

To calculate the used capacity, we only need to traverse the storage attributes on localStorage , and calculate the length of each, and add up to the used capacity~~~

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

Can view used capacity

Remaining available capacity

We have calculated total capacity and used capacity, then remaining available capacity = total capacity - used capacity

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

Remaining available capacity can be obtained

Epilogue

I'm Lin Sanxin, an enthusiastic front-end rookie programmer. If you are motivated, like the front-end, and want to learn the front-end, then we can make friends and fish together haha, touch the fish group, add me, please note [Si No]