IndexedDB expliqué.

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

Qu'est-ce qu'IndexedDB ?

Explication de la documentation MDN :

IndexedDB est une API de bas niveau pour le stockage côté client de quantités importantes de données structurées, y compris des fichiers/blobs. Cette API utilise des index pour permettre des recherches hautes performances sur ces données. Bien que le stockage Web soit utile pour stocker de petites quantités de données, il l'est moins pour stocker de plus grandes quantités de données structurées.

IndexedDB fournit une solution. Il s'agit de la page de destination principale de la couverture IndexedDB de MDN. Nous fournissons ici des liens vers les guides complets de référence et d'utilisation de l'API, les détails de la prise en charge du navigateur et quelques explications des concepts clés.

Exemple de référentiel :

MDN fournit un exemple de référentiel Github et contient script/todo.js.

Le script est initialisé à l'aide de window.onload

window.onload = () => {
}

Ouvrir une requête à 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.'));
};

En cas de connexion réussie à la 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 IndexedDB

Vous avez peut-être déjà réalisé qu'il y a beaucoup de code requis juste pour ajouter un enregistrement, vous avez des rappels asynchrones tels que onerror et onsuccess. Ceci est souligné dans cette réponse d'échange de pile.

Pour simplifier la gestion de cet IndexedDB, Dexie peut être utilisé.

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 (
 <>
 <p>{status}</p>
 Name:
 <input
 type="text"
 value={name}
 onChange={(ev) => setName(ev.target.value)}
 />
 Age:
 <input
 type="number"
 value={age}
 onChange={(ev) => setAge(Number(ev.target.value))}
 />
 <button onClick={addFriend}>Add</button>
 </>
 );
}

Cette API wrapper me rappelle les ORM tels que Prisma et Drizzle.

À propos de nous :

Chez Thinkthroo, nous étudions les grands projets open source et fournissons des guides architecturaux. Nous avons développé des composants resubale, construits avec le vent arrière, que vous pouvez utiliser dans votre projet. Nous proposons des services de développement Next.js, React et Node.

Prenez rendez-vous 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://softwareengineering.stackexchange.com/questions/219953/how-is-localstorage-différent-from-indexeddb

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!