Guide du débutant sur IndexedDB

Découvrez les bases d’IndexedDB (créer une base de données, ajouter des données, récupérer et supprimer des données) ainsi que des sujets avancés tels que l’indexation, les transactions et la gestion des versions.

À l’ère des applications Web modernes, les développeurs Web doivent pouvoir stocker des données sur le navigateur d’un client. Cela améliore la vitesse, vous permet d’utiliser l’application lorsque vous n’êtes pas connecté à Internet et vous offre une expérience plus personnalisée. En faisant cela, nous passons d’une simple page Web à une application interactive où les données sont extraites du serveur et enregistrées et modifiées sur l’appareil de l’utilisateur.

IndexedDB, une API de bas niveau permettant de stocker de grandes quantités de données structurées côté client, est l’une des technologies qui rendent ce changement possible. IndexedDB est un moyen de stocker des quantités de données plus importantes de manière sécurisée et fiable dans le navigateur de l’utilisateur.

Dans ce guide du débutant, nous explorerons les bases d’IndexedDB, notamment comment créer une base de données, ajouter des données, récupérer des données et supprimer des données. Nous aborderons également des sujets avancés tels que l’indexation, les transactions et le versioning. À la fin de ce guide, vous aurez une solide compréhension de la façon d’utiliser IndexedDB pour créer de puissantes applications Web côté client pouvant fonctionner hors ligne.

Comprendre IndexedDB

IndexedDB est un mécanisme de stockage côté client pour les applications Web qui permet aux développeurs de stocker de grandes quantités de données localement. Il s’agit d’une base de données orientée objet basée sur JavaScript qui permet aux développeurs de stocker, récupérer et manipuler des données de manière structurée. IndexedDB est pris en charge par tous les navigateurs Web modernes, ce qui en fait un excellent choix pour créer des applications Web hors ligne.

IndexedDB est un mécanisme de stockage côté client qui permet aux développeurs de stocker des données dans un format structuré, similaire à une base de données. Contrairement aux cookies ou au stockage local, IndexedDB peut stocker de grandes quantités de données et peut être interrogé à l’aide d’index.

IndexedDB est un magasin clé-valeur, stockant les données sous forme d’objets avec des clés et des valeurs. Chaque objet dans IndexedDB possède une clé unique, qui peut être utilisée pour récupérer l’objet ultérieurement. Les clés peuvent être de n’importe quel type de données, notamment des chaînes, des nombres et des dates.

Pourquoi utiliser IndexedDB ?

IndexedDB est un outil puissant pour les développeurs Web, car il leur permet de stocker de grandes quantités de données côté client. Cela peut être utile pour les applications Web qui doivent fonctionner hors ligne ou qui doivent stocker des données trop sensibles pour être stockées sur un serveur distant.

L’une des meilleures choses à propos d’IndexedDB est qu’il fonctionne avec de nombreux navigateurs différents. Il fonctionne avec tous les grands navigateurs Web, comme Chrome, Firefox, Safari et Edge. Cela signifie que vous pouvez utiliser IndexedDB pour créer votre application Web et vous assurer qu’elle fonctionnera de la même manière dans tous les navigateurs, offrant ainsi aux utilisateurs une expérience cohérente.

Une autre bonne raison d’utiliser IndexedDB est qu’il peut être utilisé hors ligne. IndexedDB est différent des autres systèmes de stockage Web car il vous permet d’afficher et de modifier des données même lorsque l’utilisateur n’est pas en ligne. Cette fonctionnalité hors ligne est essentielle pour les applications qui doivent fonctionner sans connexion Internet, comme les applications mobiles ou les applications Web qui doivent partager des données avec un serveur.

IndexedDB permet également aux développeurs d’effectuer des requêtes complexes sur les données, à l’aide d’index. Cela peut être utile pour les applications qui doivent rechercher rapidement de grandes quantités de données.

Dans l’ensemble, IndexedDB est un outil puissant pour les développeurs Web qui ont besoin de stocker de grandes quantités de données côté client. En utilisant IndexedDB, les développeurs peuvent créer des applications Web rapides, réactives et fonctionnant hors ligne.

Premiers pas avec IndexedDB

Pour commencer à utiliser IndexedDB, nous devons d’abord le configurer. Dans cette section, nous verrons comment créer une base de données et la mettre à niveau.

let request = window.indexedDB.open("guide_to_indexeddb_database", 3);

Si la base de données n’existe pas, elle sera créée automatiquement. Sinon, le open() La méthode vérifiera la version de la base de données. Vous pouvez utiliser le IDBOpenDBRequest objet renvoyé par le open() méthode pour gérer les événements de réussite, d’erreur et de mise à niveau. Il est essentiel de noter que le open() La méthode est asynchrone, ce qui signifie qu’elle n’empêche pas l’exécution d’un autre code pendant qu’elle exécute sa fonction.

Une fois que nous avons ouvert une connexion à la base de données, nous pouvons créer des magasins d’objets. Un magasin d’objets est l’endroit où nous stockons nos données. Nous pouvons créer un magasin d’objets en utilisant le createObjectStore() méthode.

let store = db.createObjectStore('my_first_store', { keyPath: 'id' });

