web-dev-qa-db-ja.com

localStorageのサイズを見つける方法

現在、HTML5のlocalStorageを利用するサイトを開発しています。さまざまなブラウザのサイズ制限についてすべて読みました。ただし、localStorageインスタンスの現在のサイズを確認する方法については何も見ていません。 この質問 は、特定の変数のサイズを表示する方法がJavaScriptに組み込まれていないことを示しているようです。 localStorageには、まだ見たことのないメモリサイズプロパティがありますか？これを行う簡単な方法はありますか？

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

javascripthtml5local-storage
94
derivation

JavaScriptコンソールでこのスニペットを実行します。

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のcharはUTF-16（2バイトを占有）として格納されるため、各長さは2倍されます。

P.P.S. ChromeとFirefoxの両方で動作するはずです。

177
Serge Seletskyy

上記の@Shouravが言ったことから離れて、（現在のドメインの）すべてのlocalStorageキーを正確に取得し、結合されたサイズを計算して、どのくらいのメモリが消費されるかを正確に知る小さな関数を書きましたlocalStorageオブジェクトによって：

var localStorageSpace = function(){
        var allStrings = '';
        for(var key in window.localStorage){
            if(window.localStorage.hasOwnProperty(key)){
                allStrings += window.localStorage[key];
            }
        }
        return allStrings ? 3 + ((allStrings.length*16)/(8*1024)) + ' KB' : 'Empty (0 KB)';
    };

返された鉱山："30.896484375 KB"

43
tennisgent

IEには、Storageオブジェクトの remainingSpace プロパティがあります。現時点では、他のブラウザには同等のものがありません。

個人的にはテストしていませんが、デフォルトの容量は5MBであると思います。

18
Adam

これは単純な 例 これを行う方法であり、すべてのブラウザで動作するはずです

alert(1024 * 1024 * 5 - unescape(encodeURIComponent(JSON.stringify(localStorage))).length);
14
jas-

これが誰かを助けることを願っています。

JsfiddleのJas-exampleが機能しないため、このソリューションを思いつきました。 （以下のコードで使用したビットについてSerge SeletskyyとShouravに感謝します）

以下は、localStorageに使用できるスペースの量と（すでにキーがlSにある場合）残っているスペースをテストするために使用できる関数です。

これは少し強引ですが、Firefoxを除くほとんどすべてのブラウザーで動作します。デスクトップFFでは、完了するまでに4〜5分かかり、Androidでクラッシュします。

関数の下には、さまざまなプラットフォームのさまざまなブラウザーで行ったテストの簡単な要約があります。楽しい！

function testLocalStorage() {
    var timeStart = Date.now();
    var timeEnd, countKey, countValue, amountLeft, itemLength;
    var occupied = leftCount = 3; //Shurav's comment on initial overhead
//create localStorage entries until localStorage is totally filled and browser issues a warning.
    var i = 0;
    while (!error) {
        try {
//length of the 'value' was picked to be a compromise between speed and accuracy, 
// the longer the 'value' the quicker script and result less accurate. This one is around 2Kb 
            localStorage.setItem('testKey' + i, '11111111112222222222333333333344444444445555555555666661111111111222222222233333333334444444444555555555566666');
        } catch (e) {
            var error = e;
        }
        i++;
    }
//if the warning was issued - localStorage is full.
    if (error) {
//iterate through all keys and values to count their length
        for (var i = 0; i < localStorage.length; i++) {
            countKey = localStorage.key(i);
            countValue = localStorage.getItem(localStorage.key(i));
            itemLength = countKey.length + countValue.length;
//if the key is one of our 'test' keys count it separately
            if (countKey.indexOf("testKey") !== -1) {
                leftCount = leftCount + itemLength;
            }
//count all keys and their values
            occupied = occupied + itemLength;
        }
        ;
//all keys + values lenght recalculated to Mb
        occupied = (((occupied * 16) / (8 * 1024)) / 1024).toFixed(2);
//if there are any other keys then our 'testKeys' it will show how much localStorage is left
        amountLeft = occupied - (((leftCount * 16) / (8 * 1024)) / 1024).toFixed(2);
//iterate through all localStorage keys and remove 'testKeys'
        Object.keys(localStorage).forEach(function(key) {
            if (key.indexOf("testKey") !== -1) {
                localStorage.removeItem(key);
            }
        });

    }
//calculate execution time
    var timeEnd = Date.now();
    var time = timeEnd - timeStart;
//create message
    var message = 'Finished in: ' + time + 'ms \n total localStorage: ' + occupied + 'Mb \n localStorage left: ' + amountLeft + "Mb";
//put the message on the screen
    document.getElementById('scene').innerText = message; //this works with Chrome,Safari, Opera, IE
//document.getElementById('scene').textContent = message;  //Required for Firefox to show messages
}

