Maison > Article > interface Web > Un guide du débutant sur IndexedDB
Lors de la création d'applications Web modernes, en particulier d'applications Web progressives (PWA), il est crucial de disposer d'un moyen de stocker les données hors ligne. IndexedDB est une puissante base de données côté client qui permet aux applications Web de stocker et de récupérer des données, même lorsque l'utilisateur est hors ligne. Ce guide vous expliquera les bases d'IndexedDB, vous montrant comment créer, lire, mettre à jour et supprimer des données (opérations CRUD) dans votre application Web.
IndexedDB est une API de bas niveau pour le stockage côté client de grandes quantités de données structurées, notamment des fichiers et des blobs. Contrairement à localStorage, IndexedDB vous permet de stocker des types de données complexes, pas seulement des chaînes. Il utilise un modèle de base de données transactionnelle asynchrone, ce qui le rend puissant pour les applications devant gérer de grands ensembles de données ou une synchronisation de données hors ligne.
Plongeons dans les étapes principales pour travailler avec IndexedDB. Nous couvrirons :
Pour interagir avec IndexedDB, vous devez d'abord ouvrir une connexion à la base de données. Si la base de données n'existe pas, elle sera créée.
const request = indexedDB.open('MyCustomersDatabase', 1); request.onerror = (event) => { console.error('Database error:', event.target.errorCode); }; request.onsuccess = (event) => { const db = event.target.result; console.log('Database opened successfully', db); }; request.onupgradeneeded = (event) => { const db = event.target.result; if (!db.objectStoreNames.contains('customers')) { const objectStore = db.createObjectStore('customers', { keyPath: 'id' }); objectStore.createIndex('name', 'name', { unique: false }); objectStore.createIndex('email', 'email', { unique: true }); console.log('Object store created.'); } };
Voici ce qui se passe :
Maintenant que notre base de données et notre magasin d'objets sont configurés, ajoutons-y quelques données.
const addCustomer = (db, customer) => { const transaction = db.transaction(['customers'], 'readwrite'); const objectStore = transaction.objectStore('customers'); const request = objectStore.add(customer); request.onsuccess = () => { console.log('Customer added:', customer); }; request.onerror = (event) => { console.error('Error adding customer:', event.target.errorCode); }; } const customer = { id: 1, name: 'John Doe', email: 'john@example.com' }; request.onsuccess = (event) => { const db = event.target.result; addCustomer(db, customer); };
Voici ce qui se passe :
La lecture des données d'IndexedDB est également simple. Récupérons le client que nous venons d'ajouter en utilisant la méthode get().
const getCustomer = (db, id) => { const transaction = db.transaction(['customers'], 'readonly'); const objectStore = transaction.objectStore('customers'); const request = objectStore.get(id); request.onsuccess = (event) => { const customer = event.target.result; if (customer) { console.log('Customer found:', customer); } else { console.log('Customer not found.'); } }; request.onerror = (event) => { console.error('Error fetching customer:', event.target.errorCode); }; } request.onsuccess = (event) => { const db = event.target.result; getCustomer(db, 1); // Fetch customer with ID 1 };
Pour mettre à jour un enregistrement existant, nous pouvons utiliser la méthode put(), qui fonctionne de manière similaire à add() mais remplace l'enregistrement si la clé existe déjà.
const updateCustomer = (db, customer) => { const transaction = db.transaction(['customers'], 'readwrite'); const objectStore = transaction.objectStore('customers'); const request = objectStore.put(customer); request.onsuccess = () => { console.log('Customer updated:', customer); }; request.onerror = (event) => { console.error('Error updating customer:', event.target.errorCode); }; } const updatedCustomer = { id: 1, name: 'Jane Doe', email: 'jane@example.com' }; request.onsuccess = (event) => { const db = event.target.result; updateCustomer(db, updatedCustomer); };
Enfin, pour supprimer un enregistrement, utilisez la méthode delete().
const deleteCustomer = (db, id) => { const transaction = db.transaction(['customers'], 'readwrite'); const objectStore = transaction.objectStore('customers'); const request = objectStore.delete(id); request.onsuccess = () => { console.log('Customer deleted.'); }; request.onerror = (event) => { console.error('Error deleting customer:', event.target.errorCode); }; } request.onsuccess = (event) => { const db = event.target.result; deleteCustomer(db, 1); // Delete customer with ID 1 };
IndexedDB est une solution robuste pour gérer le stockage de données côté client, en particulier dans les applications Web hors ligne. En suivant ce guide, vous avez appris à :
Avec IndexedDB, vous pouvez créer des applications Web plus résilientes qui stockent les données localement et fonctionnent même sans connexion Internet.
MDN Web Docs - API IndexedDB
Un guide complet sur le fonctionnement d'IndexedDB, ses méthodes API et ses cas d'utilisation.
Guide MDN IndexedDB
Développeurs Google - IndexedDB
Un article détaillé couvrant les meilleures pratiques et l'utilisation d'IndexedDB pour créer des applications Web compatibles hors ligne.
Développeurs Google - IndexedDB
API de base de données indexée W3C
La spécification officielle du W3C décrivant la mise en œuvre technique et la structure d'IndexedDB.
Spécification W3C IndexedDB
Ces ressources vous fourniront une profondeur et un contexte supplémentaires si vous souhaitez en savoir plus sur IndexedDB au-delà de ce didacticiel !
Bon codage !
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!