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

前提・実現したいこと

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

発生している問題

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

該当のソースコード

最終的にはこの流れで、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
  }
}

行動規範の内容に同意します

回答2件

ベストアンサー

提示コードはここのスクリプトを利用したものでしょうか？
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)

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

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

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

投稿2019/11/15 02:52

x_x

総合スコア13749

kasumisou

2019/11/15 05:23

>という問題があります。こちらで渡した容量は把握できますが、まず初めに大きなデータを渡したいのでどのくらい渡せるかという最大容量が知りたいんですよね。時間は容認しますし、使用可否は分岐します。 >としてもいいかもしれません。はい、おおざっぱで構いません。コードの意図がわからないの教えて頂きたいのですが、「現状のストレージにJSON.stfingifyをかけて、数えて、２倍する」というのは何をしているのでしょうか？