Was ist die maximale Größe von localStorage-Werten?

542

Da localStorage(derzeit) nur Zeichenfolgen als Werte unterstützt werden und die Objekte dazu stringifiziert (als JSON-Zeichenfolge gespeichert) werden müssen, bevor sie gespeichert werden können, gibt es eine definierte Einschränkung hinsichtlich der Länge der Werte.

Weiß jemand, ob es eine Definition gibt, die für alle Browser gilt?

Codekie
quelle
15
Ich denke, niemand hat tatsächlich die Frage "Maximale Länge pro Wert" beantwortet.
Pete Alvin
@ PeteAlvin Ich habe gerade die Frage beantwortet .
user2428118
@PeteAlvin Jemand hat es 2015 beantwortet . Die anderen Antworten beziehen sich auf die Begrenzung der Gesamtgröße, nicht jedoch auf die Begrenzung der Größe pro Wert .
Ali

Antworten:

420

Zitat aus dem Wikipedia-Artikel über Web Storage :

Webspeicher kann vereinfacht als Verbesserung von Cookies angesehen werden und bietet eine viel größere Speicherkapazität ( 10 MB pro Ursprung in Google Chrome ( https://plus.google.com/u/0/+FrancoisBeaufort/posts/S5Q9HqDB8bh ), Mozilla Firefox und Opera (10 MB pro Speicherbereich in Internet Explorer ) und bessere programmatische Schnittstellen.

Und auch aus einem Artikel von John Resig [veröffentlicht im Januar 2007]:

Lagerraum

Es wird vorausgesetzt, dass Sie mit DOM Storage erheblich mehr Speicherplatz haben als die typischen Einschränkungen für Benutzeragenten, die Cookies auferlegt werden. Der bereitgestellte Betrag ist jedoch weder in der Spezifikation definiert noch wird er vom Benutzeragenten sinnvoll gesendet.

Wenn Sie sich den Mozilla-Quellcode ansehen, sehen Sie, dass 5120 KB die Standardspeichergröße für eine gesamte Domain ist. Dies gibt Ihnen erheblich mehr Platz zum Arbeiten als mit einem typischen 2-KB-Cookie.

Die Größe dieses Speicherbereichs kann jedoch vom Benutzer angepasst werden (ein 5-MB-Speicherbereich ist weder garantiert noch impliziert), und der Benutzeragent (Opera stellt möglicherweise nur 3 MB bereit - aber nur die Zeit wird es zeigen. )

Daniel Vassallo
quelle
28
@Cupidvogel nein, dies bedeutet, dass jeder domain( origin) 5 MB auf jedem einzelnen Client speichern kann. Die Daten werden auf dem Client-Computer gespeichert. Der localStorageMechanismus interagiert in keiner Weise zwischen Clients.
DanielB
6
Nein, ich wollte nur sicherstellen, dass dieselben Daten auf mehreren Seiten für dieselbe Domain verfügbar sind. Oft finde ich die Phrasen Domain und Seite synonym geschrieben, also wollte ich es nur sicher wissen!
SexyBeast
9
Gibt es jedoch eine Beschränkung für einen einzelnen Wert? (Wenn ich viele Flags speichern muss, wie sicher ist es, sie als JSON in einer einzelnen Eigenschaft zu speichern?)
Phtrivier
5
Ich habe Safari bei 5 MB und Chrome 39 bei 10 MB (nicht sicher, wann es von 5 MB erhöht wurde). Siehe diesen Artikel html5rocks.com/en/tutorials/offline/quota-research
Ally
18
@Cupidvogel: Nein, es ist nicht nach Domain, sondern nach Herkunft , da der Begriff gegenüber der Richtlinie für denselben Ursprung und dergleichen verwendet wird: Schema + Host + Port. http://example.comund https://example.comsind nicht der gleiche Ursprung (verschiedene Schemata). http://example.comund http://www.example.comsind nicht der gleiche Ursprung (verschiedene Hosts). http://example.comund http://example.com:8080sind nicht der gleiche Ursprung (verschiedene Ports). HTH. :-)
TJ Crowder
134

Eigentlich hat Opera kein Limit von 5 MB. Es bietet die Möglichkeit, das Limit zu erhöhen, da Anwendungen mehr erfordern. Der Benutzer kann sogar "Unbegrenzter Speicherplatz" für eine Domain auswählen.

Sie können die lokalen Speichergrenzen / -kontingente einfach selbst testen .

Tom Adler
quelle
50
Stürzt Chrome nicht mehr ab ... Interessanter Punkt: 5 MB entsprechen 2,5 Millionen Zeichen in Chrome. Anscheinend wird UFT16 für localStore verwendet.
Felix Alcala
1
@FelixAlcala Leider stürzt Chrome 15.0.874.54 Beta unter Mac OS X ab. Ich hatte einen Absturz bei 1.500.000 Zeichen.
Ivan Vučica
Es stürzte Chrom auf meinem Gerät ab, setzte auch den Hintergrund zurück, nicht überrascht, mein Telefon hat so wenig RAM, dass es nicht damit umgehen kann, wenn eine blöde Taschenlampen-App geöffnet ist, während Chrom geöffnet ist.
Jack
6
@FelixAlcala - Eigentlich macht JavaScript verfügbar UCS-2. Obwohl es ähnlich ist, UFT16gibt es einige sehr wichtige Unterschiede ... hauptsächlich um die Tatsache, dass UCS-2 älter als UFT ist.
Jeremy J Starcher
@FelixAlcala Halten Sie es für eine gute Idee, die Anzahl der Zeichen sowie die entsprechende Festplattengröße (z. B. 2.700 KB ~ = 5.274 KB) anzuzeigen?
AJ Hsu
76

Hier ist ein einfaches Skript, um das Limit herauszufinden:

if (localStorage && !localStorage.getItem('size')) {
    var i = 0;
    try {
        // Test up to 10 MB
        for (i = 250; i <= 10000; i += 250) {
            localStorage.setItem('test', new Array((i * 1024) + 1).join('a'));
        }
    } catch (e) {
        localStorage.removeItem('test');
        localStorage.setItem('size', i - 250);            
    }
}

Hier ist der Kern , JSFiddle und Blog-Beitrag .

Das Skript testet das Einstellen immer größerer Textzeichenfolgen, bis der Browser eine Ausnahme auslöst. Zu diesem Zeitpunkt werden die Testdaten gelöscht und ein Größenschlüssel in localStorage festgelegt, in dem die Größe in Kilobyte gespeichert wird.

cdmckay
quelle
1
Kühle Lösung. Ich habe diesen einen Liner gefunden , was denkst du?
Brasofilo
2
@brasofilo Ich denke, dass ein Liner davon ausgeht, dass Sie 5 MB haben, und dann die verwendete Menge abzieht.
CDMckay
Ooook, sicherer Schuss. Das Problem, das ich mit Ihrem Code habe, ist, dass ich mit der richtigen Methode zum Konvertieren der Größe in Bytes in KB, MB, GB in Javascript keine korrekten Ergebnisse erzielen kann . Ich werde dies morgen überarbeiten, aber wenn Sie einen Blick darauf werfen können, geschätzt.
Brasofilo
1
verbesserte die Leistung und die Qualität dieser Antwort hier
smnbbrv
Es ist 2020 und diese Antwort funktioniert sowohl mit Vanilla Chrome als auch mit Firefox unter Win10 einwandfrei, was eine Größe von 5000 ergibt.
A. Chiesa
34

Suchen Sie die maximale Länge einer einzelnen Zeichenfolge, in der gespeichert werden kann localStorage

Dieses Snippet ermittelt die maximale Länge eines Strings, der localStoragepro Domain gespeichert werden kann .

//Clear localStorage
for (var item in localStorage) delete localStorage[item];

window.result = window.result || document.getElementById('result');

result.textContent = 'Test running…';

//Start test
//Defer running so DOM can be updated with "test running" message
setTimeout(function () {

    //Variables
    var low = 0,
        high = 2e9,
        half;

    //Two billion may be a little low as a starting point, so increase if necessary
    while (canStore(high)) high *= 2;


    //Keep refining until low and high are equal
    while (low !== high) {
        half = Math.floor((high - low) / 2 + low);

        //Check if we can't scale down any further
        if (low === half || high === half) {
            console.info(low, high, half);
            //Set low to the maximum possible amount that can be stored 
            low = canStore(high) ? high : low;
            high = low;
            break;
        }


        //Check if the maximum storage is no higher than half
        if (storageMaxBetween(low, half)) {
            high = half;
            //The only other possibility is that it's higher than half but not higher than "high"
        } else {
            low = half + 1;
        }

    }

    //Show the result we found!
    result.innerHTML = 'The maximum length of a string that can be stored in localStorage is <strong>' + low + '</strong> characters.';

    //Functions
    function canStore(strLen) {
        try {
            delete localStorage.foo;
            localStorage.foo = Array(strLen + 1).join('A');
            return true;
        } catch (ex) {
            return false;
        }
    }


    function storageMaxBetween(low, high) {
        return canStore(low) && !canStore(high);
    }

}, 0);
<h1>LocalStorage single value max length test</h1>

<div id='result'>Please enable JavaScript</div>

Beachten Sie, dass die Länge einer Zeichenfolge in JavaScript begrenzt ist. Wenn Sie die maximale Datenmenge anzeigen möchten, die gespeichert werden kann, localStoragewenn sie nicht auf eine einzelne Zeichenfolge beschränkt ist, können Sie den Code in dieser Antwort verwenden .

Bearbeiten: Stack-Snippets werden nicht unterstützt localStorage, daher hier ein Link zu JSFiddle .

Ergebnisse

Chrome (45.0.2454.101): 5242878 Zeichen
Firefox (40.0.1): 5242883 Zeichen
Internet Explorer (11.0.9600.18036) :16386 122066 122070 Zeichen

Ich erhalte bei jedem Lauf in Internet Explorer unterschiedliche Ergebnisse.

user2428118
quelle
1
Witzig, aber Ihr einfacher Test stoppt mein ziemlich leistungsfähiges System, wenn ich nach ca. 1 Minute im Edge-Browser (unter Win 10) teste. Daher kann ich keine neuen Daten an Ihre Ergebnisse anhängen.))
vatavale
33

