質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.64%

仕様端末のローカルストレージの最大容量を取得したい

解決済

回答 2

投稿

  • 評価
  • クリップ 1
  • VIEW 931

kasumisou

score 8

前提・実現したいこと

ページ読み込み時にローカルストレージの容量を取得し、それに応じた処理を行いたいです。

発生している問題

ローカルストレージの容量が取得できません

該当のソースコード

最終的にはこの流れで、currentSize として取得した容量に対して、処理をわけようと考えています。

window.onload = function() {
  if (!window.localStorage) {
    alert("LocalStorageがサポートされていないため、本ページは利用できません。");
    return;
  }
  var currentSize = start();
  if( currentSize <= 100 ){
      // 処理A
  }
  else if( currentSize >= 101 ){
      // 処理B
  }
}

試したこと

上のコードのための start() などがこちらです。

var ls = window.localStorage;
var stringLength = 100 * 1024; // 100KB
var string = "";
var stringByte = 0;
for (var i = 0; i < stringLength; i++) {
  string += "あ";
  if (escape("あ".charAt(0)).length < 4) {
    stringByte++;
  } else {
    stringByte += 2;
  }
}
console.log(string.length);
console.log(escape(string.charAt(0)));
var currentSize = 0;
var currentKey  = 0;
var consoleArea = document.getElementById("console");
var timer = null;

function start(){
  console.log("start called.");
  ls.clear();
  timer = setInterval(function(){
    try {
      var key = "key"+(currentKey++);
      ls.removeItem(key);
      ls.setItem(key, string);
      currentSize += stringByte;
      consoleArea.innerHTML = Math.floor(currentSize/1024) + "KB stored.<br>";
    } catch(error) {
      console.log(error);
      consoleArea.innerHTML += "Error Occurred. error=" + error + "<br>";
      clearTimeout(timer);
      clearStorage();
    }
  }, 50);
  return currentSize;
};

function clearStorage(){
  console.log("clear called");
  ls.clear();
  currentSize = 0;
  currentKey  = 0;
};

window.onload = function() {
  if (!window.localStorage) {
    alert("LocalStorageがサポートされていないため、本ページは利用できません。");
    return;
  }
  var currentSize = start();
  if( currentSize <= 100 ){
      // 処理A
  }
  else if( currentSize >= 101 ){
      // 処理B
  }
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+3

提示コードはここのスクリプトを利用したものでしょうか?
https://www.yoheim.net/labo/html5/localstorage/checkLocalStorage.html
コードの直接の問題は setInterval ということなので Promise か async/await を使ってください。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise

さて、実際に入れてみてエラーになったらというのは空き容量を調べるのに有効な方法ではあるのですが
・localStorage はオリジン別なので知らないデータは入っていないはず(おおよその容量は管理できているはず)
・処理時間がかかる
・すでに localStorage を使っていた場合
という問題があります。
なお、IE には remainingSpace プロパティ があるので使える残りの文字数が出せます。(5000000 から引けば使用容量)
https://msdn.microsoft.com/ja-jp/windows/cc197016(v=vs.80)

使用容量を調べるなら内容を列挙するしかないですが、大雑把にしか調べられないならいっそのこと

JSON.stringify(localStorage).replace(/[{}":,\\]/g, '').length * 2;


としてもいいかもしれません。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/11/15 15:40

    使用容量の話です(質問文からはどちらをほしいのかはっきりしなかったため)。
    最大容量はブラウザによるため最初のサイトにあるような調査が必要ですが、単にlocalStorage.clear()とすると当然既存データも消えます。

    キャンセル

  • 2019/11/15 15:52

    「最大容量(質問)=大雑把な計算値 (消費量)+ reamingProperty(残容量)」(IEのみ)
    ですね。

    キャンセル

  • 2019/11/17 15:12

    失礼いたしました。ベストアンサー遅くなりました。ありがとうございました。

    キャンセル

+2

ローカルストレージの容量が取得できません

容量取得の方法は無かったと思います。

私見ですが「上限 3MB/Origin で設計すれば、新旧を問わず安定して動きそうだ」と認識しています。


現在のFirefoxの例では

ブラウザーがクラッシュまたは再起動したとき、オリジンごとに保存されるデータ量は 10MB に制限されます。

とあるように、10MB/Origin に増えている様子ですが、それでも半分くらいで運用するのが無難かと思います。

Qiita ブラウザ側でデータを保存するため各ブラウザにおけるローカルストレージの挙動の調査 2014−11−05 でも
localStorage を(上限を含めて)考察されていますが、古い物は 5MB 弱で error だったらしいです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/11/15 14:26

    たしかに2MBから10MBのようですね。ただこの振れ幅は許容したくないと思い質問いたしました。ちなみに容量取得の方法の代替手段として挙げたのが質問の方法で、この解決が質問の内容になります。

    キャンセル

  • 2019/11/15 14:46

    > この振れ幅は許容したくない
    同感です。「できれば、実運用でも使いやすい方法はないか?」とも思いますよね。
    x_x さんの回答は、良さげですよ。console.log(localStorage) を試してソースの意味が掴めました。

    キャンセル

  • 2019/11/17 15:13

    ありがとうございました。リンク先勉強になりました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.64%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る