it-swarm.com.de

Berechnung der Auslastung des localStorage-Speichers

Ich erstelle eine App mit dem Bespin-Editor und dem localStorage von HTML5. Es speichert alle Dateien lokal und hilft bei der Grammatik, verwendet JSLint und einige andere Parser für CSS und HTML, um den Benutzer zu unterstützen.

Ich möchte berechnen, wie viel von der localStorage-Grenze verwendet wurde und wie viel tatsächlich vorhanden ist. Ist das heute möglich? Ich dachte daran, die gespeicherten Bits nicht einfach zu berechnen. Andererseits bin ich mir nicht sicher, was es noch gibt, das ich nicht messen kann.

72
JeroenEijkhof

Ich habe keinen universellen Weg gefunden, um das verbleibende Limit für die Browser zu erhalten, das ich brauchte, aber ich habe herausgefunden, dass eine Fehlermeldung erscheint, wenn Sie das Limit erreichen. Dies ist natürlich in jedem Browser anders.

Um es auszureizen, habe ich dieses kleine Skript verwendet:

for (var i = 0, data = "m"; i < 40; i++) {
    try { 
        localStorage.setItem("DATA", data);
        data = data + data;
    } catch(e) {
        var storageSize = Math.round(JSON.stringify(localStorage).length / 1024);
        console.log("LIMIT REACHED: (" + i + ") " + storageSize + "K");
        console.log(e);
        break;
    }
}
localStorage.removeItem("DATA");

Daraus habe ich folgende Informationen erhalten:

Google Chrome

  • DOMException:
    • code: 22
    • message: "Fehler beim Ausführen von 'setItem' auf 'Storage': Der Wert von 'data' hat das Kontingent überschritten."
    • name: "QuotaExceededError"

Mozilla Firefox

  • DOMException:
    • code: 1014
    • nachricht: "Maximale Größe des permanenten Speichers erreicht"
    • name: "NS_ERROR_DOM_QUOTA_REACHED"

Safari

  • DOMException:
    • code: 22
    • fehlermeldung: "QuotaExceededError: DOM-Ausnahme 22"
    • name: "QuotaExceededError"

Internet Explorer, Edge (Community)

  • DOMException:
    • code: 22
    • nachricht: "QuotaExceededError"
    • name: "QuotaExceededError"

Meine Lösung

Bisher besteht meine Lösung darin, jedes Mal einen zusätzlichen Anruf hinzuzufügen, wenn der Benutzer etwas speichern würde. Und wenn die Ausnahme erwischt wird, würde ich ihnen sagen, dass die Speicherkapazität zur Neige geht.


Bearbeiten: Lösche die hinzugefügten Daten

Ich habe vergessen zu erwähnen, dass dies erforderlich ist, um das ursprünglich gesetzte DATA-Element zu löschen. Die Änderung wird oben mit der Funktion removeItem () wiedergegeben.

47
JeroenEijkhof

Sie können möglicherweise eine ungefähre Vorstellung erhalten, indem Sie das gesamte localStorage-Objekt mithilfe der JSON-Methoden in eine JSON-Zeichenfolge umwandeln:

JSON.stringify(localStorage).length

Ich weiß nicht, wie genau das Byte sein soll, insbesondere mit den wenigen Bytes zusätzlicher Markierungen, wenn Sie zusätzliche Objekte verwenden. umgekehrt).

67
Morgon

Der IE8 implementiert zu diesem Zweck die Eigenschaft remainingSpace :

alert(window.localStorage.remainingSpace);  // should return 5000000 when empty

Leider scheint dies in den anderen Browsern nicht verfügbar zu sein. Ich bin mir jedoch nicht sicher, ob sie etwas Ähnliches implementieren.

26
Daniel Vassallo

Sie können die unten stehende Zeile verwenden, um diesen Wert genau zu berechnen, und hier ist ein jsfiddle zur Veranschaulichung seiner Verwendung

alert(1024 * 1024 * 5 - escape(encodeURIComponent(JSON.stringify(localStorage))).length);
12
jas-

Habe heute während des Testens (mehr als Speicherkontingent) dies getan und eine Lösung gefunden. IMO, zu wissen, was die Grenze ist und wo wir in Beziehung stehen, ist weitaus weniger wert als die Implementierung einer funktionalen Methode, um über die Quote hinaus zu speichern.

Anstatt zu versuchen, Größenvergleiche und Kapazitätsprüfungen durchzuführen, können wir reagieren, wenn wir die Quote erreicht haben, unseren aktuellen Speicher um ein Drittel reduzieren und die Speicherung fortsetzen. Wenn die Reduzierung fehlschlägt, stoppen Sie das Speichern.