Mobile Browser:

Browser    | Chrome    | Android Browser    | Firefox     | iOS Safari
Version    | 40        | 4.3                | 34          | 6-8
Available  | 10MB      | 2MB                | 10MB        | 5MB

Desktop-Browser:

Browser    | Chrome   | Opera    | Firefox    | Safari      | IE
Version    | 40       | 27       | 34         | 6-8         | 9-11
Available  | 10MB     | 10MB     | 10MB       | 5MB         | 10MB

Referenzlink

Behnam Mohammadi
quelle
6
Woher kommen die Zahlen?
MrD
23
@BehnamMohammadi können Sie einen Verweis hinzufügen, woher Sie dies der Vollständigkeit halber erhalten haben
Chris Lang
1
Und es wurde nie eine Referenz ausgefüllt. Aber für die Nachwelt ändern sich diese Zahlen ein wenig. Wir sollten dies mehr Browser und die aktuellen Infos aktualisieren.
Malavos
3
@ ChrisLang hinzugefügt Link
Behnam Mohammadi
1
@ Malavos hinzugefügt Link
Behnam Mohammadi
26

Gehen Sie nicht davon aus, dass 5 MB verfügbar sind. Die Kapazität von localStorage variiert je nach Browser. Die häufigsten Werte sind 2,5 MB, 5 MB und unbegrenzt. Quelle: http://dev-test.nemikor.com/web-storage/support-test/

