Qual é o tamanho máximo dos valores localStorage?

Uma vez que localStorage (actualmente) só suporta strings como valores, e para que os objectos precisem de ser stringificados (armazenados como JSON-string) antes de poderem ser armazenados, existe uma limitação definida em relação ao comprimento dos valores.

Alguém sabe se há uma definição que se aplica a todos os navegadores?

Author: Eric Bishard, 2010-06-07

10 answers

Citando o artigo do Wikipedia no armazenamento Web:

Armazenamento na Web podem ser visualizadas de modo simplista como uma melhoria sobre os cookies, proporcionando maior capacidade de armazenamento (10 MB por origem no Google Chrome(https://plus.google.com/u/0/+FrancoisBeaufort/posts/S5Q9HqDB8bh), Mozilla Firefox e Opera; 10 MB por área de armazenamento no Internet Explorer) e a melhor programação de interfaces.

E também citando de um John Resig artigo [publicado em janeiro de 2007]:

Espaço De Armazenamento

Está implícito que, com o armazenamento DOM, você tem consideravelmente mais armazenamento espaço que o agente de utilizador típico limitações impostas aos Cookies. No entanto, o montante que é fornecido não está definido no caderno de especificações, nem é transmitido de forma significativa por o agente do utilizador.

Se olhar para o código fonte Mozilla podemos ver que 5120KB é o padrão Tamanho do armazenamento para um todo dominio. Isso lhe dá consideravelmente mais espaço para trabalhar com que um típico 2KB biscoito.

No entanto, o tamanho desta área de armazenamento pode ser personalizado pelo utilizador (de modo a Área de armazenamento 5MB não é garantida, também não está implícito) e o agente de utilizador (A ópera, por exemplo, só pode fornecer 3MB - mas só o tempo dirá.)

 346
Author: Daniel Vassallo, 2015-01-15 05:11:01
Na verdade, a Ópera não tem limite de 5MB. Ele oferece para aumentar o limite, uma vez que as aplicações requerem mais. O usuário pode até mesmo escolher "armazenamento ilimitado" para um domínio.

Pode facilmentetestar limites de localização/quota para si próprio.

 112
Author: Artemy Tregubenko, 2010-07-15 21:24:43
Aqui está um guião simples para descobrir o 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);            
    }
}
Aqui está o essencial., jsFiddle e post no blog .

O programa irá testar a configuração de cadeias de texto cada vez maiores até o navegador lançar e abrir uma excepção. Nesse ponto, ele vai limpar os dados do teste e definir uma chave de tamanho em localStorage armazenando o tamanho em kilobytes.

 60
Author: cdmckay, 2014-09-12 16:32:19

Não assuma que o 5MB está disponível - a capacidade de armazenamento local varia de navegador, com 2,5 MB, 5MB e ilimitado sendo os valores mais comuns. Fonte: http://dev-test.nemikor.com/web-storage/support-test/

 23
Author: tagawa, 2012-02-10 06:53:15

Encontre o comprimento máximo de uma única cadeia que possa ser armazenada em localStorage

Este excerto irá encontrar o comprimento máximo de uma cadeia de caracteres que pode ser armazenada em localStorage por domínio.

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

Note que o comprimento de uma seqüência de caracteres é limitado em JavaScript; se você deseja exibir a quantidade máxima de dados que pode ser armazenado em localStorage quando não se limita a uma única cadeia de caracteres, você pode usar o código esta resposta.

Editar: os excertos da pilha não suportam localStorage, então Aqui está um link para JSFiddle.

Resultados

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

Tenho resultados diferentes em cada corrida no Internet Explorer.
 20
Author: user2428118, 2015-10-12 18:52:36

Não queres pendurar objectos grandes numa única entrada de localização. Isso seria muito ineficiente-tudo teria de ser analisado e re-codificado sempre que alguns pequenos detalhes mudassem. Além disso, JSON não pode lidar com várias referências cruzadas dentro de uma estrutura de objeto e elimina muitos detalhes, por exemplo, o construtor, propriedades não-numéricas de arrays, o que está em uma entrada esparsa, etc.

Em vez disso, pode usar http://rhaboo.org guarda objectos grandes. usando muitos itens localStorage para que você possa fazer pequenas alterações rapidamente. Os objetos restaurados são cópias muito mais precisas dos salvos e a API é incrivelmente simples. Por exemplo:

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');
Já agora, fui eu que a escrevi.
 13
Author: Adrian May, 2014-10-01 11:32:00

Navegadores móveis:

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

Navegadores de secretária:

Browser    | Chrome   | Opera    | Firefox    | Safari      | IE
Version    | 40       | 27       | 34         | 6-8         | 9-11
Available  | 10MB     | 10MB     | 10MB       | 5MB         | 10MB
 13
Author: Behnam Mohammadi, 2017-02-18 11:38:27

Eu realmente gosto da resposta do cdmckay, mas não parece muito bom verificar o tamanho em tempo real: é muito lento (2 segundos para mim). Esta é a versão melhorada, que é muito mais rápida e mais exata, também com uma opção para escolher quão grande o erro pode ser (default 250,000, o erro menor é-quanto mais longo o cálculo é):

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

Para testar:

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

Isso funciona dramaticamente mais rápido para o erro padrão; também pode ser muito mais exato quando necessario.

 6
Author: smnbbrv, 2017-05-23 10:31:39

Você pode usar o seguinte código em navegadores modernos para verificar eficientemente a quota de armazenamento (total e usado) em tempo real:

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);
            });
}
 4
Author: abhiweb, 2018-06-29 08:12:56

Estou a fazer o seguinte:

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;
};
 3
Author: Itay Merchav, 2014-06-17 00:01:43