Persistência de Dados no Navegador

Local Storage, Session Storage e IndexedDB

Objetivos da Aula

• Compreender o que é a persistência de dados no navegador.
• Diferenciar Local Storage, Session Storage e IndexedDB.
• Aprender a utilizar a API de cada tecnologia com exemplos práticos.
• Identificar os melhores cenários para aplicação de cada tipo de armazenamento.

Por que Armazenar Dados no Navegador?

Antigamente, usávamos cookies, mas eles tinham limitações:

• Baixo limite: Apenas ~4KB.
• Sobrecarga de Rede: Enviados em toda requisição HTTP.

As APIs modernas oferecem mais capacidade, flexibilidade e segurança.

Casos de Uso Comuns:

• Manter um usuário logado ("Lembrar de mim").
• Salvar preferências do usuário (ex: tema escuro).
• Armazenar um carrinho de compras.
• Habilitar aplicações offline (PWAs).

Web Storage API

Local Storage & Session Storage

localStorage

O localStorage armazena dados que persistem mesmo após o navegador ser fechado.

• Persistência: Longa duração.
• Escopo: Compartilhado entre abas da mesma origem.
• Capacidade: ~5-10MB.
• Dados: Apenas strings. (Use JSON.stringify e JSON.parse para objetos).
• API: Síncrona (pode bloquear a interface).

Ideal para: Preferências do usuário, tokens de autenticação persistentes.

localStorage: Exemplos de Código

// Salvar um item
localStorage.setItem('tema', 'escuro');

// Salvar um objeto (convertido para string)
const usuario = { nome: 'Maria', nivel: 5 };
localStorage.setItem('dadosUsuario', JSON.stringify(usuario));

// Ler um item
const temaSalvo = localStorage.getItem('tema'); // "escuro"

// Ler um objeto (convertido de volta)
const usuarioObj = JSON.parse(localStorage.getItem('dadosUsuario'));

// Remover um item
localStorage.removeItem('tema');

// Limpar tudo
localStorage.clear();

sessionStorage

O sessionStorage funciona de forma idêntica ao localStorage, mas os dados duram apenas enquanto a aba estiver aberta.

• Persistência: Apenas durante a sessão da aba.
• Escopo: Isolado por aba. Outra aba do mesmo site não verá os dados.
• Capacidade: ~5-10MB.
• Dados: Apenas strings.
• API: Síncrona.

Ideal para: Dados de formulários, estado temporário de uma aplicação.

sessionStorage: Exemplos de Código

// Salva o progresso de um formulário
const campoForm = document.getElementById('meuInput');
campoForm.addEventListener('keyup', () => {
  sessionStorage.setItem('progressoForm', campoForm.value);
});

// Restaura o valor ao recarregar a página
window.addEventListener('load', () => {
  const progresso = sessionStorage.getItem('progressoForm');
  if (progresso) {
    campoForm.value = progresso;
  }
});

IndexedDB

O Banco de Dados no Navegador

IndexedDB

Um banco de dados NoSQL completo e transacional no navegador.

• Capacidade: Gigabytes (depende do disco e permissão).
• Dados: Quase tudo (Objetos, Arrays, Arquivos/Blobs).
• API: Assíncrona (não bloqueia a interface, mas é mais complexa).
• Estrutura: Permite criar múltiplos bancos, object stores (tabelas) e índices para consultas rápidas.

Ideal para: Aplicações offline (PWAs), manipulação de grandes volumes de dados, consultas complexas.

IndexedDB: Exemplo de Código (Conceitual)

A API nativa é verbosa. Bibliotecas como Dexie.js ou idb simplificam muito!

Fluxo Básico (Nativo):

1. Abrir Conexão: indexedDB.open('MeuBanco', 1);
2. Criar Schema: No evento onupgradeneeded, criar object stores e índices.
3. Criar Transação: db.transaction('clientes', 'readwrite');
4. Acessar Object Store: transaction.objectStore('clientes');
5. Executar Operação: .add(novoCliente), .get(1), .getAll(), .delete(1).
6. Ouvir Eventos: onsuccess e onerror para cada operação.

Tabela Comparativa

Melhores Práticas e Conclusão

Segurança e Melhores Práticas

• NÃO armazene dados sensíveis! O armazenamento no cliente (especialmente Web Storage) é vulnerável a ataques XSS (Cross-Site Scripting). Não guarde senhas, tokens de alta criticidade ou informações pessoais.

• Sempre serialize/desserialize objetos para localStorage e sessionStorage usando JSON.

• Para IndexedDB, considere usar bibliotecas de abstração como Dexie.js para simplificar o desenvolvimento.

• Gerencie o espaço: Forneça mecanismos para limpar dados, especialmente em aplicações que usam muito IndexedDB.

Qual usar?

• localStorage: Para dados pequenos e persistentes que o usuário espera encontrar na próxima visita.

  • Ex: Tema do site, idioma preferido.

• sessionStorage: Para dados temporários de uma única tarefa ou sessão.

  • Ex: Dados de um formulário de várias etapas.

• IndexedDB: Para tudo que é grande, complexo ou precisa funcionar offline.

  • Ex: Um cliente de e-mail, um editor de documentos, dados de um PWA.

Perguntas?