1. ホーム
  2. javascript

[解決済み] localStorageのサイズの求め方

2022-05-01 01:40:07

質問

現在、HTML5のlocalStorageを利用したサイトを開発中です。ブラウザごとのサイズ制限については、すべて読みました。しかし、localStorageインスタンスの現在のサイズを調べる方法については、何も見当たりません。 この質問 は、JavaScript には、与えられた変数のサイズを表示する方法が組み込まれていないことを示しているようです。localStorageには、私が見たことのないメモリサイズのプロパティがあるのでしょうか?私が見逃しているこれを行うための簡単な方法があるのでしょうか?

私のサイトは、ユーザーが「オフライン」モードで情報を入力できるようにすることを目的としているので、ストレージがほとんどいっぱいになったときに警告を与えることができることは非常に重要です。

どのように解決するのですか?

このスニペットをJavaScriptコンソールで実行します(1行バージョン)。

var _lsTotal=0,_xLen,_x;for(_x in localStorage){ if(!localStorage.hasOwnProperty(_x)){continue;} _xLen= ((localStorage[_x].length + _x.length)* 2);_lsTotal+=_xLen; console.log(_x.substr(0,50)+" = "+ (_xLen/1024).toFixed(2)+" KB")};console.log("Total = " + (_lsTotal / 1024).toFixed(2) + " KB");



読みやすくするために、同じコードを複数行にしたもの

var _lsTotal = 0,
    _xLen, _x;
for (_x in localStorage) {
    if (!localStorage.hasOwnProperty(_x)) {
        continue;
    }
    _xLen = ((localStorage[_x].length + _x.length) * 2);
    _lsTotal += _xLen;
    console.log(_x.substr(0, 50) + " = " + (_xLen / 1024).toFixed(2) + " KB")
};
console.log("Total = " + (_lsTotal / 1024).toFixed(2) + " KB");

または、ブックマークの '場所' フィールドにこのテキストを追加すると、便利に使えます。

javascript: var x, xLen, log=[],total=0;for (x in localStorage){if(!localStorage.hasOwnProperty(x)){continue;} xLen =  ((localStorage[x].length * 2 + x.length * 2)/1024); log.push(x.substr(0,30) + " = " +  xLen.toFixed(2) + " KB"); total+= xLen}; if (total > 1024){log.unshift("Total = " + (total/1024).toFixed(2)+ " MB");}else{log.unshift("Total = " + total.toFixed(2)+ " KB");}; alert(log.join("\n")); 

追伸:コメントでのご要望にお応えして、スニペットを更新しました。現在では、キー自体の長さも含めて計算しています。 javascriptの文字列はUTF-16で格納されるため、それぞれの長さに2倍しています(2バイトを占有します)。

追伸:ChromeとFirefoxの両方で動作するはずです。