IndexedDB est une base de données NoSQL côté client qui vous permet de stocker et d’extraire des données structurées dans le navigateur web de l’utilisateur.
IndexedDB offre plusieurs avantages, tels qu’une mémoire plus importante et le stockage et la récupération de données hors ligne par rapport à d’autres options de stockage, telles que localStorage. Vous apprendrez ici à 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 la fonction ouverte méthode. La méthode ouverte renvoie un IDBOpenDBRequest objet. Cet objet permet d’accéder à la base de données succès, erreuret mise à niveau nécessaire émis par l’opération d’ouverture.
Le ouvert 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 indique la version de la base de données avec laquelle votre application est censée travailler. La valeur par défaut est zéro.
Voici comment créer une demande ouverte :
const openRequest = indexedDB.open("usersdb", 1);
Après avoir créé la demande ouverte, vous devez écouter et gérer les événements sur l’objet retourné.
Le succès se produit lorsque vous créez la base de données avec succès. Une fois l’événement émis, vous pouvez accéder à l’objet base de données par l’intermédiaire de l’événement event.target.result:
openRequest.onsuccess = function (event) {
const db = event.target.result;
console.log("Database created", db);
};
L’exemple ci-dessus traite un événement de réussite en enregistrant l’objet de la base de données.
La fonction 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 consignant l’erreur dans la console ou en utilisant d’autres méthodes de gestion des erreurs :
openRequest.onerror = function (event) {
// ...
};
L’événement 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 un magasin 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 directive mise à jour nécessaire (événement de mise à niveau). Cet événement se déclenche lorsque vous créez une nouvelle version de la base de données ou que vous mettez à niveau une version existante. Cela permet de s’assurer que la base de données est correctement configurée et à jour avant d’ajouter des données.
Vous pouvez créer un magasin d’objets à l’aide de la fonction createObjectStore à laquelle vous pouvez accéder sur une référence de votre base de données. Cette méthode prend comme arguments le nom du magasin d’objets et un objet de configuration.
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 qui contient une valeur unique. Vous pouvez également utiliser un générateur de clé en définissant la propriété keyPath propriété à « id » et le autoIncrément propriété à vrai dans votre objet de configuration.
Par exemple :
openRequest.onupgradeneeded = function (event) {
const db = event.target.result;
// Create an object store
const userObjectStore = db.createObjectStore("userStore", {
keyPath: "id",
autoIncrement: true,
});
}
Cet exemple crée un magasin d’objets nommé « userStore » dans votre base de données et définit sa clé primaire comme étant un identifiant auto-incrémentiel.
Définition des index
Dans IndexedDB, un index est un moyen d’organiser et d’extraire des données plus efficacement. Il permet d’effectuer des recherches dans le magasin d’objets et de les trier en fonction des propriétés indexées.
Pour définir un index sur un magasin d’objets, utilisez la méthode createIndex() d’un objet de stockage d’objets. Cette méthode prend comme arguments un nom d’index, un nom de propriété et un objet de configuration :
userObjectStore.createIndex("name", "name", { unique: false });
userObjectStore.createIndex("email", "email", { unique: true });
Le bloc de code ci-dessus définit deux index, « name » et « email », sur le fichier userObjectStore. L’index « name » 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, ce qui garantit 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 objet de type mise à niveau nécessaire événement :
openRequest.onupgradeneeded = function (event) {
const db = event.target.result;
// Create an object store
const userObjectStore = db.createObjectStore("userStore", {
keyPath: "id",
autoIncrement: true,
});
// Create indexes
userObjectStore.createIndex("name", "name", { unique: false });
userObjectStore.createIndex("email", "email", { unique: true });
};
Ajout de 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 la commande add() sur la transaction pour ajouter les données.
Vous pouvez créer une transaction en appelant la méthode transaction sur votre objet de base de données. Cette méthode prend deux arguments : Le(s) nom(s) de votre magasin de données et le mode de la transaction, qui peut être readonly (par défaut) ou lecture-écriture.
Ensuite, appelez le objectStore() 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 la méthode add() sur le magasin d’objets et transmettez les données que vous souhaitez ajouter :
const addUserData = (userData, db) => {
// Open a transaction
const transaction = db.transaction("userStore", "readwrite");
// Add data to the object store
const userObjectStore = transaction.objectStore("userStore");
// Make a request to add userData
const request = userObjectStore.add(userData);
// Handle a success event
request.onsuccess = function (event) {
//...
};
// Handle an error
request.onerror = function (event) {
//...
};
};
Cette fonction crée une transaction avec le magasin d’objets « userStore » et définit le mode sur « readwrite ». Ensuite, elle récupère le magasin d’objets et ajoute le fichier userData à l’aide de la méthode ajouter méthode.
Récupération des données d’une base de données indexée
Pour extraire des données d’une base de données IndexedDB, vous devez créer une transaction sur le magasin d’objets dont vous voulez extraire les données, puis utiliser la commande get() ou getAll() 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 get() prend une valeur pour la clé primaire de l’objet que vous voulez récupérer et renvoie l’objet avec la clé correspondante de votre magasin d’objets.
La méthode getAll() La méthode getAll() renvoie toutes les données d’un magasin d’objets. Elle prend également en argument une contrainte facultative et renvoie toutes les données correspondantes du magasin.
const getUserData = (id, db) => {
const transaction = db.transaction("userStore", "readonly");
const userObjectStore = transaction.objectStore("userStore");
// Make a request to get the data
const request = userObjectStore.get(id);
request.onsuccess = function (event) {
console.log(request.result);
};
request.onerror = function (event) {
// Handle error
};
};
Cette fonction crée une transaction avec le magasin d’objets « userStore » et définit le mode sur « readonly ». Elle récupère ensuite les données de l’utilisateur avec l’identifiant correspondant dans le magasin d’objets.
Mise à jour des données avec IndexedDB
Pour mettre à jour des données dans IndexedDB, vous devez créer une transaction avec le mode « readwrite ». Commencez par récupérer l’objet que vous souhaitez mettre à jour à l’aide de la commande get() . Modifiez ensuite l’objet et appelez la méthode put() sur le magasin d’objets pour enregistrer l’objet mis à jour dans la base de données.
const updateUserData = (id, userData, db) => {
const transaction = db.transaction("userStore", "readwrite");
const userObjectStore = transaction.objectStore("userStore");
// Make a request to get the data
const getRequest = userObjectStore.get(id);
// Handle a success event
getRequest.onsuccess = function (event) {
// Get the old user data
const user = event.target.result;
// Update the user data
user.name = userData.name;
user.email = userData.email;
// Make a request to update the data
const putRequest = userObjectStore.put(user);
putRequest.onsuccess = function (event) {
// Handle success
};
putRequest.onerror = function (event) {
// Handle error
};
};
getRequest.onerror = function (event) {
// Handle error
};
};
Cette fonction crée une transaction pour obtenir et mettre à jour les données de votre base de données.
Suppression des données d’une base de données indexée
Pour supprimer des données d’IndexedDB, vous devez créer une transaction avec le mode « readwrite ». Ensuite, appelez la transaction delete() sur le magasin d’objets pour supprimer l’objet de la base de données :
const deleteUserData = (id, db) => {
const transaction = db.transaction("userStore", "readwrite");
const userObjectStore = transaction.objectStore("userStore");
// Make a request to delete the data
const request = userObjectStore.delete(id);
request.onsuccess = function (event) {
// Handle success
};
request.onerror = function (event) {
// Handle error
};
};
Cette fonction crée une transaction qui supprime les données avec l’identifiant correspondant de votre magasin d’objets.
Faut-il utiliser IndexedDB ou localStorage ?
Le choix entre IndexedDB et d’autres bases de données côté client, telles que localStorage, dépend des besoins de votre application. Utilisez localStorage pour le stockage simple de petites quantités de données. Choisissez IndexedDB pour les grands ensembles de données structurées nécessitant une interrogation et un filtrage.
