LoginSignup
3

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-10-17

結論から

皆さんご存知の通り、各ブラウザの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が最小単位になります。 

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3