webentwicklung-frage-antwort-db.com.de

So finden Sie die Größe von localStorage

Ich entwickle zurzeit eine Website, die localStorage von HTML5 verwenden wird. Ich habe alles über die Größenbeschränkungen für verschiedene Browser gelesen. Ich habe jedoch noch nichts darüber erfahren, wie man die aktuelle Größe einer localStorage-Instanz ermittelt. Diese Frage scheint darauf hinzuweisen, dass in JavaScript keine integrierte Methode zum Anzeigen der Größe einer bestimmten Variablen vorhanden ist. Hat localStorage eine Speichergröße, die ich nicht gesehen habe? Gibt es eine einfache Möglichkeit, die ich vermisse?

Auf meiner Website können Benutzer Informationen im Offline-Modus eingeben. Daher ist es sehr wichtig, dass sie gewarnt werden, wenn der Speicher fast voll ist. 

84
derivation

Führen Sie dieses Snippet in der JavaScript-Konsole aus:

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");

oder fügen Sie diesen Text in das Feld "Ort" eines Lesezeichens ein, um die Verwendung zu erleichtern

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")); 

P.S. Ausschnitte werden entsprechend der Anforderung im Kommentar aktualisiert. Die Berechnung enthält jetzt die Länge des Schlüssels selbst. Jede Länge wird mit 2 multipliziert, da das Zeichen in Javascript als UTF-16 gespeichert wird (2 Byte belegt)

P.P.S. Sollte sowohl in Chrome als auch in Firefox funktionieren.

155
Serge Seletskyy

Aus dem, was @Shourav oben gesagt hat, habe ich eine kleine Funktion geschrieben, die alle localStorage-Schlüssel (für die aktuelle Domäne) genau packen und die kombinierte Größe berechnen sollte, damit Sie genau wissen, wie viel Speicher Ihr localStorage-Objekt belegt:

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)';
    };

Meins zurückgegeben: "30.896484375 KB"

40
tennisgent

IE verfügt über eine residualSpace - Eigenschaft des Storage-Objekts. Die anderen Browser haben zur Zeit keine Äquivalente.

Ich glaube, dass der Standardspeicherplatz 5 MB beträgt, obwohl ich ihn nicht persönlich getestet habe.

15
Adam

Hier ist ein einfaches Beispiel wie das geht und sollte mit jedem Browser funktionieren

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

Hoffe das hilft jemandem. 

Da Jas-Beispiel auf jsfiddle für mich nicht funktioniert, habe ich mir diese Lösung ausgedacht. (Danke an Serge Seletskyy und Shourav für ihre Bits, die ich im folgenden Code verwendet habe)

Nachfolgend finden Sie die Funktion, mit der Sie testen können, wie viel Speicherplatz für localStorage zur Verfügung steht (und wenn bereits Schlüssel in lS vorhanden sind), wie viel Speicherplatz noch vorhanden ist. 

Es ist ein bisschen rohe Gewalt, aber es funktioniert in fast jedem Browser ... abgesehen von Firefox ... __ Nun, in Desktop FF dauert es einige Zeit (4-5 Minuten), und auf Android stürzt es einfach ab. 

Unter der Funktion befindet sich eine kurze Zusammenfassung der Tests, die ich in verschiedenen Browsern auf verschiedenen Plattformen durchgeführt habe. Genießen!

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
}

Und wie oben versprochen einige Tests in verschiedenen Browsern:

GalaxyTab 10.1

  • Maxthon Pad 1,7 ~ 1130 ms 5 MB
  • Firefox 20.0 (Beta 20.0) stürzte ab
  • Chrome 25.0.1364.169 ~ 22250ms/5 MB
  • Nativ (identifiziert als Safari 4.0/Webkit534.30) ~ 995ms/5Mb

iPhone 4s iOS 6.1.3

  • Safari ~ 520ms/5Mb
  • Als HomeApp ~ 525ms/5Mb 
  • iCab ~ 710ms/5mb

MacBook Pro OSX 1.8.3 (Core 2 Duo 2.66 8 GB Speicher)

  • Safari 6.0.3 ~ 105ms/5Mb
  • Chrome 26.0.1410.43 ~ 3400 ms/5 MB
  • Firefox 20.0 300150ms (!)/10Mb (nachdem das Skript zu lange beschwert wurde)

iPad 3 iOS 6.1.3

  • Safari ~ 430ms/5Mb
  • iCab ~ 595ms/5mb

Windows 7 -64b (Core 2 Duo 2.93 6 GB Speicher)

  • Safari 5.1.7 ~ 80ms/5Mb
  • Chrome 26.0.1410.43 ~ 1220ms/5 MB
  • Firefox 20.0 228500ms (!)/10 MB (nachdem das Skript zu lange beschwert wurde)
  • IE9 ~ 17900ms /9.54Mb (wenn Console.logs im Code enthalten sind, funktioniert dies erst, wenn DevTools geöffnet ist)
  • Opera 12.15 ~ 4212ms /3.55Mb (dies ist, wenn 5 MB ausgewählt ist, aber Opera fragt nett, ob wir die Menge an LS erhöhen wollen, leider stürzt es ab, wenn der Test einige Male hintereinander durchgeführt wurde)

Win 8 (unter Parallelen 8)

  • IE10 ~ 7850 ms/9,54 MB
10
Jakub Gadkowski

Sie können Ihren lokalen Speicher nach folgenden Methoden berechnen: 

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());

Schließlich wird die Größe in Bytes im Browser protokolliert.

5
Usman Faisal

Ich würde den Code von @tennisgen verwenden, der alles bekommt und den Inhalt zählt, aber ich zähle die Schlüssel selbst:

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)';
    };
3
Arnaud Valensi

Neben der Antwort von @ serge, die hier am meisten gewählt wird, muss die Größe der Schlüssel berücksichtigt werden. Mit dem folgenden Code wird die Größe der in localStorage gespeicherten Schlüssel hinzugefügt.

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

Ich habe dieses Problem so besprochen, dass Sie Funktionen zum Ermitteln des belegten Speicherplatzes und des verbleibenden Speicherplatzes im lokalen Speicher erstellen und dann eine Funktion, die diese Funktionen aufruft, um den maximalen Speicherplatz zu bestimmen.

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

Während der Spezifikation ist jedes Zeichen einer Zeichenfolge 16 Bit.

Die Überprüfung mit Chrome (Einstellungen> Inhaltseinstellungen> Cookies und Website-Daten) zeigt uns jedoch, dass für die Initiierung von localStorage 3 KB (Overhead-Größe) erforderlich sind

Die gespeicherte Datengröße folgt dieser Beziehung (genau 1kB).
3 + ((localStorage.x.length * 16)/(8 * 1024)) kB

dabei ist localStorage.x Ihre Speicherzeichenfolge.

1

Sie können die aktuelle Größe der lokalen Speicherdaten mit der Funktion Blob abrufen. Dies funktioniert möglicherweise nicht in alten Browsern.

Beispiel:

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

Object.values ​​() wandelt das localStorage-Objekt in ein Array um. Blob verwandelt das Array in Rohdaten.

1
P Roitto

// Speicher belegen Schlüssel und Wert, also aktualisierter Code.

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