Adicionando Registros ao Armazenamento no IndexedDB API - JavaScript

Para adicionar registros ao armazenamento em uma base de dados IndexedDB, utiliza-se o método add() do objeto IDBObjectStore.

O método add() tem a seguinte assinatura:

add(value)
add(value, key)

O primeiro parâmetro representa o valor a ser adicionado ao armazenamento. O segundo, opcional, define a chave do registro. Se não for especificado, o valor padrão será null.

A necessidade de especificar uma chave e o tipo dela depende das configurações aplicadas durante a criação do armazenamento

Retorno do Método add()

O método add() retorna um objeto IDBRequest. Em caso de sucesso, o evento success é disparado, e a propriedade result contém a chave do registro adicionado. Em caso de erro, um evento error será acionado, acompanhado de uma exceção do tipo DOMException. Esses eventos podem ser tratados pelos manipuladores onsuccess e onerror.

A seguir, um exemplo de código que adiciona um registro ao armazenamento:

const request = indexedDB.open("test", 5); // Conecta-se à base de dados "test" na versão 5
 
// Durante a criação ou atualização da base de dados, cria o armazenamento "users"
request.onupgradeneeded = (event) => { 
    const db = event.target.result; // Obtém a instância da base de dados
    db.createObjectStore("users", { keyPath: "id", autoIncrement: true }); // Define "id" como chave com autoIncrement ativo
};

// Após abrir a base de dados, adiciona um registro ao armazenamento "users"
request.onsuccess = (event) => { 
    const db = event.target.result; // Obtém a base de dados
    const transaction = db.transaction(["users"], "readwrite"); // Cria uma transação
    const userStore = transaction.objectStore("users"); // Obtém o armazenamento "users"
    
    const tom = { name: "Tom", age: 39 };
    const addRequest = userStore.add(tom); // Adiciona o registro ao armazenamento

    addRequest.onsuccess = (event) => {
        console.log("Dados adicionados com sucesso");
        console.log("ID do registro adicionado:", addRequest.result); // Exibe o ID gerado
    };
};

Neste exemplo, a base de dados "test" contém o armazenamento users, configurado com a propriedade id como chave. Essa chave é gerada automaticamente para cada novo registro. Assim, os registros adicionados não precisam incluir manualmente a propriedade id.

Para adicionar múltiplos registros ao armazenamento, basta chamar o método add() para cada um:

const bob = { name: "Bob", age: 43 };
const sam = { name: "Sam", age: 28 };
userStore.add(bob);
userStore.add(sam);

É importante ressaltar que o método add() não insere os dados imediatamente. A operação é assíncrona, sendo concluída após algum tempo. Por isso, é essencial utilizar o manipulador onsuccess para acompanhar o status da operação.

Visualização no navegador

Navegadores modernos permitem inspecionar o conteúdo do IndexedDB usando ferramentas de desenvolvedor. No Google Chrome, essa funcionalidade está na aba Applicativo (Application), na seção Armazenamento (Storage) -> IndexedDB.