set: function( param, val ) { 
    try{
        localStorage.setItem( param, typeof value == 'object' ? JSON.stringify(value) : value )
        localStorage.setItem( 'lastStore', new Date().getTime() )
    }
    catch(e){
      if( e.code === 22 ){
        // we've hit our local storage limit! lets remove 1/3rd of the entries (hopefully chronologically)
        // and try again... If we fail to remove entries, lets silently give up
        console.log('Local storage capacity reached.')

        var maxLength = localStorage.length
          , reduceBy = ~~(maxLength / 3);

        for( var i = 0; i < reduceBy; i++ ){
          if( localStorage.key(0) ){
            localStorage.removeItem( localStorage.key(0) );
          }
          else break;
        }

        if( localStorage.length < maxLength ){
          console.log('Cache data reduced to fit new entries. (' + maxLength + ' => ' + localStorage.length + ')');
          public.set( param, value );
        }
        else {
          console.log('Could not reduce cache size. Removing session cache setting from this instance.');
          public.set = function(){}
        }
      }
    }
}

Diese Funktion befindet sich in einem Wrapper-Objekt, also ruft public.set sich einfach selbst auf. Jetzt können wir Speicher hinzufügen und müssen uns keine Sorgen darüber machen, wie hoch die Quote ist oder wie nahe wir dabei sind. Wenn ein einzelner Shop 1/3 überschreitet, wird die Quota-Größe dort festgelegt, wo die Sperrung abgebrochen wird und das Speichern beendet wird. An diesem Punkt sollten Sie sowieso nicht zwischenspeichern, oder?

8
Shiboe

So fügen Sie den Browsertestergebnissen hinzu:

Firefox I = 22.

Safari Version 5.0.4 auf meinem Mac hat nicht aufgehängt. Fehler wie Chrome. i = 21.

Opera Teilt dem Benutzer mit, dass die Website Daten speichern möchte, aber nicht genügend Speicherplatz hat. Der Benutzer kann die Anfrage ablehnen, das Limit auf den erforderlichen Betrag oder auf mehrere andere Limits erhöhen oder auf unbegrenzt setzen. Gehen Sie zu opera: webstorage, um anzugeben, ob diese Nachricht angezeigt wird oder nicht. i = 20. Fehler, der ausgelöst wird, ist derselbe wie bei Chrome.

IE9-Standardmodus Fehler wie Chrome. i = 22.

IE9 im IE8-Standardmodus Konsolennachricht "Fehler: Nicht genügend Speicher verfügbar, um diesen Vorgang abzuschließen". i = 22

IE9 in älteren Modi Objektfehler. i = 22.