Dans cet exemple, nous avons créé un magasin d’objets appelé my_first_store avec un chemin clé de id. Le keyPath est la propriété qui identifie de manière unique chaque enregistrement dans la librairie.

Mise à niveau d’une base de données

La mise à niveau d’une base de données est nécessaire lorsque nous devons modifier sa structure. Par exemple, nous devrons peut-être ajouter ou supprimer des magasins d’objets ou des index.

Pour mettre à niveau une base de données, nous devons écouter le onupgradeneeded événement. Cet événement est déclenché lorsque la version de la base de données est inférieure à celle que nous avons fournie dans le open() méthode.

request.onupgradeneeded = function(event) {
  let db = event.target.result;

  // Upgrade the database here
};

À l’intérieur de onupgradeneeded événement, nous pouvons créer ou supprimer des magasins d’objets et des index en utilisant les mêmes méthodes que lors de la création d’une base de données.

let store = db.createObjectStore('my_first_store', { keyPath: 'id' });
let index = store.createIndex('nameIndex', 'name', { unique: false });

Dans cet exemple, nous avons créé un magasin d’objets appelé myObjectStore et un index appelé nameIndex sur le name propriété.

Base de données indexée asynchrone

Nous ne continuerons pas à utiliser JavaScript Vanilla pour travailler avec IndexedDB. En fait, nous utiliserons quelque chose de bien meilleur pour augmenter notre productivité et rendre notre code plus facile à lire et les performances de nos applications plus rapides.

IDBune bibliothèque créée par Jake Archibald, est une couche d’abstraction basée sur des promesses autour d’IndexedDB. Bien que l’API brute IndexedDB fournie par JavaScript soit puissante, elle est également souvent considérée comme compliquée et peu maniable en raison de son modèle asynchrone basé sur le rappel et de sa syntaxe détaillée.

Pour démarrer avec idb, il suffit de l’installer à l’aide de notre gestionnaire de packages :

npm install idb

Ou on peut l’utiliser directement sur le navigateur via jsdelivr :

<script type="module">
  import { openDB, deleteDB, wrap, unwrap } from 'https://cdn.jsdelivr.net/npm/idb@7/+esm';
    
  async function doDatabaseStuff() {
    const db = await openDB(…);
  }
</script>

idb nous permet de travailler beaucoup plus facilement avec IndexedDB. En utilisant idb, nous pouvons utiliser la nouvelle fonctionnalité async/await des navigateurs. Maintenant que nous avons configuré idb, créons notre première base de données et y mettons quelques données.

Nous allons importer idb et créer notre base de données :

import { openDB, deleteDB, wrap, unwrap } from "https://cdn.jsdelivr.net/npm/idb@7/+esm";
    
async function doDatabaseStuff() {
  
  const db = await openDB("guide_to_indexeddb_database", 1, {
    upgrade(db) {
      
      const store = db.createObjectStore("my_first_store", {
        
        keyPath: "id",
        
        autoIncrement: true
      });
    }
  });
}

Maintenant, nous allons créer notre transaction et référencer notre boutique. Après cela, nous ajouterons notre premier objet de données à notre base de données.

import { openDB, deleteDB, wrap, unwrap } from "https://cdn.jsdelivr.net/npm/idb@7/+esm";
    
async function doDatabaseStuff() {
  
  const db = await openDB("guide_to_indexeddb_database", 1, {
    upgrade(db) {
      
      const store = db.createObjectStore("my_first_store", {
        
        keyPath: "id",
       
        autoIncrement: true
      });
    }
  });
    
  const tx = db.transaction("my_first_store", "readwrite");
  const store = tx.store;
    
  
  const user = { firstName: "Leonardo", lastName: "Maldonado", age: 25 }; }

Nous allons ajouter notre utilisateur à notre base de données en utilisant une seule ligne, comme ceci :

import { openDB, deleteDB, wrap, unwrap } from "https://cdn.jsdelivr.net/npm/idb@7/+esm";
    
async function doDatabaseStuff() {
  
  const db = await openDB("guide_to_indexeddb_database", 1, {
    upgrade(db) {
      
      const store = db.createObjectStore("my_first_store", {
        
        keyPath: "id",
        
        autoIncrement: true
      });
    }
  });
  const tx = db.transaction("my_first_store", "readwrite");
  const store = tx.store;
  
  const user = { firstName: "Leonardo", lastName: "Maldonado", age: 25 };
  
  await Promise.all([tx.store.add(user), tx.done]);
}

Vérifions si cela a fonctionné avec succès. Ouvrez nos DevTools, accédez à Application, et sous IndexedDB devrait se trouver la base de données que nous venons de créer. Si vous cliquez sur le nom de la base de données, vous pouvez voir le magasin et l’utilisateur que nous avons ajouté.

Travailler avec IndexedDB offre un moyen flexible et puissant de stocker et de récupérer des données côté client. Que nous ayons besoin de créer, récupérer, mettre à jour ou supprimer des données, IndexedDB propose des méthodes et des fonctionnalités complètes pour gérer efficacement ces opérations.

Conclusion

Avec ce guide, vous disposez d’une base solide pour travailler avec IndexedDB. Qu’il s’agisse de stocker des données utilisateur, de mettre en cache des ressources ou de créer des applications Web complexes, IndexedDB peut être un outil précieux dans votre arsenal de développement. Bon codage !