Dans notre article précédent, nous avons discuté de Dexie, un wrapper pour indededdb. Dans cet article, nous discutons indededDB. Vous devez être familier avec cette API LocalStorage, couramment utilisée pour stocker des informations dans le navigateur. De même, IndededDB est utilisé pour le stockage côté client.

Qu'est-ce que l'indexédb?

Documentation MDN Explication:

IndededDB est une API de bas niveau pour le stockage côté client de quantités importantes de données structurées, y compris les fichiers / blobs. Cette API utilise des index pour activer les recherches à haute performance de ces données. Bien que le stockage Web soit utile pour stocker de plus petites quantités de données, il est moins utile pour stocker de plus grandes quantités de données structurées.

indexeddb fournit une solution. Ceci est la principale page de destination de la couverture indexée de MDN - nous fournissons ici des liens vers les guides de référence et d'utilisation de l'API complète, les détails du support du navigateur et quelques explications des concepts clés.

Exemple de référentiel:

mdn fournit un exemple de référentiel github et a script / todo.js.

est initialisé à l'aide de window.onload

window.onload = () => {
}

Ouvrez une demande à la base de données:

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

Erreur de connexion:

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

sur la connexion à base de base de données:

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();
};

Ajouter des données

// 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}`));
};

Observation: localStorage vs indededdb

Vous pourriez maintenant vous rendre compte qu'il y a beaucoup de code requis pour ajouter un enregistrement, vous avez des rappels asynchrones tels que ONERROR et ONSUCCESS. Ceci est pointé dans cette réponse d'échange de pile.

Pour simplifier la gestion de ce indexéddb, Dexie peut être utilisée.

Ajouter des données avec 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
 >
 );
}

Cette API Wrapper me rappelle des orms tels que Prisma et Drizzle.

À propos de nous:

À Thinkthroo, nous étudions de grands projets open source et fournissons des guides architecturaux. Nous avons développé des composants Resubale, construits avec Tailwind, que vous pouvez utiliser dans votre projet. Nous offrons des services de développement NEXT.js, React et Node.

Réservez une réunion avec nous pour discuter de votre projet.

références:

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://softwareensineering.stackexchange.com/questions/219953/how-is-localstorage-different-from-indexeddb