Introdução ao IndexedDB: O Banco de Dados Local do Seu Navegador

Introdução ao IndexedDB: O Banco de Dados Local do Seu Navegador

Imagine que seu navegador é como um computador pessoal. Assim como você pode guardar arquivos e documentos no disco rígido do seu computador, o IndexedDB permite que você armazene dados estruturados diretamente no navegador do usuário. Isso é especialmente poderoso para aplicações offline-first, onde o aplicativo precisa funcionar mesmo sem conexão com a internet.

O que é IndexedDB?

IndexedDB é um banco de dados NoSQL embutido nos navegadores modernos. Diferentemente do localStorage (que é como um pequeno caderno com apenas 5-10MB de espaço), o IndexedDB é como uma biblioteca inteira onde você pode guardar gigabytes de dados estruturados.

Analogia: Se localStorage fosse uma caixa de sapatos, IndexedDB seria um armário inteiro. Ambos ficam em sua casa (navegador), mas um tem muito mais capacidade.

Por que usar IndexedDB?

• Offline-first: Seu aplicativo funciona sem internet, sincronizando dados quando a conexão volta
• Grande capacidade: Armazene centenas de MB ou até GB de dados
• Estruturado: Organize dados em "object stores" (como tabelas em um banco de dados tradicional)
• Rápido: Acesso local é muito mais rápido que requisições ao servidor

Conceitos Fundamentais

Database (Banco de Dados): O container principal que armazena tudo. Cada site tem seu próprio banco isolado.

Object Store (Armazém de Objetos): Similar a uma tabela em um banco de dados tradicional. Você cria um object store para cada tipo de dado (ex: "usuários", "posts", "comentários").

Index (Índice): Uma forma rápida de buscar dados. Se você tem milhões de usuários, um índice no campo "email" permite encontrar um usuário rapidamente sem verificar todos.

Seu Primeiro Código com IndexedDB

Vamos criar um banco de dados simples para armazenar tarefas:

// Abrir ou criar um banco de dados
const request = indexedDB.open('MinhaAppDB', 1);

// Quando o banco é criado pela primeira vez
request.onupgradeneeded = (event) => {
  const db = event.target.result;
  
  // Criar um object store chamado 'tarefas'
  if (!db.objectStoreNames.contains('tarefas')) {
    db.createObjectStore('tarefas', { keyPath: 'id', autoIncrement: true });
  }
};

// Quando o banco abre com sucesso
request.onsuccess = (event) => {
  const db = event.target.result;
  console.log('Banco de dados aberto!');
};

request.onerror = () => {
  console.log('Erro ao abrir banco de dados');
};

Adicionando Dados

Agora vamos adicionar uma tarefa ao nosso banco:

function adicionarTarefa(db, titulo, descricao) {
  const transaction = db.transaction(['tarefas'], 'readwrite');
  const store = transaction.objectStore('tarefas');
  
  const tarefa = {
    titulo: titulo,
    descricao: descricao,
    concluida: false,
    dataCriacao: new Date()
  };
  
  const request = store.add(tarefa);
  
  request.onsuccess = () => {
    console.log('Tarefa adicionada com ID:', request.result);
  };
}

Recuperando Dados

Para buscar todas as tarefas:

function obterTodasAsTarefas(db) {
  const transaction = db.transaction(['tarefas'], 'readonly');
  const store = transaction.objectStore('tarefas');
  const request = store.getAll();
  
  request.onsuccess = () => {
    const tarefas = request.result;
    console.log('Tarefas encontradas:', tarefas);
  };
}

Entendendo Transações

Uma transação é como um contrato: você diz "vou ler/escrever esses dados" e o IndexedDB garante que ninguém mais mexe neles ao mesmo tempo. Isso evita conflitos.

Existem dois tipos:

• 'readonly': Apenas leitura (rápido, seguro)
• 'readwrite': Leitura e escrita (mais lento, mas necessário para modificar dados)

Offline-First na Prática

A magia do offline-first acontece assim:

1. Usuário abre seu app (com ou sem internet)
2. App carrega dados do IndexedDB (instantâneo!)
3. Usuário interage com o app normalmente
4. Quando há internet, app sincroniza mudanças com o servidor
5. Se perder internet, app continua funcionando com dados locais

Limitações Importantes

IndexedDB não é perfeito para tudo:

• Dados são perdidos se o usuário limpar o cache do navegador
• Cada navegador tem seu próprio IndexedDB (não sincroniza entre Chrome e Firefox)
• Limite de espaço varia por navegador (geralmente 50MB+ por site)

Próximos Passos

Agora que você entende os conceitos básicos, explore: criar índices para buscas rápidas, usar cursores para iterar dados, e implementar sincronização com um servidor backend quando a conexão retornar.