Em nosso artigo anterior, discutimos Dexie, um invólucro do indexedDB. Neste artigo, discutimos indexedDB. Você deve estar familiarizado com esta API do LocalStorage, comumente usada para armazenar informações no navegador. Da mesma forma, o indexedDB é usado para armazenamento lateral do cliente.

O que é indexedDB?

MDN Documentação Explicação:

IndexedDB é uma API de baixo nível para armazenamento do lado do cliente de quantidades significativas de dados estruturados, incluindo arquivos/blobs. Esta API usa índices para ativar pesquisas de alto desempenho desses dados. Embora o armazenamento da web seja útil para armazenar quantidades menores de dados, é menos útil para armazenar quantidades maiores de dados estruturados.

indexedDB fornece uma solução. Esta é a principal página de destino para a cobertura indexedDB da MDN - aqui fornecemos links para os guias completos da API de referência e uso, detalhes de suporte do navegador e algumas explicações dos conceitos -chave.

Exemplo de repositório:

MDN fornece um exemplo de repositório github e possui script/tdo.js.

O script é inicializado usando window.onload

window.onload = () => {
}

Abra uma solicitação para o banco de dados:

// Let us open our database
const DBOpenRequest = window.indexedDB.open('toDoList', 4);

erro de conexão:

// Register two event handlers to act on the database being opened successfully, or not
DBOpenRequest.onerror = (event) => {
 note.appendChild(createListItem('Error loading database.'));
};

na conexão bem -sucedida do banco de dados:

DBOpenRequest.onsuccess = (event) => {
 note.appendChild(createListItem('Database initialised.'));
// Store the result of opening the database in the db variable. This is used a lot below
 db = DBOpenRequest.result;
// Run the displayData() function to populate the task list with all the to-do list data already in the IndexedDB
 displayData();
};

Adicionar dados

// Open a read/write DB transaction, ready for adding the data
const transaction = db.transaction(['toDoList'], 'readwrite');
// Call an object store that's already been added to the database
const objectStore = transaction.objectStore('toDoList');
// Make a request to add our newItem object to the object store
const objectStoreRequest = objectStore.add(newItem[0]);
objectStoreRequest.onsuccess = (event) => {
 // process data on success.
}
// Report on the success of the transaction completing, when everything is done
transaction.oncomplete = () => {
 note.appendChild(createListItem('Transaction completed: database modification finished.'));
// Update the display of data to show the newly added item, by running displayData() again.
 displayData();
};
// Handler for any unexpected error
transaction.onerror = () => {
 note.appendChild(createListItem(`Transaction not opened due to error: ${transaction.error}`));
};

Observação: LocalStorage vs IndexedDB

você pode ter percebido agora que há muito código necessário apenas para adicionar um registro, você tem retornos de chamada assíncronos como o Onerror e Onsuccess. Isso é apontado nesta resposta da troca de pilha.

para simplificar o manuseio deste indexedDB, dexie pode ser usado.

Adicionar dados com dexie:

export function AddFriendForm({ defaultAge } = { defaultAge: 21 }) {
 const [name, setName] = useState('');
 const [age, setAge] = useState(defaultAge);
 const [status, setStatus] = useState('');
async function addFriend() {
 try {
 // Add the new friend!
 const id = await db.friends.add({
 name,
 age
 });
setStatus(`Friend ${name} successfully added. Got id ${id}`);
 setName('');
 setAge(defaultAge);
 } catch (error) {
 setStatus(`Failed to add ${name}: ${error}`);
 }
 }
return (
 
 
{status}
 Name:
  setName(ev.target.value)}
 />
 Age:
  setAge(Number(ev.target.value))}
 />
 Add
 >
 );
}

Esta API de Wrapper me lembra ORMs como Prisma e Drizzle.

Sobre nós:

No ThinkThroo, estudamos grandes projetos de código aberto e fornecemos guias arquitetônicos. Desenvolvemos componentes de reubale, construídos com o Tailwind, que você pode usar em seu projeto. Oferecemos Next.js, React e Node Development Services.

Reserve uma reunião conosco para discutir seu projeto.

REFERÊNCIAS:

1. https://www.reddit.com/r/sveltejs/comments/15rj12h/any_downsides_to_using_indexeddb_vs_localstorage/

2. https://developer.mozilla.org/en-us/docs/web/api/indexeddb_api

3. https://github.com/mdn/dom-examples/tree/main/to-do-notifications

4. https://softwareengineering.stackexchange.com/questions/219953/how-is-localstorage-different-from-indexeddb