Tagawa
quelle
13

Sie möchten keine großen Objekte zu einem einzigen localStorage-Eintrag zusammenfassen. Das wäre sehr ineffizient - das Ganze müsste jedes Mal analysiert und neu codiert werden, wenn sich einige Details geringfügig ändern. Außerdem kann JSON nicht mehrere Querverweise innerhalb einer Objektstruktur verarbeiten und löscht viele Details, z. B. den Konstruktor, nicht numerische Eigenschaften von Arrays, die Inhalte eines spärlichen Eintrags usw.

Stattdessen können Sie Rhaboo verwenden . Es speichert große Objekte mit vielen localStorage-Einträgen, sodass Sie schnell kleine Änderungen vornehmen können. Die wiederhergestellten Objekte sind viel genauere Kopien der gespeicherten und die API ist unglaublich einfach. Z.B:

var store = Rhaboo.persistent('Some name');
store.write('count', store.count ? store.count+1 : 1);
store.write('somethingfancy', {
  one: ['man', 'went'],
  2: 'mow',
  went: [  2, { mow: ['a', 'meadow' ] }, {}  ]
});
store.somethingfancy.went[1].mow.write(1, 'lawn');

Übrigens habe ich es geschrieben.

Adrian May
quelle
1
Danke Martin. Sie können auch mein 'evon'-Repo überprüfen. Es ist momentan nur ein Serialisierer und die Tinte ist sehr nass, aber schneller als Rhaboo und ebenso vielseitig. Rhaboo wird bald für die interne Nutzung umgebaut.
Adrian
7
Nützlich, aber ich denke nicht, dass dies die Frage "Was ist die maximale Größe von localStorage?" Ihre Antwort könnte verbessert werden, indem Sie angeben, was passiert, wenn diese Bibliothek versucht, etwas außerhalb der Größenbeschränkung zu speichern, und wie Sie darauf reagieren.
Chris Moschini
6

