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
Não use IndexedDB só porque ele existe. Use quando ele faz sentido.

Resumo da aula para nunca mais esquecer

  • IndexedDB é um banco de dados no navegador
  • Trabalha de forma assíncrona
  • Permite salvar objetos diretamente
  • É ideal para aplicações offline
  • É a base para PWAs avançados

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

HARDWARE

Entendendo o seu computador

O que há dentro do meu computador?

Existem alguns componentes fundamentais presentes dentro do seu computador e é muito importante que você conheça um pouco sobre eles, seja para argumentar com algum vendedor durante a compra de um novo PC ou para identificar alguma atitude desleal de algum técnico que esteja te passando um orçamento para reparo. Na seção Raio-X aqui do Contém Bits você pode conhecer e entender mais detalhadamente sobre cada componente, ou também pode clicar abaixo no componente que deseja, para conhecê-lo melhor.

  • Gabinetes

  • Placas-Mãe

  • Processadores

  • Memória

  • Fontes

  • Drives Ópticos

  • Discos Rígidos

  • SSD

  • Placas de Som

  • Placas de Vídeo

Você Sabia?

Space Invaders

A partida mais longa do clássico Space Invaders durou incríveis 38 horas e 32 minutos e esta façanha foi conseguida por um jogador de apenas 12 anos! O jogo, claro, podia ser pausado para alimentação e descanso, mas ainda assim o recorde, estabelecido no dia 02/09/1980, ainda não foi quebrado. Saiba mais.

Asteroids

O título Asteroids, do Atari, possui recorde de pontuação há 30 anos. Em 1982 um americano chamado Scott Safran atingiu a marca de 41.336.440. Atualmente ele faz parte de um minúsculo grupo de jogadores que conseguiram manter seus recordes por mais de 30 anos.

Música tema do Blanka

Até a primeira metade dos anos 90 era bastante comum que as trilhas sonoras dos games fossem criadas por mulheres e a responsável pelas músicas do clássico Street Fighter 2 foi Yoko Shimomura. Segundo ela, o ritmo "Tararirarin" da música tema do personagem Blanka, do Brasil, veio à sua cabeça enquanto ela estava no trem a caminho da Capcom.

Street Fighter 2

Street Fighter 2, lançado para o Super Nintendo no início dos anos 90, foi o principal responsável pelo aumento nas vendas deste console. Graças ao sucesso do título nos Arcades e à perfeita adaptação ao console, muitos consumidores adquiriram o SNES para jogarem o título em casa. Saiba mais.

Duck Hunt

Ao completar o nível 99 do jogo Duck Hunt, para Nintendo, o jogo retorna ao primeiro nível, mas um bug impede que se acerte os patos neste recomeço. Este é um exemplo do que é chamado no mundo dos games de "Kill Screen".