Dal localStoragemomento che (attualmente) supporta solo stringhe come valori e per fare ciò gli oggetti devono essere stringiti (archiviati come stringa JSON) prima di poter essere archiviati, esiste una limitazione definita per quanto riguarda la lunghezza dei valori.

Qualcuno sa se esiste una definizione che si applica a tutti i browser?

Citando l' articolo di Wikipedia su Web Storage :

L'archiviazione Web può essere vista in modo semplice come un miglioramento dei cookie, fornendo una capacità di archiviazione molto maggiore ( 10 MB per origine in Google Chrome ( https://plus.google.com/u/0/+FrancoisBeaufort/posts/S5Q9HqDB8bh ), Mozilla Firefox e Opera; 10 MB per area di archiviazione in Internet Explorer ) e migliori interfacce programmatiche.

E anche citando un articolo di John Resig [pubblicato a gennaio 2007]:

Spazio di archiviazione

È implicito che, con DOM Storage, si disponga di uno spazio di archiviazione considerevolmente maggiore rispetto alle limitazioni tipiche dell'agente utente imposte ai cookie. Tuttavia, l'importo fornito non è definito nelle specifiche, né viene trasmesso in modo significativo dal programma utente.

Se osservi il codice sorgente di Mozilla, possiamo vedere che 5120 KB è la dimensione di archiviazione predefinita per un intero dominio. Questo ti dà molto più spazio su cui lavorare rispetto a un tipico cookie da 2 KB.

Tuttavia, le dimensioni di questa area di archiviazione possono essere personalizzate dall'utente (quindi un'area di archiviazione di 5 MB non è garantita, né è implicita) e l'agente utente (Opera, ad esempio, può fornire solo 3 MB, ma solo il tempo lo dirà. )

In realtà Opera non ha un limite di 5 MB. Offre di aumentare il limite poiché le applicazioni richiedono di più. L'utente può anche scegliere "Spazio illimitato" per un dominio.

Puoi testare facilmente i limiti / le quote di LocalStorage .

Ecco uno script semplice per scoprire il limite:

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

Ecco l'essenza , JSFiddle e il post sul blog .

Lo script testerà l'impostazione di stringhe di testo sempre più grandi fino a quando il browser non genererà eccezioni. A quel punto cancellerà i dati del test e imposterà una chiave di dimensione in localStorage memorizzando la dimensione in kilobyte.

Trova la lunghezza massima di una singola stringa che può essere archiviata localStorage

Questo frammento troverà la lunghezza massima di una stringa che può essere archiviata localStorageper dominio.

//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>

Si noti che la lunghezza di una stringa è limitata in JavaScript; se si desidera visualizzare la quantità massima di dati che è possibile archiviare localStoragequando non è limitata a una singola stringa, è possibile utilizzare il codice in questa risposta .

Modifica: I frammenti di stack non supportano localStorage, quindi ecco un link a JSFiddle .

risultati

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

Ottengo risultati diversi su ogni corsa in Internet Explorer.

Browser per dispositivi mobili:

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

Browser desktop:

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

Link di riferimento

Non dare per scontato che siano disponibili 5 MB: la capacità di archiviazione locale varia in base al browser, con 2,5 MB, 5 MB e illimitati come valori più comuni. Fonte: http://dev-test.nemikor.com/web-storage/support-test/

Non si desidera stringere oggetti di grandi dimensioni in una singola voce localStorage. Sarebbe molto inefficiente: il tutto dovrebbe essere analizzato e ricodificato ogni volta che alcuni lievi cambiamenti di dettaglio. Inoltre, JSON non è in grado di gestire più riferimenti incrociati all'interno di una struttura di oggetti e cancella molti dettagli, ad esempio il costruttore, le proprietà non numeriche degli array, cosa c'è in una voce sparsa, ecc.

Invece, puoi usare Rhaboo . Memorizza oggetti di grandi dimensioni utilizzando molte voci localStorage in modo da poter apportare rapidamente piccole modifiche. Gli oggetti ripristinati sono copie molto più accurate di quelli salvati e l'API è incredibilmente semplice. Per esempio:

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

A proposito, l'ho scritto.

Sto facendo quanto segue:

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

Mi piace molto la risposta di cdmckay , ma non sembra davvero bello controllare le dimensioni in tempo reale: è troppo lento (2 secondi per me). Questa è la versione migliorata, che è molto più veloce e più esatta, anche con un'opzione per scegliere quanto grande può essere l'errore (impostazione predefinita 250,000, l'errore più piccolo è - più lungo è il calcolo):

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

Testare:

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

Funziona molto più velocemente per l'errore standard; inoltre può essere molto più esatto quando necessario.

Ho condensato un test binario in questa funzione che utilizzo:

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

Esegue inoltre il backup dei contenuti prima del test, quindi li ripristina.

Come funziona: raddoppia la dimensione fino a raggiungere il limite o il test ha esito negativo. Memorizza quindi metà della distanza tra basso e alto e sottrae / aggiunge una metà della volta ogni volta (sottrai in caso di fallimento e aggiungi in caso di successo); affinando il valore corretto.

upperLimitè 1 GB per impostazione predefinita e limita semplicemente la scansione verso l'alto in modo esponenziale prima di avviare la ricerca binaria. Dubito che anche questo debba essere cambiato, ma penso sempre al futuro. ;)

Su 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 e FireFox riportano anche la stessa dimensione massima (10485762 byte).

È possibile utilizzare il codice seguente nei browser moderni per controllare in modo efficiente la quota di archiviazione (totale e utilizzata) in tempo reale:

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

Una volta ho sviluppato l' estensione Chrome (browser desktop) e testato la dimensione massima reale dell'archiviazione locale per questo motivo.

I miei risultati:

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

Più 10240 KBdell'utilizzo mi ha restituito l'errore:

DOMException non rilevata: impossibile eseguire "setItem" su "Archiviazione": l'impostazione del valore di "note" ha superato la quota.

Ho scritto questo semplice codice che sta testando le dimensioni di localStorage in byte.

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

Pagine di Github:

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

Ho gli stessi risultati su Chrome desktop, Opera, Firefox, Brave e Chrome portatile che è di ~ 5 MB

E metà risultato più piccolo in safari ~ 2Mbyte