そして、上記で約束したように、異なるブラウザーでのテスト：

GalaxyTab 10.1

  • Maxthonパッド1.7〜1130ms 5Mb
  • Firefox 20.0（ベータ20.0）は両方ともクラッシュしました
  • Chrome 25.0.1364.169〜22250ms/5Mb
  • ネイティブ（Safari 4.0/Webkit534.30として識別）〜995ms/5Mb

iPhone 4s iOS 6.1.

  • Safari〜520ms/5Mb
  • HomeAppとして〜525ms/5Mb
  • iCab〜710ms/5mb

MacBook Pro OSX 1.8.3（Core 2 Duo 2.66 8Gbメモリ）

  • Safari 6.0.3〜105ms/5Mb
  • Chrome 26.0.1410.43〜3400ms/5Mb
  • Firefox 20.0 300150ms（！）/ 10Mb（長時間実行されるスクリプトについて不平を言った後）

iPad 3 iOS 6.1.

  • サファリ〜430ms/5Mb
  • iCab〜595ms/5mb

Windows 7 -64b（Core 2 Duo 2.93 6Gbメモリ）

  • Safari 5.1.7〜80ms/5Mb
  • Chrome 26.0.1410.43〜1220ms/5Mb
  • Firefox 20.0 228500ms（！）/ 10Mb（スクリプトが長時間実行されることを訴えた後）
  • IE9〜17900ms /9.54Mb（console.logsがコード内にある場合、DevToolsが開かれるまで機能しません）
  • Opera 12.15〜4212ms /3.55Mb（これは5Mbが選択されている場合ですが、OperaはlSの量を増やしたいかどうかをきちんと尋ねます。

Win 8（Under Parallels 8）

  • IE10〜7850ms /9.54Mb
12
Jakub Gadkowski

次の方法でlocalstorageを計算できます。

function sizeofAllStorage(){  // provide the size in bytes of the data currently stored
  var size = 0;
  for (i=0; i<=localStorage.length-1; i++)  
  {  
  key = localStorage.key(i);  
  size += lengthInUtf8Bytes(localStorage.getItem(key));
  }  
  return size;
}

function lengthInUtf8Bytes(str) {
  // Matches only the 10.. bytes that are non-initial characters in a multi-byte sequence.
  var m = encodeURIComponent(str).match(/%[89ABab]/g);
  return str.length + (m ? m.length : 0);
}

console.log(sizeofAllStorage());

最後に、バイト単位のサイズがブラウザに記録されます。

6
Usman Faisal

すべてを取得してコンテンツをカウントする@tennisgenのコードを使用しますが、キー自体をカウントします。

var localStorageSpace = function(){
        var allStrings = '';
        for(var key in window.localStorage){
            allStrings += key;
            if(window.localStorage.hasOwnProperty(key)){
                allStrings += window.localStorage[key];
            }
        }
        return allStrings ? 3 + ((allStrings.length*16)/(8*1024)) + ' KB' : 'Empty (0 KB)';
    };
4
Arnaud Valensi

