Como usar o IndexedDB como um banco de dados

IndexedDB é um banco de dados NoSQL do lado do cliente que permite armazenar e recuperar dados estruturados no navegador da web de um usuário.

O IndexedDB oferece várias vantagens, como memória maior e armazenamento e recuperação de dados off-line em relação a outras opções de armazenamento, como localStorage. Aqui você aprenderá como usar o IndexedDB como um banco de dados.

Configurando seu banco de dados

Para criar o banco de dados, você deve criar uma solicitação aberta usando o IndexedDB abrir método. O abrir método retorna um IDBOpenDBRequest objeto. Este objeto fornece acesso ao sucesso, erro, e atualização necessáriaeventos emitidos da operação aberta.

O abrir O método recebe dois argumentos: um nome e um número de versão opcional. O argumento name representa o nome do seu banco de dados. O número da versão especifica a versão do banco de dados com a qual seu aplicativo espera trabalhar. O valor padrão é zero.

Veja como criar uma solicitação aberta:

const openRequest = indexedDB.open("usersdb", 1);

Depois de criar a solicitação aberta, você precisa ouvir e lidar com os eventos no objeto retornado.

O sucesso O evento ocorre quando você cria o banco de dados com êxito. Uma vez emitido, você obtém acesso ao seu objeto de banco de dados por meio de evento.destino.resultado:

openRequest.onsuccess = função (evento) {
const db = event.target.result;
console.registro("Banco de dados criado", db);
};

O exemplo acima lida com um evento de sucesso registrando o objeto de banco de dados.

O erro O evento ocorre se IndexedDB encontrar um problema ao criar o banco de dados. Você pode lidar com isso registrando o erro no console ou usando outro métodos de tratamento de erros:

openRequest.onerror = função (evento) {
// ...
};

O atualização necessária O evento ocorre quando você cria o banco de dados pela primeira vez ou quando atualiza sua versão. Ele é acionado apenas uma vez, tornando-o o local ideal para criar um armazenamento de objetos.

Criando um armazenamento de objetos

Um armazenamento de objeto é semelhante a uma tabela em bancos de dados relacionais do lado do servidor. Você pode usar um armazenamento de objeto para armazenar pares chave-valor.

Você deve criar armazenamentos de objetos em resposta ao atualização necessária evento. Este evento é acionado quando você cria uma nova versão do banco de dados ou atualiza uma versão existente. Isso garante que o banco de dados esteja configurado corretamente e atualizado antes de adicionar quaisquer dados.

Você pode criar um armazenamento de objeto usando o criarObjectStore método, que você pode acessar em uma referência de seu banco de dados. Esse método usa o nome do armazenamento de objeto e um objeto de configuração como argumentos.

No objeto de configuração, você deve definir uma chave primária. Você pode definir uma chave primária definindo um caminho de chave, que é uma propriedade que sempre existe e contém um valor exclusivo. Como alternativa, você pode usar um gerador de chaves definindo o keyPath propriedade para "eu ia" e a Incremento automático propriedade para verdadeiro em seu objeto de configuração.

Por exemplo:

openRequest.onupgradeneeded = função (evento) {
const db = event.target.result;
// Cria um armazenamento de objeto
const userObjectStore = db.createObjectStore("userStore", {
 keyPath: "eu ia",
 Incremento automático: verdadeiro,
 });
}

Este exemplo cria um armazenamento de objeto denominado “userStore” em seu banco de dados e define sua chave primária para um id de incremento automático.

Definindo Índices

No IndexedDB, um índice é uma maneira de organizar e recuperar dados com mais eficiência. Isso permite pesquisar o armazenamento de objeto e classificá-lo com base nas propriedades indexadas.

Para definir um índice em um armazenamento de objeto, use o criarIndex() método de um objeto de armazenamento de objeto. Este método usa um nome de índice, um nome de propriedade e um objeto de configuração como argumentos:

userObjectStore.createIndex("nome", "nome", { exclusivo: falso });
userObjectStore.createIndex("e-mail", "e-mail", { exclusivo: verdadeiro });

Este bloco de código acima define dois índices, "nome" e "email" no userObjectStore. O índice "nome" não é exclusivo, o que significa que vários objetos podem ter o mesmo valor de nome, enquanto o índice "email" é exclusivo, garantindo que dois objetos não possam ter o mesmo valor de e-mail.

Aqui está um exemplo completo de como você pode lidar com um atualização necessária evento:

openRequest.onupgradeneeded = função (evento) {
const db = event.target.result;
// Cria um armazenamento de objeto
const userObjectStore = db.createObjectStore("userStore", {
 keyPath: "eu ia",
 Incremento automático: verdadeiro,
 }); 
// Cria índices
 userObjectStore.createIndex("nome", "nome", { exclusivo: falso });
 userObjectStore.createIndex("e-mail", "e-mail", { exclusivo: verdadeiro });
};

Adicionando dados ao IndexedDB

Uma transação no IndexedDB é uma maneira de agrupar várias operações de leitura e gravação em uma única operação. Para garantir a consistência e a integridade dos dados, se uma das operações em uma transação falhar, o IndexedDB reverterá todas as operações.

