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 selbst nicht messen kann.
javascript
size
storage
local-storage
capacity
JeroenEijkhof
quelle
quelle
Antworten:
Möglicherweise können Sie mithilfe der JSON-Methoden eine ungefähre Vorstellung davon erhalten, wie das gesamte localStorage-Objekt in eine JSON-Zeichenfolge umgewandelt wird:
JSON.stringify(localStorage).length
Ich weiß nicht, wie bytegenau es wäre, insbesondere mit den wenigen Bytes zusätzlichen Markups, wenn Sie zusätzliche Objekte verwenden - aber ich denke, es ist besser, als zu denken, dass Sie nur 28 KB drücken und stattdessen 280 KB ausführen (oder umgekehrt). umgekehrt).
quelle
Ich habe keinen universellen Weg gefunden, um das verbleibende Limit für die von mir benötigten Browser zu ermitteln, aber ich habe herausgefunden, dass beim Erreichen des Limits eine Fehlermeldung angezeigt wird. Dies ist natürlich in jedem Browser anders.
Um das Maximum herauszuholen, 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
Mozilla Firefox
Safari
Internet Explorer, Edge (Community)
Meine Lösung
Bisher besteht meine Lösung darin, jedes Mal, wenn der Benutzer etwas speichert, einen zusätzlichen Anruf hinzuzufügen. Und wenn die Ausnahme abgefangen wird, würde ich ihnen sagen, dass ihnen die Speicherkapazität ausgeht.
Bearbeiten: Löschen Sie die hinzugefügten Daten
Ich habe vergessen zu erwähnen, dass Sie das
DATA
ursprünglich festgelegte Element löschen müssen, damit dies tatsächlich funktioniert . Die Änderung wird oben mithilfe der Funktion removeItem () wiedergegeben .quelle
i
als dies jeweils erreicht wurde?IE8 implementiert die
remainingSpace
Eigenschaft zu diesem Zweck: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.
quelle
Sie können die folgende Zeile verwenden, um diesen Wert genau zu berechnen. Hier ist eine jsfiddle zur Veranschaulichung seiner Verwendung
alert(1024 * 1024 * 5 - escape(encodeURIComponent(JSON.stringify(localStorage))).length);
quelle
Ich bin heute beim Testen darauf gestoßen (Überschreitung der Speicherquote) und habe eine Lösung gefunden. IMO, zu wissen, was das Limit ist und wo wir in Beziehung stehen, ist weitaus weniger wertvoll als die Implementierung einer funktionalen Methode, um die Speicherung über das Kontingent hinaus fortzusetzen.
Anstatt also zu versuchen, Größenvergleiche und Kapazitätsprüfungen durchzuführen, können wir reagieren, wenn wir das Kontingent erreicht haben, unseren aktuellen Speicher um ein Drittel reduzieren und die Speicherung fortsetzen. Wenn die Reduzierung fehlschlägt, beenden Sie die Speicherung.
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, daher ruft sich public.set einfach selbst auf. Jetzt können wir den Speicher erweitern und müssen uns keine Sorgen mehr machen, wie hoch das Kontingent ist oder wie nahe wir ihm auch sind. Wenn ein einzelnes Geschäft 1/3 überschreitet, wird diese Funktion bei der Kontingentgröße beendet, und das Speichern wird beendet. An diesem Punkt sollten Sie sowieso nicht zwischenspeichern, oder?
quelle
So fügen Sie dem Browser Testergebnisse hinzu:
Firefox i = 22.
Safari Version 5.0.4 auf meinem Mac hing nicht. Fehler als Chrome. i = 21.
Opera teilt dem Benutzer mit, dass die Website Daten speichern möchte, aber nicht über genügend Speicherplatz verfügt. 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 zu sagen, ob diese Meldung angezeigt wird oder nicht. i = 20. Der ausgelöste Fehler ist der gleiche wie bei Chrome.
IE9-Standardmodus Fehler als Chrome. i = 22.
IE9 im IE8-Standardmodus Konsolenmeldung "Fehler: Es ist nicht genügend Speicher verfügbar, um diesen Vorgang abzuschließen". i = 22
IE9 in älteren Modi Objektfehler. i = 22.
IE8 Sie müssen keine Kopie testen, aber der lokale Speicher wird unterstützt (http://stackoverflow.com/questions/3452816/does-ie8-support-out-of-the-box-in-localstorage).
IE7 und niedriger Unterstützt keinen lokalen Speicher.
quelle
Sie können Ihren Browser mit diesem Test zur Unterstützung des Webspeichers testen
Ich habe Firefox sowohl auf meinem Android-Tablet als auch auf meinem Windows-Laptop und Chromium nur auf Windows-Ergebnissen getestet :
Firefox (Windows):
Firefox (Android):
Chrom (Fenster):
Aktualisieren
In Google Chrome Version 52.0.2743.116 m (64-Bit) sind die
5101k
Zeichen etwas niedriger . Dies bedeutet, dass sich die maximal verfügbaren Versionen ändern können.quelle
Ich wünschte, ich könnte dies in einem Kommentar hinzufügen - nicht genug Wiederholung, sorry.
Ich habe einige Perf-Tests durchgeführt und erwartet, dass JSON.stringify (localStorage) .length bei großer localStorage-Belegung eine teure Operation ist.
http://jsperf.com/occupied-localstorage-json-stringify-length
Es ist in der Tat so - ungefähr 50x teurer als das Verfolgen dessen, was Sie speichern, und es wird schlimmer, je voller localStorage wird.
quelle
Diese Funktion erhält den genauen verfügbaren Speicherplatz / 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 geht. Verwenden Sie es daher nicht immer.
Damit habe ich auch herausgefunden, dass: der Item-Name so viel Platz einnimmt wie seine Länge, der Item-Value auch so viel Platz einnimmt wie ihre Länge.
Maximaler Speicherplatz - alles über 5 Millionen:
In der Geige finden Sie einen auskommentierten Code, um den Fortschritt in der Konsole anzuzeigen.
Ich habe einige Zeit gebraucht, hoffe, das hilft ☺
quelle
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 }
quelle
Ich musste tatsächlich simulieren und testen, was mein Modul tun wird, wenn der Speicher voll ist, also musste ich genau wissen, wann der Speicher voll ist, und nicht die akzeptierte Antwort, die diese Genauigkeit mit einer Rate von i ^ 2 verliert.
Hier ist mein Skript, das bei Erreichen der Speicherobergrenze immer eine Genauigkeit von 10 erzeugen sollte, und zwar trotz einiger einfacher Optimierungen ziemlich schnell ... BEARBEITEN: Ich habe das Skript besser und mit einer genauen 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) }
quelle
Das könnte jemandem helfen. In Chrome kann der Benutzer aufgefordert werden, bei Bedarf mehr Speicherplatz zu verwenden:
// 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.
quelle