<h2>Web Storage em JavaScript: localStorage, sessionStorage e IndexedDB</h2>
<p>A persistência de dados no navegador é fundamental para criar aplicações web modernas. Web Storage oferece três mecanismos distintos, cada um com propósitos específicos. Dominar essas tecnologias permite que você construa experiências offline, melhore performance e gerencie estado de forma eficiente.</p>
<h2>localStorage: Armazenamento Persistente</h2>
<p>O localStorage mantém dados indefinidamente no navegador do usuário, mesmo após fechar a aba ou reiniciar o computador. Funciona como um dicionário chave-valor simples, perfeito para preferências do usuário, temas, tokens de autenticação e configurações.</p>
<h3>Operações Básicas</h3>
<pre><code class="language-javascript">// Salvar dados
localStorage.setItem('usuario', 'João Silva');
localStorage.setItem('tema', 'escuro');
// Recuperar dados
const usuario = localStorage.getItem('usuario');
console.log(usuario); // 'João Silva'
// Remover item específico
localStorage.removeItem('tema');
// Limpar todo o localStorage
localStorage.clear();
// Verificar quantidade de itens
console.log(localStorage.length);</code></pre>
<h3>Trabalhando com Objetos</h3>
<p>Como localStorage só armazena strings, você precisa serializar objetos com JSON:</p>
<pre><code class="language-javascript">const usuario = {
id: 1,
nome: 'Maria',
email: 'maria@email.com',
preferencias: {
notificacoes: true,
idioma: 'pt-BR'
}
};
// Salvar objeto
localStorage.setItem('userData', JSON.stringify(usuario));
// Recuperar e desserializar
const dadosRecuperados = JSON.parse(localStorage.getItem('userData'));
console.log(dadosRecuperados.preferencias.idioma); // 'pt-BR'
// Deletar se não existir erro
if (dadosRecuperados) {
console.log('Dados encontrados');
}</code></pre>
<h3>Limite e Considerações</h3>
<p>localStorage oferece tipicamente 5-10MB de espaço. Use para dados que precisam persistir entre sessões, mas evite armazenar senhas ou informações sensíveis sem criptografia.</p>
<h2>sessionStorage: Armazenamento Temporário</h2>
<p>O sessionStorage funciona identicamente ao localStorage, mas os dados são descartados quando a aba do navegador fecha. Ideal para dados temporários da sessão atual, como filtros de busca, estado de formulários em progresso ou tokens de sessão curta.</p>
<h3>Diferenças Práticas</h3>
<pre><code class="language-javascript">// Salvar dados de sessão
sessionStorage.setItem('filtroAtivo', 'ultimas24h');
sessionStorage.setItem('carrinhoTemp', JSON.stringify({
items: ['produto1', 'produto2'],
timestamp: Date.now()
}));
// Recuperar dados
const filtro = sessionStorage.getItem('filtroAtivo');
const carrinho = JSON.parse(sessionStorage.getItem('carrinhoTemp'));
// Dados desaparecem ao fechar a aba
sessionStorage.clear();</code></pre>
<p>O sessionStorage é isolado por aba: diferentes abas do mesmo site têm seus próprios espaços de armazenamento. Aproveite isso para fluxos independentes.</p>
<h2>IndexedDB: Armazenamento Estruturado em Grande Escala</h2>
<p>IndexedDB é um banco de dados NoSQL do navegador, oferecendo capacidade muito maior (centenas de MB), suporte a índices, transações e consultas complexas. Use para aplicações offline robustas, sincronização de dados e armazenamento estruturado.</p>
<h3>Criação e Configuração Inicial</h3>
<pre><code class="language-javascript">let db;
// Abrir ou criar banco de dados
const request = indexedDB.open('minhaApp', 1);
request.onerror = () => console.error('Erro ao abrir banco');
request.onsuccess = (event) => {
db = event.target.result;
console.log('Banco aberto com sucesso');
};
// Evento acionado apenas na primeira vez ou ao atualizar versão
request.onupgradeneeded = (event) => {
db = event.target.result;
// Criar object store (tabela)
if (!db.objectStoreNames.contains('usuarios')) {
const objectStore = db.createObjectStore('usuarios', { keyPath: 'id' });
objectStore.createIndex('email', 'email', { unique: true });
objectStore.createIndex('nome', 'nome', { unique: false });
}
};</code></pre>
<h3>Inserir, Ler e Atualizar Dados</h3>
<pre><code class="language-javascript">// Inserir/atualizar documento
function salvarUsuario(usuario) {
const transaction = db.transaction(['usuarios'], 'readwrite');
const objectStore = transaction.objectStore('usuarios');
const request = objectStore.put(usuario);
request.onsuccess = () => console.log('Usuário salvo');
request.onerror = () => console.error('Erro ao salvar');
}
// Recuperar por chave primária
function buscarUsuario(id) {
const transaction = db.transaction(['usuarios'], 'readonly');
const objectStore = transaction.objectStore('usuarios');
const request = objectStore.get(id);
request.onsuccess = (event) => {
console.log('Usuário:', event.target.result);
};
}
// Buscar por índice
function buscarPorEmail(email) {
const transaction = db.transaction(['usuarios'], 'readonly');
const objectStore = transaction.objectStore('usuarios');
const index = objectStore.index('email');
const request = index.get(email);
request.onsuccess = (event) => {
console.log('Encontrado:', event.target.result);
};
}
// Deletar
function deletarUsuario(id) {
const transaction = db.transaction(['usuarios'], 'readwrite');
const objectStore = transaction.objectStore('usuarios');
const request = objectStore.delete(id);
request.onsuccess = () => console.log('Deletado');
}
// Exemplo de uso
salvarUsuario({
id: 1,
nome: 'Ana Silva',
email: 'ana@email.com',
criado: new Date()
});</code></pre>
<h3>Consultas Avançadas</h3>
<pre><code class="language-javascript">// Listar todos os registros
function listarTodos() {
const transaction = db.transaction(['usuarios'], 'readonly');
const objectStore = transaction.objectStore('usuarios');
const request = objectStore.getAll();
request.onsuccess = (event) => {
console.log('Todos os usuários:', event.target.result);
};
}
// Usar cursor para iteração eficiente
function iterarComCursor() {
const transaction = db.transaction(['usuarios'], 'readonly');
const objectStore = transaction.objectStore('usuarios');
const request = objectStore.openCursor();
request.onsuccess = (event) => {
const cursor = event.target.result;
if (cursor) {
console.log('ID:', cursor.key, 'Dados:', cursor.value);
cursor.continue();
}
};
}</code></pre>
<h2>Escolhendo a Tecnologia Correta</h2>
<div class="table-wrap"><table><thead><tr><th>Tecnologia</th><th>Limite</th><th>Persistência</th><th>Melhor Para</th></tr></thead><tbody><tr><td>localStorage</td><td>5-10MB</td><td>Indefinida</td><td>Preferências, tokens, configurações</td></tr><tr><td>sessionStorage</td><td>5-10MB</td><td>Fim da sessão</td><td>Estado temporário, filtros</td></tr><tr><td>IndexedDB</td><td>100s MB+</td><td>Indefinida</td><td>Apps offline, grandes datasets</td></tr></tbody></table></div>
<p>Use localStorage para preferências do usuário, sessionStorage para dados de sessão atual e IndexedDB quando precisar de capacidade, estrutura ou consultas complexas. Para aplicações offline-first, considere combinar IndexedDB com Service Workers para sincronização automática.</p>
<h2>Conclusão</h2>
<p>Dominando Web Storage, você pode: <strong>(1)</strong> Construir aplicações que funcionam offline e sincronizam quando conexão retorna; <strong>(2)</strong> Melhorar performance ao evitar requisições desnecessárias; <strong>(3)</strong> Criar experiências personalizadas e responsivas mantendo preferências do usuário. Escolha a ferramenta certa conforme a escala e persistência necessárias — localStorage para simples, sessionStorage para temporário, IndexedDB para complexo.</p>
<h2>Referências</h2>
<ul>
<li><a href="https://developer.mozilla.org/pt-BR/docs/Web/API/Web_Storage_API" target="_blank" rel="noopener noreferrer">MDN Web Docs - Web Storage API</a></li>
<li><a href="https://developer.mozilla.org/pt-BR/docs/Web/API/IndexedDB_API" target="_blank" rel="noopener noreferrer">MDN Web Docs - IndexedDB API</a></li>
<li><a href="https://web.dev/storage-for-the-web/" target="_blank" rel="noopener noreferrer">Web.dev - Storage for the web</a></li>
<li><a href="https://javascript.info/localstorage" target="_blank" rel="noopener noreferrer">JavaScript.info - LocalStorage, sessionStorage</a></li>
<li><a href="https://developers.google.com/web/tools/chrome-devtools/storage/indexeddb" target="_blank" rel="noopener noreferrer">Google Developers - IndexedDB Best Practices</a></li>
</ul>