Para adicionar dados a um banco de dados IndexedDB, você precisa criar uma transação no armazenamento de objeto que deseja adicionar os dados e, em seguida, usar o adicionar() método na transação para adicionar os dados.

Você pode criar uma transação chamando o transação método em seu objeto de banco de dados. Este método recebe dois argumentos: O(s) nome(s) do seu armazenamento de dados e o modo da transação, que pode ser somente leitura (padrão) ou ler escrever.

Em seguida, ligue para o objectStore() método na transação e passe o nome do armazenamento de objeto ao qual você deseja adicionar dados. Este método retorna uma referência ao armazenamento de objeto.

Por fim, ligue para o adicionar() no armazenamento de objetos e passe os dados que deseja adicionar:

const addUserData = (userData, db) => {
// Abre uma transação
const transação = db.transação("userStore", "ler escrever");
// Adiciona dados ao armazenamento de objetos
const userObjectStore = transaction.objectStore("userStore");
// Faça uma solicitação para adicionar userData
const solicitação = userObjectStore.add (userData);
// Trata um evento de sucesso
 request.onsuccess = função (evento) {
//...
 };
// Trata um erro
 request.onerror = função (evento) {
//...
 };
};

Esta função cria uma transação com o armazenamento de objeto "userStore" e define o modo como "readwrite". Em seguida, ele obtém o armazenamento de objeto e adiciona o dados do usuário para isso usando o adicionar método.

Recuperando dados do IndexedDB

Para recuperar dados de um banco de dados IndexedDB, você precisa criar uma transação no armazenamento de objeto do qual deseja recuperar os dados e, em seguida, usar o pegar() ou getAll() método na transação para recuperar os dados, dependendo da quantidade de dados que você deseja recuperar.

O pegar() O método obtém um valor para a chave primária do objeto que você deseja recuperar e retorna o objeto com a chave correspondente de seu armazenamento de objetos.

O getAll() O método retorna todos os dados em um armazenamento de objeto. Ele também usa uma restrição opcional como argumento e retorna todos os dados correspondentes da loja.

const getUserData = (id, banco de dados) => {
const transação = db.transação("userStore", "somente leitura");
const userObjectStore = transaction.objectStore("userStore");
// Faz uma requisição para pegar os dados
const solicitação = userObjectStore.get (id);
 request.onsuccess = função (evento) {
console.log (pedido.resultado);
 };
 request.onerror = função (evento) {
// Trata o erro
 };
};

Esta função cria uma transação com o armazenamento de objeto "userStore" e define o modo como "readonly". Em seguida, ele recupera os dados do usuário com o id correspondente do armazenamento de objetos.

Atualizando dados com IndexedDB

Para atualizar dados no IndexedDB, você precisa criar uma transação com o modo "readwrite". Continue recuperando o objeto que deseja atualizar usando o pegar() método. Em seguida, modifique o objeto e chame o colocar() no armazenamento de objeto para salvar o objeto atualizado de volta no banco de dados.

const atualizarUserData = (id, userData, db) => {
const transação = db.transação("userStore", "ler escrever");
const userObjectStore = transaction.objectStore("userStore");
// Faz uma requisição para pegar os dados
const getRequest = userObjectStore.get (id);
// Trata um evento de sucesso
 getRequest.onsuccess = função (evento) {
// Obtém os dados antigos do usuário
const usuário = evento.destino.resultado;
// Atualiza os dados do usuário
 user.name = userData.name;
 usuário.email = usuárioData.email;
// Faz uma requisição para atualizar os dados
const putRequest = userObjectStore.put (usuário);
 putRequest.onsuccess = função (evento) {
// Lidar com o sucesso
 };
 putRequest.onerror = função (evento) {
// Trata o erro
 };
 };
 getRequest.onerror = função (evento) {
// Trata o erro
 };
};

Esta função cria uma transação para obter e atualizar os dados do seu banco de dados.

Excluindo dados do IndexedDB

Para excluir dados do IndexedDB, você precisa criar uma transação com o modo "readwrite". Então ligue para o excluir() método no armazenamento de objetos para remover o objeto do banco de dados:

const deleteUserData = (id, banco de dados) => {
const transação = db.transação("userStore", "ler escrever");
const userObjectStore = transaction.objectStore("userStore");
// Faz uma requisição para deletar os dados
const solicitação = userObjectStore.delete (id);
 request.onsuccess = função (evento) {
// Lidar com o sucesso
 };
 request.onerror = função (evento) {
// Trata o erro
 };
};

Esta função cria uma transação que exclui os dados com o id correspondente de seu armazenamento de objeto.

Você deve usar IndexedDB ou localStorage?

A escolha entre IndexedDB e outros bancos de dados do lado do cliente, como localStorage, depende dos requisitos do seu aplicativo. Use localStorage para armazenamento simples de pequenas quantidades de dados. Escolha IndexedDB para grandes conjuntos de dados estruturados que requerem consulta e filtragem.