IE8 Keine Kopie zum Testen, aber lokaler Speicher wird unterstützt (http://stackoverflow.com/questions/3452816/does-ie8-support-out-of-the-box-in -lokaler Speicher)

IE7 und darunter Unterstützt keine lokalen Speicher.

5
user535673

Sie können Ihren Browser mit diesem Webspeicher-Support-Test testen

Ich habe Firefox auf meinem Android Tablet und Windows Laptop und Chromium nur auf Windows-Ergebnissen getestet :

  1. Firefox (Windows):

    • localStorage : 5120k char
    • sessionStorage : 5120k char
    • localStorage : * wird nicht unterstützt
  2. Firefox (Android):

    • localStorage : 2560k char
    • sessionStorage : Unbegrenzt (genau Testläufe bis zu 10240 KByte == 20480 KByte)
    • localStorage : nicht unterstützt
  3. Chrom (Fenster):

    • localStorage : 5120k char
    • sessionStorage : 5120k char
    • localStorage : nicht unterstützt

Aktualisieren

Auf Google Chrome Version 52.0.2743.116 m (64-Bit) begrenzt, wo ein bisschen niedriger auf 5101k Figuren. Dies bedeutet, dass sich die maximal verfügbare Menge in den Versionen ändern kann.

3
Morteza Tourani

Ich wünschte, ich könnte dies in einem Kommentar hinzufügen - nicht genug Wiederholungen, sorry.

Ich habe einige Perf-Tests durchgeführt - mit der Erwartung, dass JSON.stringify (localStorage) .length bei großen localStorage-Belegung eine teure Operation ist. 

http://jsperf.com/occupied-localstorage-json-stringify-length

Es ist in der Tat so - etwa 50x teurer als das Nachverfolgen der gespeicherten Inhalte und wird umso schlechter, je umfassender localStorage wird.

2
SashaK

Diese Funktion erhält den exact Speicher verfügbar/links:

Ich habe eine Reihe nützlicher Funktionen für localStorage erstellt * hier *

http://jsfiddle.net/kzq6jgqa/3/

function getLeftStorageSize() {
    var itemBackup = localStorage.getItem("");
    var increase = true;
    var data = "1";
    var totalData = "";
    var trytotalData = "";
    while (true) {
        try {
            trytotalData = totalData + data;
            localStorage.setItem("", trytotalData);
            totalData = trytotalData;
            if (increase) data += data;
        } catch (e) {
            if (data.length < 2) break;
            increase = false;
            data = data.substr(data.length / 2);
        }
    }
    localStorage.setItem("", itemBackup);

    return totalData.length;
}

// Examples
document.write("calculating..");
var storageLeft = getLeftStorageSize();
console.log(storageLeft);
document.write(storageLeft + "");

// to get the maximum possible *clear* the storage 
localStorage.clear();
var storageMax = getLeftStorageSize();

Beachten Sie, dass dies nicht sehr schnell ist, verwenden Sie es also nicht die ganze Zeit.

Damit habe ich auch herausgefunden, dass der Item-Name so viel Platz wie seine Länge beansprucht, der Item-Value ebenso viel Platz wie seine Länge.

Maximaler Speicher, den ich bekam - alles über 5M:

  • 5000000 Zeichen - Edge
  • 5242880 Zeichen - Chrome
  • 5242880 Zeichen - Firefox
  • 5000000 Zeichen - IE

In der Geige finden Sie etwas auskommentierten Code, um den Fortschritt in der Konsole zu sehen.

Habe mir etwas Zeit genommen, hoffe das hilft this

1
CoderPi

Ich musste tatsächlich simulieren und testen, was mein Modul tun wird, wenn der Speicher voll ist. Daher musste ich eine genaue Genauigkeit ermitteln, wenn der Speicher voll ist, und nicht die akzeptierte Antwort, die diese Genauigkeit bei einer Rate von 2 verliert.

Hier ist mein Skript, das beim Erreichen der Speicherobergrenze immer eine Genauigkeit von 10 erreichen sollte, und zwar trotz einiger einfacher Optimierungen ziemlich schnell ... EDIT: Ich habe das Skript besser und mit einer präzisen Genauigkeit gemacht:

function fillStorage() {
    var originalStr = "1010101010";
    var unfold = function(str, times) {
        for(var i = 0; i < times; i++)
            str += str;
        return str;
    }
    var fold = function(str, times) {
        for(var i = 0; i < times; i++) {
            var mid = str.length/2;
            str = str.substr(0, mid);
        }
        return str;
    }

    var runningStr = originalStr;
    localStorage.setItem("filler", runningStr);
    while(true) {
        try {
            runningStr = unfold(runningStr, 1);
            console.log("unfolded str: ", runningStr.length)
            localStorage.setItem("filler", runningStr);
        } catch (err) {
            break;
        }
    }

    runningStr = fold(runningStr, 1);  
    var linearFill = function (str1) {
        localStorage.setItem("filler", localStorage.getItem("filler") + str1);
    }
    //keep linear filling until running string is no more...
    while(true) {
        try {
            linearFill(runningStr)
        } catch (err) {
            runningStr = fold(runningStr, 1);
            console.log("folded str: ", runningStr.length)
            if(runningStr.length == 0)
                break;
        }
    }

    console.log("Final length: ", JSON.stringify(localStorage).length)
}
1
balthatrix
 try {
     var count = 100;
     var message = "LocalStorageIsNOTFull";
     for (var i = 0; i <= count; count + 250) {
         message += message;
         localStorage.setItem("stringData", message);
         console.log(localStorage);
         console.log(count);
     }

 }
 catch (e) {
     console.log("Local Storage is full, Please empty data");
     // fires When localstorage gets full
     // you can handle error here ot emply the local storage
 }
0
jinal

Das könnte jemandem helfen. In Chrome ist es möglich, den Benutzer zu bitten, bei Bedarf mehr Speicherplatz zuzulassen:

// Request Quota (only for File System API)  
window.webkitStorageInfo.requestQuota(PERSISTENT, 1024*1024, function(grantedBytes) {
  window.webkitRequestFileSystem(PERSISTENT, grantedBytes, onInitFs, errorHandler); 
}, function(e) {
  console.log('Error', e); 
});

Besuchen Sie https://developers.google.com/chrome/whitepapers/storage#asking_more für weitere Informationen.

0
Remo H. Jansen