ここで最も投票されている@sergeの回答に加えて、キーのサイズを考慮する必要があります。以下のコードは、localStorageに格納されているキーのサイズを追加します

var t = 0; 
for (var x in localStorage) { 
    t += (x.length + localStorage[x].length) * 2; 
} 
console.log((t / 1024) + " KB");
2
Mihir

Blob function。 を使用して、ローカルストレージデータの現在のサイズを取得できます。これは、古いブラウザーでは機能しない可能性があります。

例：

return new Blob(Object.values(localStorage)).size;

Object.values（）は、localStorageオブジェクトを配列に変換します。 Blobは配列を生データに変換します。

2
P Roitto

この問題について行った方法は、ローカルストレージの使用済みスペースと残りのスペースを見つけるための関数を作成し、それらの関数を呼び出して最大ストレージスペースを決定する関数を作成することです。

function getUsedSpaceOfLocalStorageInBytes() {
    // Returns the total number of used space (in Bytes) of the Local Storage
    var b = 0;
    for (var key in window.localStorage) {
        if (window.localStorage.hasOwnProperty(key)) {
            b += key.length + localStorage.getItem(key).length;
        }
    }
    return b;
}

function getUnusedSpaceOfLocalStorageInBytes() {
    var maxByteSize = 10485760; // 10MB
    var minByteSize = 0;
    var tryByteSize = 0;
    var testQuotaKey = 'testQuota';
    var timeout = 20000;
    var startTime = new Date().getTime();
    var unusedSpace = 0;
    do {
        runtime = new Date().getTime() - startTime;
        try {
            tryByteSize = Math.floor((maxByteSize + minByteSize) / 2);
            localStorage.setItem(testQuotaKey, new Array(tryByteSize).join('1'));
            minByteSize = tryByteSize;
        } catch (e) {
            maxByteSize = tryByteSize - 1;
        }
    } while ((maxByteSize - minByteSize > 1) && runtime < timeout);

    localStorage.removeItem(testQuotaKey);

    if (runtime >= timeout) {
        console.log("Unused space calculation may be off due to timeout.");
    }

    // Compensate for the byte size of the key that was used, then subtract 1 byte because the last value of the tryByteSize threw the exception
    unusedSpace = tryByteSize + testQuotaKey.length - 1;
    return unusedSpace;
}

function getLocalStorageQuotaInBytes() {
    // Returns the total Bytes of Local Storage Space that the browser supports
    var unused = getUnusedSpaceOfLocalStorageInBytes();
    var used = getUsedSpaceOfLocalStorageInBytes();
    var quota = unused + used;
    return quota;
}
1
Jed

仕様では、文字列の各文字は16ビットです。

ただし、chrome（[設定]> [コンテンツ設定]> [Cookieとサイトデータ]）で検査すると、localStorageの開始には3kB（オーバーヘッドサイズ）が必要であることがわかります。

そして、保存されたデータサイズはこの関係に従います（1kBに正確）
3 +（（localStorage.x.length * 16）/（8 * 1024）） kB

ここで、localStorage.xはストレージ文字列です。

1
ShouravBR

//メモリはキーと値の両方を占有するため、コードを更新しました。

var jsonarr=[];
var jobj=null;
for(x in sessionStorage) // Iterate through each session key
{
    jobj={}; 
    jobj[x]=sessionStorage.getItem(x); //because key will also occupy some memory
    jsonarr.Push(jobj);
    jobj=null;
}
//https://developer.mozilla.org/en/docs/Web/JavaScript/Data_structures 
//JavaScript's String type is used to represent textual data. It is a set of "elements" of 16-bit unsigned integer values. 
var size=JSON.stringify(jsonarr).length*2; //16-bit that's why multiply by 2
var arr=["bytes","KB","MB","GB","TB"]; // Define Units
var sizeUnit=0;
while(size>1024){ // To get result in Proper Unit
    sizeUnit++;
    size/=1024;
}
alert(size.toFixed(2)+" "+arr[sizeUnit]);
0
Dipak Prajapati