IE, Edgeにはドメイン全体でもLocalStorageの容量制限がある


結論から

皆さんご存知の通り、各ブラウザのlocalStorageはドメイン毎に○○MBまでという容量制限があります(ChromeやIEでは10MB)

実は、IEやEdgeには更にドメイン全体(同一のルートドメインを持つサイト)の合計が20MBまでという制限があります。
サブドメインを3つ以上持つようなサイトでは、各々のサイトで10MB使い切ることができません。

例えば、

example.comというドメインで

  • aaa.example.com
  • bbb.example.com
  • ccc.example.com

のように3つのサブドメインを使っているとすると、
IE/Edgeでは、aaa.example.comでローカルストレージを10MB、bbb.example.comでローカルストレージを10MB使ってしまうと、ccc.example.comでは容量不足でローカルストレージが使えなくなります。

検証

6つのサブドメインを持つサイトでlocalStorageの容量超過エラー(QuotaExceededError)がやたら発生する。それもIEだけ。
⇒検証してみることに

検証環境

  • OS
    • Windows 10 バージョン1803 ビルド17134.345 (64bit)
  • ブラウザ
    • Internet Explorer 11.345.17134.0
    • Microsoft Edge 42.17134.1.0
    • Google Chrome 69.0.3497.100

検証に使用したコード

以下のコードを各サイトのコンソールで実行します。
localStorageを2Byte単位でほぼ完全に埋めるコードです。1

localStorage.clear();

(function() {
  var str2Bytes = "a";

  var hugeStr = "", preHugeStr = "";
  var quotaExceed = false;
  var increaseBytes = 1000000;

  while (true) {
    if (quotaExceed) {
      increaseBytes /= 10;
      if (increaseBytes < 1) break;
      quotaExceed = false;
    }

    preHugeStr = hugeStr;
    hugeStr += Array(increaseBytes+1).join(str2Bytes);

    try {
      localStorage.setItem("0", hugeStr);
    } catch(e) {
      hugeStr = preHugeStr;
      quotaExceed = true;
    }
  }

  return preHugeStr.length*2+2; // localStorageのkeyでも1文字(2byte)使っているので足して返す
})();

検証を終えたら

localStorage.clear();

するのも忘れないように

検証結果

IE Edge Chrome
サブドメイン毎 10MB 10MB 10MB
ドメイン全体 20MB 20MB 無制限(300MB以上)

IEとEdgeでは3個目のサブドメインでlocalStorageに1Byteも保存できなくなりました。
Chromeでは用意した30個のサブドメイン全てに10MB保存できました。

最後に

公式に得られた情報ではなく、検証によって推測した仕様ですので、誤っている可能性もあります。
間違いなどありましたら教えていただければ幸いです。


調べてみたらこんなのがあったので、その対策でしょうか。

■アクセスするだけで空き領域が勝手にどんどん減っていく「FillDisk.com」 - GIGAZINE
https://gigazine.net/news/20130304-filldisk-html5-localstorage/


  1. JavaScriptのStringはUTF-16形式ですので、1文字=2Byteが最小単位になります。