HTML - IndexedDB : Votre Base de Données Personnelle dans le Navigateur

Bonjour, futurs développeurs web ! Aujourd'hui, nous allons plonger dans le monde passionnant de IndexedDB. En tant que votre enseignant bienveillant en informatique, je suis là pour vous guider dans ce voyage, même si vous n'avez jamais écrit une ligne de code auparavant. Alors, mettez vos casques virtuels, et c'est parti !

Qu'est-ce que IndexedDB ?

IndexedDB est comme une petite base de données qui vit directement dans votre navigateur web. Imaginez avoir un petit classeur à l'intérieur de votre ordinateur qui peut stocker et organiser toutes sortes d'informations pour vos applications web. Génial, non ?

Pourquoi utiliser IndexedDB ?

Vous vous demandez peut-être : "Pourquoi avons-nous besoin d'un autre moyen de stocker des données ?" Eh bien, laissez-moi vous raconter une petite histoire. Dans le passé, nous nous sommes appuyés sur les cookies et le stockage local pour conserver les données dans le navigateur. Mais c'était comme essayer de faire rentrer un éléphant dans une boîte d'allumettes - limité et pas très flexible.

Voici pourquoi IndexedDB est le super-héros du stockage dans le navigateur :

Fonctionnalité	Description
Capacité de Stockage	Peut stocker beaucoup plus de données que les cookies ou le stockage local
Types de Données	Supporte divers types de données, y compris les fichiers et les blobs
Indexation	Permet des recherches rapides dans vos données
Transactions	Assure l'intégrité des données avec des opérations basées sur des transactions
Asynchrone	Ne fige pas votre application pendant qu'elle manipule les données

Premiers Pas avec IndexedDB

Mettons les mains dans le cambouis et commençons avec un peu de code. Ne vous inquiétez pas si cela paraît intimidant au départ - nous allons le décomposer étape par étape.

let db;
const request = indexedDB.open("MyFirstDatabase", 1);

request.onerror = function(event) {
console.error("Erreur de base de données : " + event.target.error);
};

request.onsuccess = function(event) {
db = event.target.result;
console.log("Base de données ouverte avec succès");
};

request.onupgradeneeded = function(event) {
db = event.target.result;
const objectStore = db.createObjectStore("students", { keyPath: "id" });
console.log("Magasin d'objets créé");
};

Whaou ! C'est beaucoup à ingérer, n'est-ce pas ? Decomposons cela :

1. Nous déclarons une variable db pour contenir notre connexion à la base de données.
2. Nous utilisons indexedDB.open() pour ouvrir (ou créer) une base de données nommée "MyFirstDatabase".
3. Nous configurons trois gestionnaires d'événements :

• onerror : Cela s'exécute si quelque chose se passe mal.
• onsuccess : Cela s'exécute lorsque la base de données est ouverte avec succès.
• onupgradeneeded : Cela s'exécute lorsque la base de données est créée ou mise à jour.

Pensez à onupgradeneeded comme à l'architecte de la base de données. C'est là que nous concevons notre structure de base de données.

Ajouter des Données à IndexedDB

Maintenant que nous avons notre base de données configurée, ajoutons-y des données. Imaginez que nous créons un système de gestion des étudiants.

function addStudent(student) {
const transaction = db.transaction(["students"], "readwrite");
const objectStore = transaction.objectStore("students");
const request = objectStore.add(student);

request.onerror = function(event) {
console.log("Erreur lors de l'ajout de l'étudiant : " + event.target.error);
};

request.onsuccess = function(event) {
console.log("Étudiant ajouté avec succès");
};
}

// Utilisation
addStudent({ id: 1, name: "Alice", grade: "A" });
addStudent({ id: 2, name: "Bob", grade: "B" });

Voici ce qui se passe :

1. Nous créons une transaction - imaginez-la comme un tunnel sécurisé pour nos données.
2. Nous obtenons le magasin d'objets (comme une table dans une base de données traditionnelle).
3. Nous utilisons add() pour insérer nos données étudiantes.
4. Nous configurons des gestionnaires de succès et d'erreur pour savoir si cela a fonctionné.

