À mesure que les applications Web deviennent plus sophistiquées, le besoin de solutions de stockage efficaces côté client s'est accru. IndexedDB, une API de bas niveau permettant de stocker de grandes quantités de données structurées, est un outil puissant pour les développeurs Web, les ingénieurs logiciels et les passionnés du Web qui cherchent à créer des applications robustes et compatibles hors ligne.
Dans ce blog, nous explorerons ce qu'est IndexedDB, comment il fonctionne et comment l'utiliser efficacement avec des exemples pratiques. Que vous créiez une Progressive Web App (PWA), un tableau de bord complexe ou un jeu, IndexedDB peut vous aider à gérer les données de manière transparente.
IndexedDB est une base de données NoSQL basée sur un navigateur conçue pour stocker de grandes quantités de données structurées, notamment des fichiers et des blobs. Contrairement aux cookies ou à localStorage, IndexedDB vous permet de stocker des données dans un format structuré et de les interroger à l'aide d'index, ce qui le rend idéal pour les cas d'utilisation complexes.
IndexedDB fonctionne sur une structure de base de données composée de :
Les principales opérations dans IndexedDB incluent :
Voici comment créer une base de données IndexedDB appelée MyDatabase avec des utilisateurs de magasin d'objets.
const dbName = "MyDatabase";
const dbVersion = 1; // Versioning is required for schema updates.
const request = indexedDB.open(dbName, dbVersion);
request.onupgradeneeded = function (event) {
const db = event.target.result;
// Create an object store named 'users' with 'id' as the keyPath
if (!db.objectStoreNames.contains("users")) {
db.createObjectStore("users", { keyPath: "id" });
}
console.log("Database setup complete");
};
request.onsuccess = function (event) {
const db = event.target.result;
console.log("Database opened successfully");
};
request.onerror = function (event) {
console.error("Error opening database:", event.target.errorCode);
};
Explication :
La méthode indexedDB.open ouvre ou crée la base de données.
L'événement onupgradeneeded est déclenché lors de la création d'une nouvelle base de données ou de la mise à niveau de sa version.
Un magasin d'objets nommé utilisateurs est créé avec l'identifiant comme clé primaire.
Vous pouvez ajouter des données à un magasin d'objets à l'aide d'une transaction.
function addUser(id, name, email) {
const request = indexedDB.open("MyDatabase", 1);
request.onsuccess = function (event) {
const db = event.target.result;
const transaction = db.transaction("users", "readwrite");
const objectStore = transaction.objectStore("users");
const user = { id, name, email };
const addRequest = objectStore.add(user);
addRequest.onsuccess = function () {
console.log("User added:", user);
};
addRequest.onerror = function (event) {
console.error("Error adding user:", event.target.errorCode);
};
};
}
// Add a new user
addUser(1, "John Doe", "john.doe@example.com");
Explication :
Une transaction est créée avec le mode lecture-écriture pour modifier les données.
La méthode add insère des données dans le magasin d'objets des utilisateurs.
Récupérez les données en utilisant la méthode get ou parcourez toutes les entrées.
function getUser(id) {
const request = indexedDB.open("MyDatabase", 1);
request.onsuccess = function (event) {
const db = event.target.result;
const transaction = db.transaction("users", "readonly");
const objectStore = transaction.objectStore("users");
const getRequest = objectStore.get(id);
getRequest.onsuccess = function () {
if (getRequest.result) {
console.log("User found:", getRequest.result);
} else {
console.log("User not found");
}
};
getRequest.onerror = function (event) {
console.error("Error retrieving user:", event.target.errorCode);
};
};
}
// Get user with ID 1
getUser(1);
Explication :
La méthode get récupère un enregistrement spécifique par sa clé.
La récupération des données est asynchrone, des gestionnaires de réussite et d'erreur sont donc utilisés.
Mettre à jour les enregistrements existants à l'aide de la méthode put.
function updateUser(id, updatedData) {
const request = indexedDB.open("MyDatabase", 1);
request.onsuccess = function (event) {
const db = event.target.result;
const transaction = db.transaction("users", "readwrite");
const objectStore = transaction.objectStore("users");
const putRequest = objectStore.put({ ...updatedData, id });
putRequest.onsuccess = function () {
console.log("User updated:", { ...updatedData, id });
};
putRequest.onerror = function (event) {
console.error("Error updating user:", event.target.errorCode);
};
};
}
// Update user with ID 1
updateUser(1, { name: "Johnathan Doe", email: "johnathan.doe@example.com" });
Supprimez un enregistrement à l'aide de la méthode de suppression.
function deleteUser(id) {
const request = indexedDB.open("MyDatabase", 1);
request.onsuccess = function (event) {
const db = event.target.result;
const transaction = db.transaction("users", "readwrite");
const objectStore = transaction.objectStore("users");
const deleteRequest = objectStore.delete(id);
deleteRequest.onsuccess = function () {
console.log("User deleted with ID:", id);
};
deleteRequest.onerror = function (event) {
console.error("Error deleting user:", event.target.errorCode);
};
};
}
// Delete user with ID 1
deleteUser(1);
| Feature | IndexedDB | localStorage | sessionStorage |
|---|---|---|---|
| Storage Limit | Several MB to GB | 5 MB (approx) | 5 MB (approx) |
| Data Format | Key-value pairs | Key-value pairs | Key-value pairs |
| Asynchronous | Yes | No | No |
| Structured Data | Yes | No | No |
Utilisez correctement les transactions : gérez toujours les opérations de données dans les transactions pour garantir l'atomicité.
Gérer les erreurs avec élégance : implémentez des gestionnaires d'erreurs pour un meilleur débogage et des commentaires des utilisateurs.
Contrôle de version : incrémentez soigneusement la version de la base de données pour gérer les modifications de schéma.
Test des scénarios hors ligne : IndexedDB est souvent utilisé pour les fonctionnalités hors ligne ; assurez-vous qu'il fonctionne comme prévu sans connexion Internet.
IndexedDB est un outil puissant pour le stockage de données côté client, offrant des fonctionnalités qui surpassent de loin les méthodes de stockage traditionnelles comme localStorage. Avec la prise en charge des données structurées, une grande capacité de stockage et des fonctionnalités hors ligne, IndexedDB est une technologie essentielle pour créer des applications Web modernes.
Principaux points à retenir :
IndexedDB est idéal pour stocker localement des ensembles de données volumineux et complexes.
Les transactions sont essentielles à la gestion des opérations de données dans IndexedDB.
Il fournit un support hors ligne robuste, ce qui en fait la pierre angulaire des Progressive Web Apps.
En maîtrisant IndexedDB, vous pouvez créer des applications évolutives et hors ligne avec des performances et une expérience utilisateur supérieures. Commencez dès aujourd’hui à expérimenter IndexedDB dans vos projets !
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Comment résoudre le problème de steam_api.dll manquant
Comment supprimer le filigrane sur TikTok
Avantages du téléchargement du site officiel de l'application Yiou Exchange
Plateforme nationale de monnaie numérique
Comment supprimer complètement MongoDB si l'installation échoue
Quelle est l'inscription brc20
Vérifiez l'état du port occupé dans Windows
Quels sont les logiciels de programmation du microcontrôleur ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
