JavaScript Academy · Leçon

Transactions et CRUD

Ajoutez, lisez, mettez à jour et supprimez des enregistrements.

Transactions et CRUD est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage JavaScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours JavaScript Academy comprend 4 leçons au total.

Tout est une transaction

Dans IndexedDB, toutes les lectures et écritures s’effectuent dans une transaction. Une transaction regroupe les opérations afin qu’elles réussissent toutes ou soient toutes annulées, ce qui préserve la cohérence des données.

Démarrer une transaction

Créez-en une avec db.transaction(storeNames, mode). Le mode est 'readonly' (par défaut) ou 'readwrite' pour les modifications.

const tx = db.transaction('notes', 'readwrite');
const store = tx.objectStore('notes');

Obtenir le magasin d’objets

Depuis la transaction, obtenez le magasin d’objets sur lequel vous souhaitez travailler via tx.objectStore(name). Toutes les méthodes CRUD se trouvent sur ce magasin.

const tx = db.transaction('notes', 'readwrite');
const store = tx.objectStore('notes');
// store.add / get / put / delete

Ajouter des enregistrements

store.add(value) insère un nouvel enregistrement. L’opération échoue si un enregistrement possédant la même clé existe déjà, ce qui protège contre les écrasements accidentels.

const store = tx.objectStore('notes');
const req = store.add({ id: 1, text: 'Buy milk' });
req.onsuccess = () => console.log('added with key', req.result);

Lire un enregistrement

store.get(key) récupère un enregistrement à partir de sa clé. Le résultat arrive dans le gestionnaire onsuccess de la requête, sous la forme de request.result (qui vaut undefined si l’enregistrement est introuvable).

const req = store.get(1);
req.onsuccess = () => {
  console.log('record:', req.result);
};

Mettre à jour avec put

store.put(value) insère ou remplace un enregistrement. Contrairement à add, cette opération écrase l’enregistrement existant ayant la même clé, ce qui la rend idéale pour les mises à jour.

store.put({ id: 1, text: 'Buy milk and eggs' });
// Replaces the existing record with id 1.

Supprimer un enregistrement

store.delete(key) supprime l’enregistrement possédant la clé indiquée. L’opération réussit même si aucun enregistrement correspondant n’existe.

const req = store.delete(1);
req.onsuccess = () => console.log('deleted');

Vider un magasin

store.clear() supprime en une seule fois tous les enregistrements du magasin d’objets. Utilisez-le pour réinitialiser les données mises en cache.

store.clear();
// All records in 'notes' are removed.

Achèvement de la transaction

La transaction elle-même déclenche oncomplete lorsque toutes ses opérations ont été validées, et onerror ou onabort en cas d’échec. Utilisez oncomplete pour savoir que les écritures sont persistantes.

tx.oncomplete = () => console.log('all changes saved');
tx.onerror = () => console.log('transaction failed');

Validation automatique

Les transactions sont validées automatiquement lorsque le contrôle revient à la boucle d’événements et qu’aucune requête n’est en attente. Vous ne pouvez pas garder une transaction ouverte pendant un await portant sur un travail asynchrone sans rapport ; effectuez toutes les opérations sur le magasin ensemble.

// Queue operations synchronously within the same tx:
store.add({ id: 2, text: 'A' });
store.add({ id: 3, text: 'B' });
// Both commit together when tx completes.

Résumé de CRUD

Les quatre opérations principales correspondent clairement aux actions suivantes :

Créer : add
Lire : get
Mettre à jour : put
Supprimer : delete

Tout cela s’effectue dans une transaction qui garantit la cohérence.

Vérification rapide

Testez votre compréhension des transactions et de CRUD.

Récapitulatif

Vous avez appris à utiliser les transactions et CRUD :

Commencez par db.transaction(store, mode).
Récupérez le magasin avec tx.objectStore(name).
add insère, get lit, put insère ou met à jour, et delete supprime.
Les résultats sont transmis dans le gestionnaire onsuccess de chaque requête.
tx.oncomplete confirme que les modifications sont enregistrées.

Ensuite, vous découvrirez les index et les requêtes.

Questions Fréquemment Posées

La leçon « Transactions et CRUD » est-elle gratuite ?

Oui — le texte complet de « Transactions et CRUD » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours JavaScript Academy, passe à CoddyKit PRO. Le cours JavaScript Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Transactions et CRUD » ?

Ajoutez, lisez, mettez à jour et supprimez des enregistrements. Tu pratiques JavaScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer JavaScript Academy ?

Aucune expérience préalable n'est requise. JavaScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « Transactions et CRUD » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon JavaScript Academy ?

Oui. Chaque leçon JavaScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à JavaScript Academy