Criando, Abrindo e Excluindo um Banco de Dados IndexedDB API - JavaScript

Introdução

A Indexed Database API, ou simplesmente IndexedDB API, é uma interface que permite trabalhar com bancos de dados diretamente no navegador. Este banco de dados é conhecido como IndexedDB. Uma das suas principais características é ser não relacional, ou seja, faz parte da categoria de bancos NoSQL. A ideia central do IndexedDB é armazenar objetos associados a chaves específicas.

Abrindo ou criando um banco de dados IndexedDB

Para acessar a funcionalidade do IndexedDB, utilizamos a propriedade indexedDB do objeto global window:

const dbFactory = window.indexedDB;
console.log(dbFactory); // IDBFactory{}

Essa propriedade é um objeto do tipo IDBFactory, que fornece métodos para trabalhar com bancos de dados. O principal método usado para abrir ou criar um banco de dados é o open():

indexedDB.open(name);
indexedDB.open(name, version);

O método open() aceita dois parâmetros:

• name(obrigatório): o nome do banco de dados que será aberto ou criado.

• version(opcional): define a versão do banco de dados e determina sua estrutura (esquema).

Exemplo básico:

const request = indexedDB.open("test"); // conecta ao banco de dados "test"

Caso o banco de dados "test" não exista, ele será criado automaticamente.

O método open() retorna um objeto do tipo IDBOpenDBRequest, que representa uma solicitação para abrir ou criar o banco de dados. Para interagir com o banco após sua abertura, podemos configurar um manipulador para o evento success utilizando a propriedade onsuccess:

const request = indexedDB.open("test"); // conecta ao banco "test"

// Manipulador para o evento de sucesso
request.onsuccess = (event) => {  
    const database = event.target.result;  // acessa o banco de dados  
    console.log(database.name);            // exibe o nome do banco ("test")  
};

No manipulador do evento, o banco de dados pode ser acessado através de event.target.result, que retorna um objeto do tipo IDBDatabase.

Tratando erros ao abrir o banco de dados

Ao tentar abrir o banco, erros podem ocorrer, como falta de permissões no navegador. Para lidar com isso, utilizamos o evento error, configurado através da propriedade onerror:

const request = indexedDB.open("test"); // conecta ao banco "test"

// Manipulador para o evento de erro
request.onerror = (event) => {
    const error = event.target.error; // informações do erro
    console.error("Erro ao abrir o banco:", error.message);
};

Monitorando a criação de um banco de dados

Caso o banco não exista, ele será criado automaticamente ao tentar abri-lo. Para rastrear essa criação, utilizamos o evento upgradeneeded. Esse evento é disparado em dois cenários:

• Quando o banco solicitado ainda não existe.

• Quando a versão solicitada é maior do que a versão atual, desencadeando uma atualização.

O manipulador do evento recebe um objeto do tipo IDBVersionChangeEvent, que fornece informações sobre a versão anterior e a nova versão do banco.

request.onupgradeneeded = (event) => { 
    console.log("Versão anterior:", event.oldVersion); // versão antiga
    console.log("Nova versão:", event.newVersion);     // nova versão
    const database = event.target.result;             // acessa o banco
};

Este evento é ideal para configurar e inicializar o banco de dados, como criar armazenamentos de objetos (object stores) ou realizar outras configurações.

Obtendo a lista de bancos de dados

O método databases() do objeto IDBFactory retorna uma Promise que resolve para um array contendo informações sobre todos os bancos de dados existentes. Cada elemento do array possui as propriedades:

• name: nome do banco de dados.

• version: versão do banco.

indexedDB.databases()
    .then((databases) => {
        console.log(databases);
    });

Exemplo de saída:

[
    { name: "test", version: 1 },
    { name: "test2", version: 1 }
]

Neste caso, há dois bancos de dados: "test" e "test2", ambos na versão 1.

Excluindo um banco de dados

Para excluir um banco de dados, utilizamos o método deleteDatabase() do objeto IDBFactory, passando como parâmetro o nome do banco a ser excluído:

indexedDB.deleteDatabase("test2");

O método retorna um objeto IDBOpenDBRequest, que permite monitorar o sucesso ou falha da operação configurando os eventos success e error:

const DBDeleteRequest = indexedDB.deleteDatabase("test2");

// Manipulador para erros
DBDeleteRequest.onerror = (event) => {
    console.error("Erro ao excluir o banco de dados.");
};

// Manipulador para sucesso
DBDeleteRequest.onsuccess = (event) => {
    console.log("Banco de dados excluído com sucesso.");
    console.log(event.result); // deve ser undefined
};

Se a exclusão for bem-sucedida, a propriedade result no evento success será undefined.