js storage 存储大小测试

问题由来：网上说 localStorage 和 sessionStorage 的存储大小是 5M，那么这是一个精确数字还是一个估算数字？

测试下：

function getSize(storage) {
  const _storage = window[storage];
  let pieces = [20, 18, 16, 14, 12, 10, 8, 6, 4, 2, 0].map(
      (bits) => 2 ** bits
    ),
    size = 0;
  function trySize() {
    if (pieces.length) {
      const piece = pieces.shift();
      try {
        while (true) {
          size += piece;
          _storage.setItem(`${storage}:test`, "1".repeat(size));
        }
      } catch (err) {
        size -= piece;
        trySize();
      }
    }
  }

  _storage.clear();

  trySize();

  _storage.clear();

  return size;
}

console.log(getSize("localStorage")); // 5242863
console.log(getSize("sessionStorage")); // 5242861

分析：这个结果一看就知道不是 5 * 2 ** 20，肯定不是 5M，直接在浏览器 F12 测试下这个结果，

可以看到，增加一个字节也能存储，为什么会这样呢，我看了好几次代码都没找到问题所在。

然后我就继续在 F12 里测试了很多遍，终于发现问题了，

从上面几条测试记录来看，'aaa' 的存储大小为 5242877，'aaaa' 的存储大小为 5242876，刚好差一个字节，而 'aaa' 和 'aaaa' 也刚好差一个字节，

这是不是说 localStorage 的存储大小是指 key 和 value，而不是单独的 value，

然后我们把 key 和 value 的字节数相加，

终于发现了，key 和 value 是作为一个整体存储的，这个数字刚好是 5 * 2 ** 20，

结果：由此可见，localStorage 的存储大小是刚好 5M，

继续测试下 sessionStorage 也是这样的，

上面代码的 return 需要改下，

return size + `${storage}:test`.length;

再次调用这个方法，

 终于对上了，/(ㄒoㄒ)/~~