JavaScript Academy · Aula

Abrindo um banco de dados

Crie bancos de dados e armazenamentos de objetos.

Abrindo um banco de dados é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de JavaScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de JavaScript Academy inclui 4 aulas no total.

O que é IndexedDB

IndexedDB é um banco de dados transacional de grande capacidade integrado ao navegador. Diferentemente de localStorage (pequeno, composto apenas por strings e síncrono), ele armazena objetos estruturados, oferece suporte a índices e funciona de forma assíncrona.

Abrindo um banco de dados

Você abre (ou cria) um banco de dados com indexedDB.open(name, version). Ele retorna um objeto de solicitação cujos eventos informam sucesso ou falha.

const request = indexedDB.open('notes-db', 1);

Os eventos da solicitação

Uma solicitação de abertura dispara eventos que você trata:

onsuccess — o banco de dados está pronto
onerror — a abertura falhou
onupgradeneeded — o esquema precisa ser criado ou atualizado

request.onsuccess = (e) => {
  const db = e.target.result;
  console.log('database opened');
};
request.onerror = (e) => {
  console.log('open failed:', e.target.error);
};

onupgradeneeded

onupgradeneeded é executado quando o banco de dados é criado pela primeira vez ou quando o número da versão aumenta. Este é o único lugar em que você pode alterar o esquema (criar ou excluir armazenamentos de objetos e índices).

request.onupgradeneeded = (e) => {
  const db = e.target.result;
  // create object stores here
};

Armazenamentos de objetos

Um armazenamento de objetos é semelhante a uma tabela: um contêiner de registros. Crie um com db.createObjectStore(name, options) dentro de onupgradeneeded.

request.onupgradeneeded = (e) => {
  const db = e.target.result;
  db.createObjectStore('notes', { keyPath: 'id' });
};

O keyPath

O keyPath informa ao IndexedDB qual propriedade de cada objeto é sua chave primária. Os objetos armazenados devem ter essa propriedade, e as chaves devem ser exclusivas.

db.createObjectStore('users', { keyPath: 'email' });
// Each stored user object must have a unique 'email'.

Chaves com incremento automático

Se seus objetos não tiverem uma chave natural, deixe o IndexedDB gerar uma com autoIncrement: true. Cada novo registro recebe o próximo número inteiro.

db.createObjectStore('logs', {
  keyPath: 'id',
  autoIncrement: true
});
// id is assigned automatically on add().

Verificando armazenamentos existentes

Como onupgradeneeded é executado a cada aumento de versão, proteja a criação com db.objectStoreNames.contains para evitar erros em novas execuções.

request.onupgradeneeded = (e) => {
  const db = e.target.result;
  if (!db.objectStoreNames.contains('notes')) {
    db.createObjectStore('notes', { keyPath: 'id' });
  }
};

Mantendo a referência db

Salve o objeto de banco de dados de onsuccess para que operações posteriores possam usá-lo. Todas as leituras e gravações passam por esta instância de db.

let db;
request.onsuccess = (e) => {
  db = e.target.result; // reuse for transactions
};

Tratando aberturas bloqueadas

Se outra aba mantiver aberta uma versão mais antiga, uma atualização poderá ser blocked. Escute onblocked e peça ao usuário que feche as outras abas.

request.onblocked = () => {
  console.log('Close other tabs to upgrade the database.');
};

O fluxo de abertura

Para abrir o IndexedDB: chame open com um nome e uma versão, crie seu esquema em onupgradeneeded e, em seguida, obtenha o db em onsuccess. A partir daí, execute transações para ler e gravar dados.

Verificação rápida

Teste sua compreensão sobre a abertura de um banco de dados.

Recapitulação

Você aprendeu a abrir um banco de dados IndexedDB:

indexedDB.open(name, version) retorna uma solicitação.
Crie armazenamentos de objetos somente em onupgradeneeded.
keyPath define a chave primária; autoIncrement gera as chaves.
Salve o db de onsuccess para usá-lo depois.
Trate onerror e onblocked.

A seguir, transações e operações CRUD.

Perguntas Frequentes

A aula “Abrindo um banco de dados” é grátis?

Sim — o texto completo de “Abrindo um banco de dados” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de JavaScript Academy, atualize para CoddyKit PRO. O curso de JavaScript Academy inclui 4 aulas no total.

O que vou aprender em “Abrindo um banco de dados”?

Crie bancos de dados e armazenamentos de objetos. Você pratica JavaScript Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar JavaScript Academy?

Nenhuma experiência prévia é necessária. JavaScript Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.

Quanto tempo leva a aula “Abrindo um banco de dados”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de JavaScript Academy?

Sim. Cada aula de JavaScript Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para JavaScript Academy