IndexedDB é uma ferramenta para armazenar dados estruturados no navegador. Isso está incorporado nos navegadores modernos, permitindo que aplicativos web armazenem e recuperem objetos JavaScript de forma eficiente. Ao contrário de outros mecanismos de armazenamento como localStorage, que é limitado a armazenar strings, IndexedDB pode armazenar objetos JavaScript, arquivos e praticamente qualquer outro tipo de dado. Isso facilita para aplicações web que precisam trabalhar com estruturas de dados grandes e complexas. Agora, vamos ver como o IndexedDB funciona. O primeiro passo é abrir um banco de dados. Aqui está um exemplo:

let request = indexedDB.open("Sample DB", 1);

request.onerror = function(event) {
  console.log("Error opening database");
};

request.onsuccess = function(event) {
  let db = event.target.result;
  console.log("Database opened successfully");
};

Neste código, estamos abrindo um banco de dados chamado "Sample DB" com a versão 1. Fornecemos duas funções de callback: uma para tratar erros e outra para quando o banco de dados é aberto com sucesso. O objeto db que recebemos no callback de sucesso é o que usaremos para interagir com o banco de dados. Se você verificar a interface do aplicativo das ferramentas de desenvolvimento do navegador, verá que seu Sample DB na seção IndexedDb foi aberto. Depois de abrir seu banco de dados, você pode começar a trabalhar com object stores. Armazenamentos de objetos em IndexedDB são semelhantes a tabelas em bancos de dados tradicionais. Eles armazenam os dados reais que você deseja guardar. Aqui está como criar um object store:

let request = indexedDB.open("Sample DB", 1);

request.onupgradeneeded = function(event) {
  let db = event.target.result;
  let objectStore = db.createObjectStore("customers", { keyPath: "id" });
};

Este código cria um objeto store chamado "customers" com "id" como seu caminho de chave. O caminho da chave é como uma chave primária em um banco de dados tradicional - é usado para identificar exclusivamente cada registro. Para adicionar dados ao nosso armazenamento de objetos, faríamos algo assim. O db neste exemplo representa a instância do banco de dados IndexedDB.

let transaction = db.transaction(["customers"], "readwrite");
let objectStore = transaction.objectStore("customers");
let request = objectStore.add({ id: 1, name: "John Doe", email: "john@example.com" });

request.onerror = function(event) {
  console.log("Error adding data");
};

request.onsuccess = function(event) {
  console.log("Data added successfully");
};

Este código adiciona um novo cliente ao nosso armazenamento de objetos "customers". Iniciamos uma transação (que é como agrupamos operações de banco de dados), obtemos uma referência para nossa object store e então adicionamos nossos dados. Recuperar dados funciona de maneira semelhante. Iniciamos uma transação, obtemos nossa object store e então usamos métodos como get para recuperar dados:

let transaction = db.transaction(["customers"]);
let objectStore = transaction.objectStore("customers");
let request = objectStore.get(1);

request.onerror = function(event) {
  console.log("Error retrieving data");
};

request.onsuccess = function(event) {
  console.log("Customer:", request.result);
};

Este código recupera o cliente com id igual a 1 do nosso armazenamento de objetos "customers". Uma das principais características do IndexedDB é que ele é assíncrono. Isso significa que quando você interage com IndexedDB, as operações não bloqueiam a thread principal da aplicação web. Isso garante que sua aplicação web permaneça responsiva mesmo ao lidar com grandes quantidades de dados. Embora IndexedDB ofereça capacidades poderosas, ele tem uma curva de aprendizado mais íngreme em comparação com outras opções de API de armazenamento mais simples, o que pode ser desafiador para iniciantes. No entanto, para aplicações que precisam lidar com grandes quantidades de dados estruturados no lado do cliente, IndexedDB oferece capacidades incomparáveis.