面试官居然要我用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
面试官居然要我用JS代码计算LocalStorage容量!
文章图片

已使用容量 计算已使用容量,我们只需要遍历 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`) })()

可以查看已用容量
面试官居然要我用JS代码计算LocalStorage容量!
文章图片

剩余可用容量 我们已经计算出 总容量 已使用容量 ,那么 剩余可用容量 = 总容量 - 已使用容量
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代码计算LocalStorage容量!
文章图片

结语 我是林三心,一个热心的前端菜鸟程序员。如果你上进,喜欢前端,想学习前端,那咱们可以交朋友,一起摸鱼哈哈,摸鱼群,加我请备注【思否】
【面试官居然要我用JS代码计算LocalStorage容量!】面试官居然要我用JS代码计算LocalStorage容量!
文章图片

    推荐阅读