Consulta de Registros com a IndexedDB API em JavaScript

Para recuperar registros armazenados no IndexedDB, podemos utilizar diversos métodos disponíveis no objeto IDBObjectStore. Abaixo, abordaremos as diferentes formas de realizar consultas.

Recuperando Todos os Registros

Para obter todos os registros de um armazenamento, utilizamos o método getAll() do objeto IDBObjectStore.

O método getAll() retorna um objeto IDBRequest. Quando a operação é bem-sucedida, o evento success é disparado, e a propriedade result contém um array com os dados recuperados. Caso ocorra um erro, o evento error será disparado, e a propriedade error fornecerá informações sobre o problema. Para tratar esses eventos, utilizamos as propriedades onsuccess e onerror.

Por exemplo, recuperamos todos os registros do armazenamento "users":

const request = indexedDB.open("test", 5); // Conecta ao banco de dados 'test'

// Durante a criação ou alteração da versão do banco de dados, cria o armazenamento 'users'
request.onupgradeneeded = (event) => {
  const db = event.target.result; // Obtém a instância do banco de dados
  const userStore = db.createObjectStore("users", { keyPath: "id", autoIncrement: true }); // Cria o armazenamento
  userStore.add({ name: "Tom", age: 39 });
  userStore.add({ name: "Bob", age: 43 });
  userStore.add({ name: "Sam", age: 28 });
};

// Recupera os registros após a abertura bem-sucedida do banco de dados
request.onsuccess = (event) => {
  const db = event.target.result;
  const transaction = db.transaction(["users"], "readwrite"); // Cria uma transação
  const userStore = transaction.objectStore("users"); // Obtém o armazenamento 'users'

  const getRequest = userStore.getAll(); // Recupera todos os registros
  getRequest.onsuccess = () => {
    const users = getRequest.result; // Obtém os registros recuperados
    console.log(users);
  };
  getRequest.onerror = (e) => console.error(e.target.error.message); // Trata erros
};

No exemplo acima, os registros recuperados são armazenados na constante users e exibidos no console:

[
  { name: "Tom", age: 39, id: 1 },
  { name: "Bob", age: 43, id: 2 },
  { name: "Sam", age: 28, id: 3 },
];

Como o resultado do método getAll() é um array, podemos acessar registros específicos por índice ou iterar sobre todos eles:

getRequest.onsuccess = () => {
  const users = getRequest.result;
  users.forEach((user) => {
    console.log(`Name: ${user.name}, Age: ${user.age}`);
  });
};

Filtrando com Base em Chaves

O método getAll() pode receber parâmetros adicionais para filtrar registros ou limitar a quantidade retornada.

getAll(query);
getAll(query, count);

query: Pode ser uma chave específica ou um objeto IDBKeyRange que define um intervalo de chaves.
count: Permite limitar a quantidade máxima de registros na consulta.

Por exemplo, para recuperar registros cuja chave seja igual a 2:

const getRequest = userStore.getAll(2); // Recupera registros cuja chave seja igual a 2
getRequest.onsuccess = (e) => {
  console.log(e.target.result);
};

Uso do IDBKeyRange

O objeto IDBKeyRange oferece métodos para definir intervalos de chaves:

IDBKeyRange.bound(x, y): Define um intervalo entre x e y.
IDBKeyRange.only(z): Define um intervalo contendo apenas a chave z.
IDBKeyRange.lowerBound(x): Define um intervalo começando em x.
IDBKeyRange.upperBound(y): Define um intervalo terminando em y.

Por exemplo, para recuperar registros cuja chave seja menor ou igual a 2:

const getRequest = userStore.getAll(IDBKeyRange.upperBound(2));
getRequest.onsuccess = () => {
  console.log(getRequest.result);
};

Recuperando um Registro Específico

Para buscar um único registro com base em sua chave, utilizamos o método get().

O método get() retorna um objeto IDBRequest. Em caso de sucesso, o evento success é disparado, e a propriedade result contém o registro correspondente. Caso a chave não exista, result será undefined. Se ocorrer um erro, o evento error será disparado.

Por exemplo, para recuperar o registro com chave 1:

const request = indexedDB.open("test", 5);

// Criação do armazenamento
request.onupgradeneeded = (event) => {
  const db = event.target.result;
  db.createObjectStore("users", { keyPath: "id", autoIncrement: true });
};

// Recuperação de um registro
request.onsuccess = (event) => {
  const db = event.target.result;
  const transaction = db.transaction(["users"], "readwrite");
  const userStore = transaction.objectStore("users");

  const getRequest = userStore.get(1); // Recupera o registro com chave 1
  getRequest.onsuccess = () => console.log(getRequest.result); // Exibe o registro recuperado
  getRequest.onerror = (e) => console.error(e.target.error.message); // Trata erros
};

O registro recuperado também pode ser acessado diretamente no evento onsuccess:

const getRequest = userStore.get(1); // Recupera o registro com chave 1
getRequest.onsuccess = (e) => {
  const user = e.target.result; // Acessa o registro
  console.log(`Name: ${user.name}, Age: ${user.age}`);
};

Documentação oficial:

Indexed Database API - W3C