Comment utiliser IndexedDB comme base de données

IndexedDB est une base de données NoSQL côté client qui vous permet de stocker et de récupérer des données structurées dans le navigateur Web d'un utilisateur.

IndexedDB offre plusieurs avantages, tels qu'une plus grande mémoire et un stockage et une récupération des données hors ligne par rapport à d'autres options de stockage, telles que localStorage. Ici, vous apprendrez à utiliser IndexedDB comme base de données.

Configuration de votre base de données

Pour créer la base de données, vous devez créer une requête ouverte à l'aide de IndexedDB ouvrir méthode. Le ouvrir méthode renvoie un IDBOpenDBRequest objet. Cet objet permet d'accéder à la succès, erreur, et mise à niveau nécessaireévénements émis de l'opération ouverte.

Le ouvrir prend deux arguments: un nom et un numéro de version facultatif. L'argument name représente le nom de votre base de données. Le numéro de version spécifie la version de la base de données avec laquelle votre application s'attend à fonctionner. La valeur par défaut est zéro.

Voici comment créer une demande ouverte :

constante openRequest = indexedDB.open("usersdb", 1);

Après avoir créé la demande ouverte, vous devez écouter et gérer les événements sur l'objet renvoyé.

Le succès se produit lorsque vous créez la base de données avec succès. Une fois émis, vous accédez à votre objet de base de données via événement.cible.résultat:

openRequest.onsuccess = fonction (événement) {
constante db = événement.cible.résultat ;
console.enregistrer("Base de données créée", db);
};

L'exemple ci-dessus gère un événement de réussite en enregistrant l'objet de base de données.

Le erreur se produit si IndexedDB rencontre un problème lors de la création de la base de données. Vous pouvez le gérer en enregistrant l'erreur sur la console ou en utilisant d'autres méthodes de gestion des erreurs:

openRequest.onerror = fonction (événement) {
// ...
};

Le mise à niveau nécessaire se produit lorsque vous créez la base de données pour la première fois ou lorsque vous mettez à jour sa version. Il ne se déclenche qu'une seule fois, ce qui en fait l'endroit idéal pour créer une boutique d'objets.

Création d'un magasin d'objets

Un magasin d'objets est similaire à une table dans les bases de données relationnelles côté serveur. Vous pouvez utiliser un magasin d'objets pour stocker des paires clé-valeur.

Vous devez créer des magasins d'objets en réponse à la mise à niveau nécessaire événement. Cet événement se déclenche lorsque vous créez une nouvelle version de la base de données ou mettez à niveau une version existante. Cela garantit que la base de données est configurée correctement et à jour avant que vous n'ajoutiez des données.

Vous pouvez créer un magasin d'objets à l'aide de la createObjectStore méthode, à laquelle vous pouvez accéder sur une référence de votre base de données. Cette méthode prend le nom du magasin d'objets et un objet de configuration comme arguments.

Dans l'objet de configuration, vous devez définir une clé primaire. Vous pouvez définir une clé primaire en définissant un chemin de clé, qui est une propriété qui existe toujours et contient une valeur unique. Alternativement, vous pouvez utiliser un générateur de clé en définissant le keyPath propriété à "identifiant" et le incrémentation automatique propriété à vrai dans votre objet de configuration.

Par exemple:

openRequest.onupgradeneeded = fonction (événement) {
constante db = événement.cible.résultat ;
// Créer un magasin d'objets
constante userObjectStore = db.createObjectStore("userStore", {
 keyPath: "identifiant",
 incrémentation automatique: vrai,
 });
}

Cet exemple crée un magasin d'objets nommé "userStore" dans votre base de données et définit sa clé primaire sur un identifiant à incrémentation automatique.

Définition des index

Dans IndexedDB, un index est un moyen d'organiser et de récupérer des données plus efficacement. Cela vous permet de rechercher dans le magasin d'objets et de le trier en fonction des propriétés indexées.

Pour définir un index sur un magasin d'objets, utilisez la créerIndex() méthode d'un objet de magasin d'objets. Cette méthode prend un nom d'index, un nom de propriété et un objet de configuration comme arguments :

userObjectStore.createIndex("nom", "nom", { unique: FAUX });
userObjectStore.createIndex("e-mail", "e-mail", { unique: vrai });

Ce bloc de code ci-dessus définit deux index, "nom" et "email" sur le userObjectStoreuserObjectStore. L'index "nom" n'est pas unique, ce qui signifie que plusieurs objets peuvent avoir la même valeur de nom, tandis que l'index "email" est unique, garantissant que deux objets ne peuvent pas avoir la même valeur d'email.

Voici un exemple complet de la façon dont vous pouvez gérer un mise à niveau nécessaire événement:

openRequest.onupgradeneeded = fonction (événement) {
constante db = événement.cible.résultat ;
// Créer un magasin d'objets
constante userObjectStore = db.createObjectStore("userStore", {
 keyPath: "identifiant",
 incrémentation automatique: vrai,
 }); 
// Créer des index
 userObjectStore.createIndex("nom", "nom", { unique: FAUX });
 userObjectStore.createIndex("e-mail", "e-mail", { unique: vrai });
};

Ajouter des données à IndexedDB

Une transaction dans IndexedDB est un moyen de regrouper plusieurs opérations de lecture et d'écriture en une seule opération. Pour garantir la cohérence et l'intégrité des données, si l'une des opérations d'une transaction échoue, IndexedDB annule toutes les opérations.

