03.02.2025

Tamanho Máximo de Armazenamento no localStorage: Limitações dos Navegadores

Resposta Rápida

Parece que o recurso localStorage, introduzido pelo HTML5, não é ilimitado; no entanto, existem restrições práticas. Normalmente, esse limite é em torno de 5 MB por domínio. No entanto, há uma maneira de determinar o limite exato para diferentes navegadores usando uma função JavaScript que emprega um método de tentativa e erro para identificar com precisão a quantidade de dados permitida:

function testarLocalStorage() {
  let chaveTeste = 'teste', 
      valorTeste = 'a',
      incremento = 1024; // Aumenta o tamanho dos dados em 1 KB
  // Tentativa de aumentar o tamanho dos dados até o máximo ser alcançado
  while (valorTeste.length < (5 * 1024 * incremento)) {
    try {
      localStorage.setItem(chaveTeste, valorTeste);
      valorTeste += new Array(incremento + 1).join('a'); // Anexa tamanho dos dados
    } catch (e) {
      localStorage.removeItem(chaveTeste); // Reverte ao tamanho de dados anterior
      return (valorTeste.length - incremento) / 1024 + ' KB'; // Reporta quanto dado foi salvo
    }
  }
}

console.log('Limite do localStorage:', testarLocalStorage());

Aqui, definimos e aumentamos sequencialmente o tamanho dos dados até atingirmos o limite.

Capacidade de Armazenamento Dependendo do Navegador Utilizado

O tamanho máximo do localStorage varia conforme o navegador:

• Google Chrome, Mozilla Firefox, Opera: Aproximadamente 10 MB.
• Internet Explorer: Cerca de 10 MB por armazenamento.
• Firefox (valor padrão para domínio): Limitado a 5120 KB.

Esses valores não são absolutos e podem variar de versão para versão, assim como com diferentes configurações do navegador.

Que Dados e em Que Formato Podem Ser Armazenados

O localStorage funciona apenas com strings. Isso significa que, se você precisar armazenar estruturas mais complexas (por exemplo, objetos), deve serializá-las em uma string. Aqui está um exemplo de código para salvar um objeto e subsequentemente deserializá-lo:

var usuario = {nome: 'Sam', idade: 21};
localStorage.setItem('usuario', JSON.stringify(usuario));

var usuarioRecuperado = JSON.parse(localStorage.getItem('usuario'));

Lembre-se de que a serialização aumenta o tamanho dos dados devido às informações adicionais na representação da string.

Estratégias para Aumentar a Capacidade do localStorage

Compressão de Dados

Primeiramente, comprima seus dados antes de salvá-los no localStorage. Você pode usar bibliotecas como LZ-String.

Prevenindo Erro de Limite de Armazenamento

Prepare seu aplicativo para possíveis limitações de localStorage: verifique a disponibilidade e trate exceções. O erro QuotaExceededError ocorre quando o espaço de armazenamento se esgota – aprenda a lidar corretamente com essa situação.

Desenvolvimento de uma Estratégia de Gerenciamento de Dados

Crie uma estratégia para excluir dados em situações onde o espaço estiver baixo, assim você saberá quais informações descartar primeiro.

Visualização

Aqui está um exemplo de distribuição de dados:

| Chave/Elemento | Dados                           | Tamanho  |
|----------------|---------------------------------|---------:|
| `Chave1`       | Preferências do usuário em formato JSON | 🚰 (1MB) |
| `Chave2`       | Identificador da sessão         | 🚰 (0.5MB) |
| `...`          | Outros pares chave-valor        | `...`    |
| **Total**      | **Quantidade máxima**           | **5MB** 🛢️  |

Melhores Práticas para Usar o localStorage

Adaptação a Diferentes Navegadores

Lembre-se de que os navegadores têm limites diferentes. Teste seu aplicativo web em vários ambientes.

Tratamento de Erros de Transbordo

Você precisa lidar com o QuotaExceededError e ter estratégias em vigor para limpar dados ou informar os usuários.

Verificações Regulares

As versões dos navegadores são atualizadas e as configurações mudam – verifique regularmente os limites do localStorage.

Recursos Úteis

1. HTML5 Web Storage — SitePoint
2. Window.localStorage — Web API | MDN
3. Armazenamento Local e Suas Utilizações em Sites — Smashing Magazine
4. HTML Web Storage API
5. Posso usar... — suporte para HTML5, CSS3 e outras tecnologias
6. Introdução ao localStorage e sessionStorage | DigitalOcean
7. Padrão HTML

Video

Navigation