Récupérer des Données de IndexedDB

Quelle est l'utilité des données stockées si nous ne pouvons pas les récupérer ? Récupérons nos données étudiantes :

function getStudent(id) {
const transaction = db.transaction(["students"]);
const objectStore = transaction.objectStore("students");
const request = objectStore.get(id);

request.onerror = function(event) {
console.log("Erreur lors de la récupération de l'étudiant : " + event.target.error);
};

request.onsuccess = function(event) {
if (request.result) {
console.log("Étudiant trouvé :", request.result);
} else {
console.log("Étudiant non trouvé");
}
};
}

// Utilisation
getStudent(1);

Cette fonction est comme une bibliothécaire qui vous fetch un livre :

1. Nous démarrons une transaction en lecture seule (nous ne changeons rien).
2. Nous utilisons get() pour récupérer l'étudiant par leur ID.
3. Si nous trouvons l'étudiant, nous enregistrons leurs détails ; sinon, nous disons qu'ils ne sont pas trouvés.

Mettre à Jour des Données dans IndexedDB

Les étudiants s'améliorent, les notes changent. Mettons à jour nos enregistrements :

function updateStudent(id, newGrade) {
const transaction = db.transaction(["students"], "readwrite");
const objectStore = transaction.objectStore("students");
const request = objectStore.get(id);

request.onerror = function(event) {
console.log("Erreur lors de la récupération de l'étudiant pour la mise à jour : " + event.target.error);
};

request.onsuccess = function(event) {
const data = event.target.result;
data.grade = newGrade;

const updateRequest = objectStore.put(data);

updateRequest.onerror = function(event) {
console.log("Erreur lors de la mise à jour de l'étudiant : " + event.target.error);
};

updateRequest.onsuccess = function(event) {
console.log("Étudiant mis à jour avec succès");
};
};
}

// Utilisation
updateStudent(1, "A+");

Cette fonction est comme un enseignant mettant à jour un carnet de notes :

1. Nous récupérons les données actuelles de l'étudiant.
2. Nous modifions la note.
3. Nous utilisons put() pour enregistrer les données mises à jour dans la base de données.

Supprimer des Données de IndexedDB

Parfois, nous devons supprimer des données. Ajoutons une fonction pour supprimer un étudiant :

function deleteStudent(id) {
const transaction = db.transaction(["students"], "readwrite");
const objectStore = transaction.objectStore("students");
const request = objectStore.delete(id);

request.onerror = function(event) {
console.log("Erreur lors de la suppression de l'étudiant : " + event.target.error);
};

request.onsuccess = function(event) {
console.log("Étudiant supprimé avec succès");
};
}

// Utilisation
deleteStudent(2);

C'est comme effacer une entrée de nos dossiers d'étudiants :

1. Nous démarrons une transaction "readwrite" car nous modifions des données.
2. Nous utilisons la méthode delete() pour supprimer l'étudiant par leur ID.
3. Nous gérons les cas de succès et d'erreur pour savoir si cela a fonctionné.

Conclusion

Félicitations ! Vous avez appena fait vos premiers pas dans le monde de IndexedDB. Nous avons couvert la création d'une base de données, l'ajout, la récupération, la mise à jour et la suppression des données. Ce sont les opérations fondamentales que vous utiliserez lorsque vous travaillerez avec IndexedDB.

N'oubliez pas, la pratique fait la perfection. Essayez de créer vos propres petits projets utilisant IndexedDB. Peut-être une application de liste de tâches ou un journal personnel. Plus vous jouerez avec, plus vous deviendrez à l'aise.

IndexedDB peut sembler complexe au départ, mais c'est un outil puissant qui peut amener vos applications web au prochain niveau. C'est comme avoir un superpouvoir - la capacité de stocker et de gérer de grandes quantités de données directement dans le navigateur.

Continuez à coder, restez curieux, et n'oubliez pas de vous amuser en cours de route ! Qui sait ? La prochaine grande application web pourrait bien être entre vos doigts.

Credits: Image by storyset