计算localStorage的使用率

一个有趣的小技巧，如果要大量用到localStorage可能对你有点用处。

前端开发中不免使用到localStorage，今天就来通过计算看看它的大小吧。

首先在不同的编码格式下，字符所占用的字节数可能会有所不同，但我们一般使用的都是UTF-8。

关于编码字节

UTF-8：这是一种可变长度的编码，使用1到4个字节来表示一个字符。对于ASCII字符（如英文字母、数字和标点符号），UTF-8使用1个字节；对于汉字和其他常见的Unicode字符，UTF-8通常使用3个字节。

字节：1 KB（千字节）等于1024 B（字节）。

当然你也可以自己验证一下

    const encoder = new TextEncoder();
    const byteLength = encoder.encode('汉字').length;
    const byteNumLength = encoder.encode('abc123').length;
    console.log(`汉字：${byteLength}，数字字母：${byteNumLength}`);

总容量

然后来localStorage计算总容量

    let str = "0123456789"
    let strTotal = ""
    let strTotalSize = ""
    // 写一个10KB的字符串
    while (str.length !== 10240) {
      str = str + '0123456789'
    }
    // console.log("10KB的字符串:",str);

    // 这儿记得清空一下
    localStorage.clear()

    function computedTotalSize() {
      //定时器不断添加大小
      let timer = setInterval(() => {
        try {
          localStorage.setItem('strTotal', strTotal)
        } catch {
          // 报错说明超出最大存储，添加不了了
          clearInterval(timer)
          strTotalSize = strTotal.length / 1024 - 10
          console.log(`最大容量${strTotalSize}KB`)

          // 最后清空
          localStorage.clear()
        }
        strTotal += str
      }, 0)
    }

    computedTotalSize();

不过有点耗时，最后容量是5110kb，约等于5M。

最后计算已经使用率

    let num = "";
    for (let i = 0; i < 100; i++) {
      num += "123456789"
    }
    localStorage.setItem("num", num);

    function use() {
      let val = 0
      for (let key in localStorage) {
      // hasOwnProperty是JavaScript中的一个方法，用于检查一个对象是否具有指定的属性。这个方法只会检查对象本身的属性，而不会检查对象原型链上的属性。
        if (localStorage.hasOwnProperty(key)) {
          // 注意这儿如果包含了汉字的话，就是三个字节了，另外要做逻辑处理
          val += localStorage.getItem(key).length
        }
      }
      console.log(`已用${(val / 1024).toFixed(2)}KB`)
      console.log(`已使用${(val / 1024)/5110}%`)
      console.log(`剩余${(5110 - val).toFixed(2)}kb`)
    }

    use()