Ich mache folgendes:

getLocalStorageSizeLimit = function () {

    var maxLength = Math.pow(2,24);
    var preLength = 0;
    var hugeString = "0";
    var testString;
    var keyName = "testingLengthKey";

    //2^24 = 16777216 should be enough to all browsers
    testString = (new Array(Math.pow(2, 24))).join("X");

    while (maxLength !== preLength) {
        try  {
            localStorage.setItem(keyName, testString);

            preLength = testString.length;
            maxLength = Math.ceil(preLength + ((hugeString.length - preLength) / 2));

            testString = hugeString.substr(0, maxLength);
        } catch (e) {
            hugeString = testString;

            maxLength = Math.floor(testString.length - (testString.length - preLength) / 2);
            testString = hugeString.substr(0, maxLength);
        }
    }

    localStorage.removeItem(keyName);

    maxLength = JSON.stringify(this.storageObject).length + maxLength + keyName.length - 2;

    return maxLength;
};
Itay Merchav
quelle
5
Maroun Maroun: Überprüfen Sie den Beitrag erneut. Der Autor hat Code bereitgestellt, um die maximale Größe des lokalen Speichers programmgesteuert zu überprüfen. Dies scheint eine gültige Antwort zu sein und keine andere Frage.
Arend
Das Ausführen dieses Codes
löst
6

Ich mag die Antwort von cdmckay sehr , aber es sieht nicht wirklich gut aus, die Größe in Echtzeit zu überprüfen: Sie ist einfach zu langsam (2 Sekunden für mich). Dies ist die verbesserte Version, die viel schneller und genauer ist, auch mit der Option zu wählen, wie groß der Fehler sein kann (Standard 250,000: Je kleiner der Fehler - desto länger ist die Berechnung):

function getLocalStorageMaxSize(error) {
  if (localStorage) {
    var max = 10 * 1024 * 1024,
        i = 64,
        string1024 = '',
        string = '',
        // generate a random key
        testKey = 'size-test-' + Math.random().toString(),
        minimalFound = 0,
        error = error || 25e4;

    // fill a string with 1024 symbols / bytes    
    while (i--) string1024 += 1e16;

    i = max / 1024;

    // fill a string with 'max' amount of symbols / bytes    
    while (i--) string += string1024;

    i = max;

    // binary search implementation
    while (i > 1) {
      try {
        localStorage.setItem(testKey, string.substr(0, i));
        localStorage.removeItem(testKey);

        if (minimalFound < i - error) {
          minimalFound = i;
          i = i * 1.5;
        }
        else break;
      } catch (e) {
        localStorage.removeItem(testKey);
        i = minimalFound + (i - minimalFound) / 2;
      }
    }

    return minimalFound;
  }
}

Zu testen:

console.log(getLocalStorageMaxSize()); // takes .3s
console.log(getLocalStorageMaxSize(.1)); // takes 2s, but way more exact

Dies funktioniert für den Standardfehler erheblich schneller. bei Bedarf kann es auch viel genauer sein.

smnbbrv
quelle
6

Ich habe einen Binärtest in diese Funktion zusammengefasst, die ich verwende:

