【WebAPI】LocalStorageに格納できるmaxサイズ

LocalStorageに格納できるmaxサイズを知らなかったので調査

一つのkeyに何バイトまで格納できるのかを下のHTMLをつかって確認した（headとかは省略）

setIntervalで100KBずつ文字列を増やしていって、何バイトでエラーが発生するか

<button onclick="start();">実行</button>
<script>
  var storage = window.localStorage;
  var stringUnit = "";
  var byteUnite = 100 * 1024; // 100KB
  for (var i = 0; i < byteUnite; i++) {
    stringUnit += "a";
  }
  var timer = null;
  var key = "key";
  var value = "";
  var byte = 0;
  function start(){
    timer = setInterval(function(){
      try {
        storage.clear();
        value += stringUnit;
        byte += byteUnite;
        storage.setItem(key, value); // local storageに格納する
        console.log(byte);
      } catch(error) {
        console.log(error);
        clearTimeout(timer);
      }
    }, 100);
  };
</script>

結果

5222400 Byte
index3.html:79 DOMException: Failed to execute 'setItem' on 'Storage': Setting the value of 'key' exceeded the quota.

だいたい5MBくらい

ただブラウザによって変わるようなのでギリギリを攻めるような使い方はしない方がよさそう