JavaScript Academy · Leçon

Ouvrir une base de données

Créez des bases de données et des magasins d’objets.

Ouvrir une base de données est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 1 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.

Qu’est-ce qu’IndexedDB ?

IndexedDB est une base de données transactionnelle de grande capacité intégrée au navigateur. Contrairement à localStorage (petite, limitée aux chaînes de caractères et synchrone), elle stocke des objets structurés, prend en charge les index et fonctionne de manière asynchrone.

Ouvrir une base de données

Vous ouvrez (ou créez) une base de données avec indexedDB.open(name, version). Cette opération renvoie un objet de requête dont les événements indiquent la réussite ou l’échec.

const request = indexedDB.open('notes-db', 1);

Les événements de la requête

Une requête d’ouverture déclenche des événements que vous devez gérer :

onsuccess — la base de données est prête
onerror — l’ouverture a échoué
onupgradeneeded — le schéma doit être créé ou mis à niveau

request.onsuccess = (e) => {
  const db = e.target.result;
  console.log('database opened');
};
request.onerror = (e) => {
  console.log('open failed:', e.target.error);
};

onupgradeneeded

onupgradeneeded s’exécute lorsque la base de données est créée pour la première fois ou lorsque son numéro de version augmente. C’est le seul endroit où vous pouvez modifier le schéma (créer ou supprimer des magasins d’objets et des index).

request.onupgradeneeded = (e) => {
  const db = e.target.result;
  // create object stores here
};

Magasins d’objets

Un magasin d’objets ressemble à une table : c’est un conteneur d’enregistrements. Créez-en un avec db.createObjectStore(name, options) dans onupgradeneeded.

request.onupgradeneeded = (e) => {
  const db = e.target.result;
  db.createObjectStore('notes', { keyPath: 'id' });
};

Le keyPath

Le keyPath indique à IndexedDB quelle propriété de chaque objet constitue sa clé primaire. Les objets stockés doivent posséder cette propriété et les clés doivent être uniques.

db.createObjectStore('users', { keyPath: 'email' });
// Each stored user object must have a unique 'email'.

Clés auto-incrémentées

Si vos objets n’ont pas de clé naturelle, laissez IndexedDB en générer une avec autoIncrement: true. Chaque nouvel enregistrement reçoit l’entier suivant.

db.createObjectStore('logs', {
  keyPath: 'id',
  autoIncrement: true
});
// id is assigned automatically on add().

Vérifier les magasins existants

Comme onupgradeneeded s’exécute à chaque changement de version, protégez la création avec db.objectStoreNames.contains afin d’éviter les erreurs lors des nouvelles exécutions.

request.onupgradeneeded = (e) => {
  const db = e.target.result;
  if (!db.objectStoreNames.contains('notes')) {
    db.createObjectStore('notes', { keyPath: 'id' });
  }
};

Conserver la référence db

Enregistrez l’objet de base de données reçu dans onsuccess afin que les opérations ultérieures puissent l’utiliser. Toutes les lectures et écritures passent par cette instance db.

let db;
request.onsuccess = (e) => {
  db = e.target.result; // reuse for transactions
};

Gérer les ouvertures bloquées

Si un autre onglet a ouvert une version plus ancienne, une mise à niveau peut être blocked. Écoutez onblocked et demandez à l’utilisateur de fermer les autres onglets.

request.onblocked = () => {
  console.log('Close other tabs to upgrade the database.');
};

Le déroulement de l’ouverture

Pour ouvrir IndexedDB, appelez open avec un nom et une version, créez votre schéma dans onupgradeneeded, puis récupérez la base db dans onsuccess. Vous pouvez ensuite exécuter des transactions pour lire et écrire des données.

Vérification rapide

Testez votre compréhension de l’ouverture d’une base de données.

Récapitulatif

Vous avez appris à ouvrir une base de données IndexedDB :

indexedDB.open(name, version) renvoie une requête.
Créez les magasins d’objets uniquement dans onupgradeneeded.
keyPath définit la clé primaire ; autoIncrement génère les clés.
Conservez la base db reçue dans onsuccess pour une utilisation ultérieure.
Gérez onerror et onblocked.

Ensuite, les transactions et les opérations CRUD.

Questions Fréquemment Posées

La leçon « Ouvrir une base de données » est-elle gratuite ?

Oui — le texte complet de « Ouvrir une base de données » 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 « Ouvrir une base de données » ?

Créez des bases de données et des magasins d’objets. 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 1 sur 4.

Combien de temps prend la leçon « Ouvrir une base de données » ?

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