function getStorageTotalSize(upperLimit/*in bytes*/) {
    var store = localStorage, testkey = "$_test"; // (NOTE: Test key is part of the storage!!! It should also be an even number of characters)
    var test = function (_size) { try { store.removeItem(testkey); store.setItem(testkey, new Array(_size + 1).join('0')); } catch (_ex) { return false; } return true; }
    var backup = {};
    for (var i = 0, n = store.length; i < n; ++i) backup[store.key(i)] = store.getItem(store.key(i));
    store.clear(); // (you could iterate over the items and backup first then restore later)
    var low = 0, high = 1, _upperLimit = (upperLimit || 1024 * 1024 * 1024) / 2, upperTest = true;
    while ((upperTest = test(high)) && high < _upperLimit) { low = high; high *= 2; }
    if (!upperTest) {
        var half = ~~((high - low + 1) / 2); // (~~ is a faster Math.floor())
        high -= half;
        while (half > 0) high += (half = ~~(half / 2)) * (test(high) ? 1 : -1);
        high = testkey.length + high;
    }
    if (high > _upperLimit) high = _upperLimit;
    store.removeItem(testkey);
    for (var p in backup) store.setItem(p, backup[p]);
    return high * 2; // (*2 because of Unicode storage)
}

Außerdem wird der Inhalt vor dem Testen gesichert und anschließend wiederhergestellt.

So funktioniert es: Es verdoppelt die Größe, bis das Limit erreicht ist oder der Test fehlschlägt. Es speichert dann die Hälfte des Abstandes zwischen niedrig und hoch und subtrahiert / addiert jedes Mal die Hälfte der Hälfte (subtrahiert bei Misserfolg und addiert Erfolg); Honen in den richtigen Wert.

upperLimitist standardmäßig 1 GB groß und begrenzt nur, wie weit nach oben exponentiell gescannt werden soll, bevor die binäre Suche gestartet wird. Ich bezweifle, dass dies überhaupt geändert werden muss, aber ich denke immer voraus. ;)

Auf Chrome:

> getStorageTotalSize();
> 10485762
> 10485762/2
> 5242881
> localStorage.setItem("a", new Array(5242880).join("0")) // works
> localStorage.setItem("a", new Array(5242881).join("0")) // fails ('a' takes one spot [2 bytes])

IE11, Edge und FireFox melden ebenfalls dieselbe maximale Größe (10485762 Byte).

James Wilkins
quelle
1
(Und vergessen Sie nicht localStorage.Clear()vor und nach Ihrem Test
Simonmysun
5

In modernen Browsern können Sie den folgenden Code verwenden, um das Speicherkontingent (gesamt und verwendet) in Echtzeit effizient zu überprüfen:

if ('storage' in navigator && 'estimate' in navigator.storage) {
        navigator.storage.estimate()
            .then(estimate => {
                console.log("Usage (in Bytes): ", estimate.usage,
                            ",  Total Quota (in Bytes): ", estimate.quota);
            });
}
Abhishek
quelle
Funktioniert nicht gut für Chrome. Usage (in Bytes): 647 , Total Quota (in Bytes): 32901464711 Das ist falsch: Die mögliche Gesamtgröße ist tatsächlich 10485762.
James Wilkins
1

Einmal habe ich die Chrome- Erweiterung (Desktop-Browser) entwickelt und aus diesem Grund die tatsächliche maximale Größe des lokalen Speichers getestet .

Meine Ergebnisse:

Ubuntu 18.04.1 LTS (64-bit)
Chrome 71.0.3578.98 (Official Build) (64-bit)
Local Storage content size 10240 KB (10 MB)

Mehr als die 10240 KBVerwendung gab mir den Fehler zurück:

Nicht erfasste DOMException: Fehler beim Ausführen von 'setItem' für 'Storage': Das Festlegen des Werts für 'notes' hat das Kontingent überschritten.

Smokehill
quelle
0

Ich habe diesen einfachen Code geschrieben, der die Größe von localStorage in Bytes testet.

https://github.com/gkucmierz/Test-of-localStorage-limits-quota

const check = bytes => {
  try {
    localStorage.clear();
    localStorage.setItem('a', '0'.repeat(bytes));
    localStorage.clear();
    return true;
  } catch(e) {
    localStorage.clear();
    return false;
  }
};

Github-Seiten:

https://gkucmierz.github.io/Test-of-localStorage-limits-quota/

Ich habe die gleichen Ergebnisse auf Desktop-Chrom, Oper, Firefox, mutigem und mobilem Chrom, das ~ 5 MB groß ist

Geben Sie hier die Bildbeschreibung ein

Und halb kleiner ergibt Safari ~ 2Mbytes

Geben Sie hier die Bildbeschreibung ein

gkucmierz
quelle