Pour ajouter des données à une base de données IndexedDB, vous devez créer une transaction sur le magasin d'objets auquel vous souhaitez ajouter les données, puis utiliser le ajouter() méthode sur la transaction pour ajouter les données.

Vous pouvez créer une transaction en appelant le transaction méthode sur votre objet de base de données. Cette méthode prend deux arguments: Le(s) nom(s) de votre datastore et le mode de la transaction, qui peut être lecture seulement (par défaut) ou lire écrire.

Ensuite, appelez le objectStore() méthode sur la transaction et transmettez le nom du magasin d'objets auquel vous souhaitez ajouter des données. Cette méthode renvoie une référence au magasin d'objets.

Enfin, appelez le ajouter() méthode sur le magasin d'objets et transmettez les données que vous souhaitez ajouter :

constante addUserData = (userData, db) => {
// Ouvrir une transaction
constante transaction = db.transaction("userStore", "lire écrire");
// Ajouter des données au magasin d'objets
constante userObjectStore = transaction.objectStore("userStore");
// Faire une requête pour ajouter userData
constante demande = userObjectStore.add (userData);
// Gérer un événement de réussite
 request.onsuccess = fonction (événement) {
//...
 };
// Gérer une erreur
 request.onerror = fonction (événement) {
//...
 };
};

Cette fonction crée une transaction avec le magasin d'objets "userStore" et définit le mode sur "readwrite". Ensuite, il obtient le magasin d'objets et ajoute le données d'utilisateur à l'aide de la ajouter méthode.

Récupération de données à partir d'IndexedDB

Pour récupérer des données à partir d'une base de données IndexedDB, vous devez créer une transaction sur le magasin d'objets à partir duquel vous souhaitez récupérer les données, puis utiliser le obtenir() ou Avoir tout() méthode sur la transaction pour récupérer les données en fonction de la quantité de données que vous souhaitez récupérer.

Le obtenir() prend une valeur pour la clé primaire de l'objet que vous souhaitez récupérer et renvoie l'objet avec la clé correspondante de votre magasin d'objets.

Le Avoir tout() La méthode renvoie toutes les données d'un magasin d'objets. Il prend également une contrainte facultative comme argument et renvoie toutes les données correspondantes du magasin.

constante getUserData = (identifiant, base de données) => {
constante transaction = db.transaction("userStore", "lecture seulement");
constante userObjectStore = transaction.objectStore("userStore");
// Faire une requête pour obtenir les données
constante demande = userObjectStore.get (id);
 request.onsuccess = fonction (événement) {
console.log (demande.résultat);
 };
 request.onerror = fonction (événement) {
// Gérer l'erreur
 };
};

Cette fonction crée une transaction avec le magasin d'objets "userStore" et définit le mode sur "readonly". Il récupère ensuite les données utilisateur avec l'identifiant correspondant dans le magasin d'objets.

Mise à jour des données avec IndexedDB

Pour mettre à jour les données dans IndexedDB, vous devez créer une transaction avec le mode "readwrite". Poursuivez en récupérant l'objet que vous souhaitez mettre à jour à l'aide de la obtenir() méthode. Modifiez ensuite l'objet et appelez le mettre() méthode sur le magasin d'objets pour enregistrer l'objet mis à jour dans la base de données.

constante mettre à jour les données de l'utilisateur = (id, userData, base de données) => {
constante transaction = db.transaction("userStore", "lire écrire");
constante userObjectStore = transaction.objectStore("userStore");
// Faire une requête pour obtenir les données
constante getRequest = userObjectStore.get (id);
// Gérer un événement de réussite
 getRequest.onsuccess = fonction (événement) {
// Récupère les anciennes données utilisateur
constante utilisateur = événement.cible.résultat ;
// Mettre à jour les données utilisateur
 user.name = userData.name;
 user.email = userData.email ;
// Faire une requête pour mettre à jour les données
constante putRequest = userObjectStore.put (utilisateur);
 putRequest.onsuccess = fonction (événement) {
// Gérer le succès
 };
 putRequest.onerror = fonction (événement) {
// Gérer l'erreur
 };
 };
 getRequest.onerror = fonction (événement) {
// Gérer l'erreur
 };
};

Cette fonction crée une transaction pour obtenir et mettre à jour les données de votre base de données.

Suppression de données d'IndexedDB

Pour supprimer des données d'IndexedDB, vous devez créer une transaction avec le mode "readwrite". Appelez ensuite le supprimer() méthode sur le magasin d'objets pour supprimer l'objet de la base de données :

constante deleteUserData = (identifiant, base de données) => {
constante transaction = db.transaction("userStore", "lire écrire");
constante userObjectStore = transaction.objectStore("userStore");
// Faire une demande de suppression des données
constante demande = userObjectStore.delete (id);
 request.onsuccess = fonction (événement) {
// Gérer le succès
 };
 request.onerror = fonction (événement) {
// Gérer l'erreur
 };
};

Cette fonction crée une transaction qui supprime les données avec l'identifiant correspondant de votre magasin d'objets.

Devriez-vous utiliser IndexedDB ou localStorage?

Le choix entre IndexedDB et d'autres bases de données côté client, telles que localStorage, dépend des exigences de votre application. Utilisez localStorage pour un stockage simple de petites quantités de données. Choisissez IndexedDB pour les grands ensembles de données structurés nécessitant une interrogation et un filtrage.