So ermitteln Sie die Größe von localStorage

Ich entwickle derzeit eine Site, die den localStorage von HTML5 verwendet. Ich habe alles über die Größenbeschränkungen für verschiedene Browser gelesen. Ich habe jedoch noch nichts darüber gesehen, wie die aktuelle Größe einer localStorage-Instanz ermittelt werden kann. Diese Frage scheint darauf hinzudeuten, dass in JavaScript die Größe für eine bestimmte Variable nicht integriert ist. Hat localStorage eine Speichergrößeneigenschaft, die ich nicht gesehen habe? Gibt es eine einfache Möglichkeit, dies zu tun, die mir fehlt?

Meine Website soll es Benutzern ermöglichen, Informationen in einem "Offline" -Modus einzugeben. Daher ist es sehr wichtig, sie warnen zu können, wenn der Speicher fast voll ist.

Führen Sie dieses Snippet in der JavaScript-Konsole aus (einzeilige Version):

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

Der gleiche Code in mehreren Zeilen zum Lesen

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 zur bequemen Verwendung in das Feld 'Speicherort' eines Lesezeichens ein

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

PS-Snippets werden gemäß der Anfrage im Kommentar aktualisiert. Jetzt beinhaltet die Berechnung 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 Bytes belegt).

PPS sollte sowohl in Chrome als auch in Firefox funktionieren.

Ausgehend von dem, was @Shourav oben gesagt hat, habe ich eine kleine Funktion geschrieben, die alle localStorageSchlüssel (für die aktuelle Domain) genau erfassen und die kombinierte Größe berechnen soll, damit Sie genau wissen, wie viel Speicher von Ihrem localStorageObjekt belegt wird:

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 kehrte zurück: "30.896484375 KB"

IE hat eine verbleibende Space- Eigenschaft des Speicherobjekts. Die anderen Browser haben derzeit keine Äquivalenz.

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

Hier ist ein einfaches Beispiel dafür und sollte mit jedem Browser funktionieren

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

Hoffe das hilft jemandem.

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

Im Folgenden finden Sie die Funktion, mit der Sie testen können, wie viel Speicherplatz für localStorage verfügbar ist und (falls noch Schlüssel in lS vorhanden sind) wie viel Speicherplatz noch vorhanden ist.

Es ist ein wenig brutale Gewalt, aber es funktioniert in fast jedem Browser ... außer in Firefox. Nun, in Desktop-FF dauert es ewig (4-5 Minuten), und unter 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 beide ab
• Chrome 25.0.1364.169 ~ 22250 ms / 5 MB
• Native (identifiziert als Safari 4.0 / Webkit534.30) ~ 995 ms / 5 MB

iPhone 4s iOS 6.1.3

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

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

• Safari 6.0.3 ~ 105 ms / 5 MB
• Chrome 26.0.1410.43 ~ 3400 ms / 5 MB
• Firefox 20.0 300150ms (!) / 10Mb (nachdem Sie sich über ein zu langes Skript beschwert haben)

iPad 3 iOS 6.1.3

• Safari ~ 430 ms / 5 MB
• iCab ~ 595 ms / 5 MB

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

• Safari 5.1.7 ~ 80 ms / 5 MB
• Chrome 26.0.1410.43 ~ 1220 ms / 5 MB
• Firefox 20.0 228500ms (!) / 10Mb (nachdem Sie sich über ein zu langes Skript beschwert haben)
• IE9 ~ 17900ms /9.54Mb (wenn sich console.logs im Code befinden, funktioniert dies erst, wenn DevTools geöffnet werden)
• Opera 12.15 ~ 4212ms /3.55Mb (dies ist, wenn 5Mb ausgewählt ist, aber Opera fragt freundlich, ob wir die Menge an lS erhöhen möchten, leider stürzt es ab, wenn der Test einige Male hintereinander durchgeführt wird)

Gewinnen Sie 8 (unter Parallelen 8)

• IE10 ~ 7850 ms / 9,54 MB

Mit der Blob-Funktion können Sie die aktuelle Größe der lokalen Speicherdaten abrufen. Dies funktioniert möglicherweise nicht in alten Browsern. Überprüfen Sie die Unterstützung für new Blobund Object.values()bei caniuse.

Beispiel:

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

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

Sie können Ihren lokalen Speicher mit 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.

Ich würde den Code von @tennisgen verwenden, der alle abruft 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)';
    };

Bei diesem Problem habe ich Funktionen erstellt, um den verwendeten Speicherplatz und den verbleibenden Speicherplatz im lokalen Speicher zu ermitteln, und anschließend eine Funktion, die diese Funktionen aufruft, um den maximalen Speicherplatz zu ermitteln.

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

Zusätzlich zu der Antwort von @ serge, über die hier am meisten abgestimmt wird, muss die Größe der Schlüssel berücksichtigt werden. Der folgende Code fügt die Größe der in gespeicherten Schlüssel hinzulocalStorage

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

Wie die Spezifikation sagt, ist jedes Zeichen einer Zeichenfolge 16 Bit.

Die Überprüfung mit Chrome (Einstellungen> Inhaltseinstellungen> Cookies und Site-Daten) zeigt jedoch, dass das Initiieren von localStorage 3 KB (Overhead-Größe) erfordert.

Die Größe der gespeicherten Daten folgt dieser Beziehung (auf 1 kB genau)
3 + ((localStorage.x.length * 16) / (8 * 1024)) kB

Dabei ist localStorage.x Ihre Speicherzeichenfolge.

// Speicher belegt sowohl Schlüssel als auch 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]);

Ja, diese Frage wurde wie vor 10 Jahren gestellt. Aber für Interessierte (wie mich selbst, da ich einen Offline-Texteditor baue, der Daten mit lokalem Speicher speichert) und sich für die Programmierung interessieren, könnten Sie etwas Einfaches wie das verwenden:

var warning = 1;
var limit = 2000000; //2 million characters, not really taking in account to bytes but for tested ammounts of characters stored
setInterval(function() {
    localStorage["text"] = document.getElementById("editor").innerHTML; //gets text and saves it in local storage under "text"
    if(localStorage["text"].length > limit && warning == 1){
            alert("Local Storage capacity has been filled"); 
            warning = 2; //prevent a stream of alerts
    }
}, 1000);
//setInterval function saves and checks local storage

Der beste Weg, um die Speichermenge zu füllen, besteht darin, die Site-Einstellungen anzuzeigen (z. B. wenn Sie ein Bild im lokalen Speicher gespeichert haben). Zumindest in Chrome können Sie die Anzahl der verwendeten Bytes sehen (dh: 1222 Bytes). Die besten Möglichkeiten, gefüllten lokalen Speicher mit js anzuzeigen, wurden bereits oben erwähnt. Verwenden Sie sie daher.

window.localStorage.remainingSpace