Da Webanwendungen immer ausgefeilter werden, ist der Bedarf an effizienten clientseitigen Speicherlösungen gewachsen. IndexedDB, eine Low-Level-API zum Speichern großer Mengen strukturierter Daten, ist ein leistungsstarkes Tool für Webentwickler, Softwareentwickler und Web-Enthusiasten, die robuste und offline-fähige Anwendungen erstellen möchten.
In diesem Blog werden wir anhand praktischer Beispiele untersuchen, was IndexedDB ist, wie es funktioniert und wie man es effektiv nutzt. Egal, ob Sie eine Progressive Web App (PWA), ein komplexes Dashboard oder ein Spiel erstellen, IndexedDB kann Ihnen bei der nahtlosen Datenverwaltung helfen.
IndexedDB ist eine browserbasierte NoSQL-Datenbank, die zum Speichern großer Mengen strukturierter Daten, einschließlich Dateien und Blobs, entwickelt wurde. Im Gegensatz zu Cookies oder localStorage können Sie mit IndexedDB Daten in einem strukturierten Format speichern und mithilfe von Indizes abfragen, was es ideal für komplexe Anwendungsfälle macht.
IndexedDB arbeitet mit einer Datenbankstruktur bestehend aus:
Zu den Hauptoperationen in IndexedDB gehören:
So erstellen Sie eine IndexedDB-Datenbank namens MyDatabase mit Objektspeicherbenutzern.
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);
};
Erklärung:
Die Methode indexedDB.open öffnet oder erstellt die Datenbank.
Das onupgradeneeded-Ereignis wird ausgelöst, wenn eine neue Datenbank erstellt oder ihre Version aktualisiert wird.
Ein Objektspeicher namens „Benutzer“ wird mit der ID als Primärschlüssel erstellt.
Sie können mithilfe einer Transaktion Daten zu einem Objektspeicher hinzufügen.
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");
Erklärung:
Eine Transaktion wird mit dem Lese-/Schreibmodus erstellt, um Daten zu ändern.
Die Add-Methode fügt Daten in den Objektspeicher des Benutzers ein.
Rufen Sie Daten mit der Get-Methode ab oder durchlaufen Sie alle Einträge.
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);
Erklärung:
Die Get-Methode ruft einen bestimmten Datensatz anhand seines Schlüssels ab.
Der Datenabruf erfolgt asynchron, daher werden Erfolgs- und Fehlerhandler verwendet.
Aktualisieren Sie vorhandene Datensätze mit der Put-Methode.
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" });
Entfernen Sie einen Datensatz mit der Löschmethode.
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 |
Transaktionen ordnungsgemäß verwenden: Verwalten Sie Datenvorgänge immer innerhalb von Transaktionen, um die Atomizität sicherzustellen.
Fehler ordnungsgemäß behandeln: Implementieren Sie Fehlerhandler für besseres Debugging und Benutzerfeedback.
Versionskontrolle: Erhöhen Sie die Datenbankversion sorgfältig, um Schemaänderungen zu verwalten.
Offline-Szenarien testen: IndexedDB wird häufig für Offline-Funktionen verwendet; Stellen Sie sicher, dass es ohne Internetverbindung wie erwartet funktioniert.
IndexedDB ist ein leistungsstarkes Tool für die clientseitige Datenspeicherung und bietet Funktionen, die herkömmliche Speichermethoden wie localStorage bei weitem übertreffen. Mit der Unterstützung strukturierter Daten, großer Speicherkapazität und Offline-Funktionalität ist IndexedDB eine wesentliche Technologie für die Erstellung moderner Webanwendungen.
Wichtige Erkenntnisse:
IndexedDB ist ideal für die lokale Speicherung großer und komplexer Datensätze.
Transaktionen sind von zentraler Bedeutung für die Verwaltung von Datenvorgängen in IndexedDB.
Es bietet robuste Offline-Unterstützung und ist damit ein Eckpfeiler von Progressive Web Apps.
Durch die Beherrschung von IndexedDB können Sie skalierbare Offline-First-Anwendungen mit überragender Leistung und Benutzererfahrung erstellen. Beginnen Sie noch heute mit IndexedDB in Ihren Projekten zu experimentieren!
Das obige ist der detaillierte Inhalt vonWie verwende ich IndexedDB? Leitfaden für vollständige CRUD-Operationen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
So lösen Sie das Problem der fehlenden Steam_api.dll
So entfernen Sie Wasserzeichen auf TikTok
Vorteile des Herunterladens der offiziellen Website der Yiou Exchange App
Inländische Plattform für digitale Währungen
So löschen Sie Mongodb vollständig, wenn die Installation fehlschlägt
Wie lautet die Aufschrift brc20
Überprüfen Sie den Status der belegten Ports in Windows
Was ist die Mikrocontroller-Programmiersoftware?
