Aula 68 — IndexedDB na prática

Na aula anterior, você conheceu o IndexedDB como uma alternativa mais poderosa ao localStorage.

Agora é hora de ver isso funcionando na prática.

Nesta aula, vamos usar o IndexedDB para salvar e ler dados reais, passo a passo, sem pressa.

🎯 Objetivo da aula

Ao final desta aula, você será capaz de:

• Criar um banco de dados no navegador
• Criar uma store (tabela)
• Salvar objetos no IndexedDB
• Ler dados armazenados
• Entender o fluxo assíncrono do IndexedDB

Antes de começar: modelo mental

Pense no IndexedDB assim:

• Database → banco de dados
• Object Store → tabela
• Registro → linha

Tudo isso rodando dentro do navegador.

1️⃣ Abrindo (ou criando) um banco de dados

O primeiro passo é abrir um banco de dados.

 const request = indexedDB.open("agendaDB", 1); 

Aqui:

• "agendaDB" → nome do banco
• 1 → versão do banco

2️⃣ Criando a estrutura do banco

Se o banco ainda não existir, o evento onupgradeneeded será chamado.

 
  request.onupgradeneeded = function (event) { const db = event.target.result;
  db.createObjectStore("compromissos", {
    keyPath: "id",
    autoIncrement: true
  });
};

Isso cria uma store chamada compromissos, semelhante a uma tabela.

3️⃣ Conexão bem-sucedida

 
  request.onsuccess = function (event) 
  { 
    const db = event.target.result; console.log("Banco aberto com sucesso"); 
  }; 

 console.log("Banco aberto com sucesso"); // Saída esperada no console 

4️⃣ Salvando dados no IndexedDB

Agora vamos salvar um compromisso no banco.

 
  function salvarCompromisso(db, texto) 
  { 
    const transaction = db.transaction("compromissos", "readwrite"); 
    const store = transaction.objectStore("compromissos");
    store.add({ descricao: texto });
  }

Chamando a função:

 salvarCompromisso(db, "Estudar IndexedDB"); 

5️⃣ Lendo dados do IndexedDB

Agora vamos buscar todos os compromissos salvos.

 
  function listarCompromissos(db) 
  { 
    const transaction = db.transaction("compromissos", "readonly"); 
    const store = transaction.objectStore("compromissos");
    const request = store.getAll();
    request.onsuccess = function () 
    {
      console.log(request.result);
    };
  }

 listarCompromissos(db); // Saída será um array de objetos salvos 

6️⃣ Observando os dados no navegador

Você pode visualizar o IndexedDB no DevTools:

• Ctrl + Shift + I
• Aba Application
• IndexedDB

Isso ajuda muito no aprendizado.

Comparação mental com localStorage

• localStorage → simples, síncrono
• IndexedDB → estruturado, assíncrono

Agora você já consegue sentir a diferença.

Quando isso começa a fazer sentido?

IndexedDB começa a valer a pena quando:

• Há muitos registros
• Os dados são complexos
• Você precisa trabalhar offline

Na próxima aula, vamos evoluir esse exemplo e integrar IndexedDB com uma interface real e fluxo offline-first.