Base de données IndexedDB Web HTML5

IndexedDB est une base de données NoSQL intégrée au navigateur, utilisée pour stocker de manière persistante de grandes quantités de données structurées côté client.

IndexedDB permet de stocker des objets de données complexes (tels que des objets, des tableaux, des fichiers, etc.) via des paires clé-valeur, et prend en charge les transactions, les index, le contrôle de version et les opérations de requête complexes.

IndexedDB est asynchrone et ne bloque pas le thread principal, ce qui le rend adapté aux applications hors ligne, à la mise en cache et à d'autres scénarios.

IndexedDB est particulièrement adapté aux applications qui doivent stocker de grandes quantités de données structurées, en particulier les applications Web qui souhaitent prendre en charge le mode hors ligne ou traiter des requêtes complexes.

Caractéristiques d'IndexedDB

  • Stockage en paires clé-valeur: les données sont stockées dans des magasins d'objets sous forme de paires clé-valeur.
  • Prise en charge des transactions: toutes les opérations sur les données doivent être effectuées dans le cadre d'une transaction afin de garantir la cohérence et l'intégrité des données.
  • API asynchrone: toutes les opérations sont asynchrones et ne bloquent pas le thread de l'interface utilisateur, en utilisant des rappels d'événements ou des Promises pour traiter les résultats.
  • Contrôle de version: la base de données utilise des numéros de version pour gérer le schéma de la base de données (comme la création ou la modification des magasins d'objets).
  • Index: prend en charge la création d'index sur les champs des données afin d'accélérer les requêtes.
  • Prise en charge hors ligne: les données peuvent être stockées de manière persistante et consultées même lorsque le réseau est déconnecté, ce qui le rend très adapté à la création d'applications Web hors ligne.

Syntaxe d'IndexedDB

La syntaxe d'IndexedDB est décrite comme suit :

// Ouvrir ou créer une base de données
var request = indexedDB.open('databaseName', version);

// Gérer la mise à niveau de la base de données
request.onupgradeneeded = function(event) {
  var db = event.target.result;

  // Créer un magasin d'objets (table) et définir la clé primaire
  var objectStore = db.createObjectStore('storeName', { keyPath: 'id' });

  // Créer un index
  objectStore.createIndex('fieldName', 'fieldName', { unique: false });
};

// Fonction de rappel lorsque la base de données s'ouvre avec succès
request.onsuccess = function(event) {
  var db = event.target.result;

  // Effectuer les opérations de transaction
  var transaction = db.transaction('storeName', 'readwrite');
  var objectStore = transaction.objectStore('storeName');

  // Insérer des données
  objectStore.add({ id: 1, name: 'John Doe', age: 30 });

  // Interroger les données
  var query = objectStore.get(1);
  query.onsuccess = function(event) {
    console.log(event.target.result);
  };
};

// Gestion des erreurs
request.onerror = function(event) {
  console.error('Erreur de base de données:', event.target.error);
};

Méthodes IndexedDB

1、indexedDB.open()：Permet d'ouvrir une base de données existante ou d'en créer une nouvelle.

var request = indexedDB.open('databaseName', version);

2、db.createObjectStore()：Créer un magasin d'objets (similaire à une table) dans l'événement onupgradeneeded.

var objectStore = db.createObjectStore('storeName', { keyPath: 'id' });

3、objectStore.add()：Ajouter des données à un magasin d'objets dans une transaction.

objectStore.add({ id: 1, name: 'John Doe' });

3、objectStore.get()：Obtenir des données d'un magasin d'objets en fonction d'une valeur de clé.

var request = objectStore.get(1);

4、objectStore.put()：Mettre à jour un enregistrement existant, ou l'insérer si l'enregistrement n'existe pas.

objectStore.put({ id: 1, name: 'John Updated' });

5、objectStore.delete()：Supprimer un enregistrement en fonction d'une valeur de clé.

objectStore.delete(1);

6、db.transaction()：Créer une transaction, en spécifiant le nom du magasin d'objets et le mode de transaction (readonly ou readwrite).

var transaction = db.transaction(['storeName'], 'readwrite');

7、objectStore.createIndex()：Créer un index pour les champs d'un magasin d'objets afin d'accélérer les requêtes.

objectStore.createIndex('nameIndex', 'name', { unique: false });

Exemples d'applications IndexedDB

Voici un exemple complet d'IndexedDB pour créer une base de données, insérer des données, interroger des données et mettre à jour des données.

Exemple

// Ouvrir ou créer une base de données
var request = indexedDB.open('myDatabase', 1);

// Déclenché lorsque la version de la base de données change ou lors de la première création
request.onupgradeneeded = function(event) {
  var db = event.target.result;

  // Créer un magasin d'objets (table) et définir la clé primaire sur 'id'
  var objectStore = db.createObjectStore('customers', { keyPath: 'id' });

  // Créer un index pour le champ 'name'
  objectStore.createIndex('name', 'name', { unique: false });
};

// Base de données ouverte avec succès
request.onsuccess = function(event) {
  var db = event.target.result;

  // Insérer des données
  var transaction = db.transaction(['customers'], 'readwrite');
  var objectStore = transaction.objectStore('customers');
  objectStore.add({ id: 1, name: 'John Doe', email: '[email protected]' });
  objectStore.add({ id: 2, name: 'Jane Doe', email: '[email protected]' });

  transaction.oncomplete = function() {
    console.log('Transaction terminée : données ajoutées.');
  };

  transaction.onerror = function(event) {
    console.error('Échec de la transaction :', event);
  };

  // Interroger les données
  var queryTransaction = db.transaction(['customers']);
  var queryObjectStore = queryTransaction.objectStore('customers');
  var query = queryObjectStore.get(1);

  query.onsuccess = function(event) {
    console.log('Client :', event.target.result);
  };

  // Mettre à jour les données
  var updateTransaction = db.transaction(['customers'], 'readwrite');
  var updateObjectStore = updateTransaction.objectStore('customers');
  var updatedCustomer = { id: 1, name: 'John Smith', email: '[email protected]' };

  updateObjectStore.put(updatedCustomer);

  updateTransaction.oncomplete = function() {
    console.log('Transaction completed: data updated.');
  };
};

// Gestion des erreurs
request.onerror = function(event) {
  console.error('Erreur de base de données:', event.target.error);
};

Cas d'utilisation d'IndexedDB

  • Stockage hors ligne : IndexedDB vous permet de stocker des données pour y accéder lorsqu'il n'y a pas de connexion réseau, ce qui est crucial pour les applications Web hors ligne.

  • Mise en cache : Il peut être utilisé pour stocker de grandes quantités de données mises en cache (telles que des fichiers, des images, des vidéos) afin d'améliorer la vitesse de chargement de l'application.

  • Traitement de données complexes : Adapté aux scénarios nécessitant le stockage et le traitement de grandes quantités de données structurées, en particulier celles nécessitant des fonctionnalités d'indexation et de requête.

  • Base de données locale : IndexedDB peut servir de base de données locale pour les applications front-end, en stockant les données utilisateur, les informations de configuration, l'état de l'application, etc.

Avantages d'IndexedDB

  • Grande capacité de stockage : Prend en charge un stockage de données plus important (souvent des centaines de MB ou plus), bien plus important que la limite de 5MB de localStorage.

  • Opérations riches sur les données : Prend en charge des opérations complexes telles que les transactions, les index, les requêtes et le traitement par lots.

  • Prise en charge hors ligne : les données sont stockées sur l'appareil de l'utilisateur, accessibles hors ligne et peuvent être synchronisées avec le serveur.

Inconvénients d'IndexedDB

  • API complexe : Comparée à un stockage côté client plus simple comme localStorage, l'API IndexedDB est relativement complexe et nécessite davantage de code.

  • Traitement asynchrone : Les opérations s'exécutent de manière asynchrone ; les débutants peuvent ne pas être habitués à gérer les callbacks ou les Promises.

  • IndexedDB est particulièrement adapté aux applications qui doivent stocker de grandes quantités de données structurées, en particulier les applications Web qui souhaitent prendre en charge le mode hors ligne ou traiter des requêtes complexes.

Autres extensions