Beim Erstellen moderner Webanwendungen, insbesondere progressiver Web-Apps (PWAs), ist es von entscheidender Bedeutung, eine Möglichkeit zum Offline-Speichern von Daten zu haben. IndexedDB ist eine leistungsstarke clientseitige Datenbank, die es Web-Apps ermöglicht, Daten zu speichern und abzurufen, auch wenn der Benutzer offline ist. Dieser Leitfaden führt Sie durch die Grundlagen von IndexedDB und zeigt Ihnen, wie Sie Daten (CRUD-Operationen) in Ihrer Web-App erstellen, lesen, aktualisieren und löschen.
IndexedDB ist eine Low-Level-API für die clientseitige Speicherung großer Mengen strukturierter Daten, einschließlich Dateien und Blobs. Im Gegensatz zu localStorage können Sie mit IndexedDB komplexe Datentypen und nicht nur Zeichenfolgen speichern. Es verwendet ein asynchrones, transaktionales Datenbankmodell, was es leistungsstark für Anwendungen macht, die große Datensätze oder Offline-Datensynchronisierung verarbeiten müssen.
Lassen Sie uns in die Kernschritte für die Arbeit mit IndexedDB eintauchen. Wir werden Folgendes behandeln:
Um mit IndexedDB zu interagieren, müssen Sie zunächst eine Verbindung zur Datenbank herstellen. Wenn die Datenbank nicht existiert, wird sie erstellt.
const request = indexedDB.open('MyCustomersDatabase', 1);
request.onerror = (event) => {
console.error('Database error:', event.target.errorCode);
};
request.onsuccess = (event) => {
const db = event.target.result;
console.log('Database opened successfully', db);
};
request.onupgradeneeded = (event) => {
const db = event.target.result;
if (!db.objectStoreNames.contains('customers')) {
const objectStore = db.createObjectStore('customers', { keyPath: 'id' });
objectStore.createIndex('name', 'name', { unique: false });
objectStore.createIndex('email', 'email', { unique: true });
console.log('Object store created.');
}
};
Hier ist, was passiert:
Da wir nun unsere Datenbank und unseren Objektspeicher eingerichtet haben, fügen wir einige Daten hinzu.
const addCustomer = (db, customer) => {
const transaction = db.transaction(['customers'], 'readwrite');
const objectStore = transaction.objectStore('customers');
const request = objectStore.add(customer);
request.onsuccess = () => {
console.log('Customer added:', customer);
};
request.onerror = (event) => {
console.error('Error adding customer:', event.target.errorCode);
};
}
const customer = { id: 1, name: 'John Doe', email: 'john@example.com' };
request.onsuccess = (event) => {
const db = event.target.result;
addCustomer(db, customer);
};
Hier ist, was passiert:
Das Lesen von Daten aus IndexedDB ist ebenfalls unkompliziert. Rufen wir den Kunden ab, den wir gerade hinzugefügt haben, indem wir die Methode get() verwenden.
const getCustomer = (db, id) => {
const transaction = db.transaction(['customers'], 'readonly');
const objectStore = transaction.objectStore('customers');
const request = objectStore.get(id);
request.onsuccess = (event) => {
const customer = event.target.result;
if (customer) {
console.log('Customer found:', customer);
} else {
console.log('Customer not found.');
}
};
request.onerror = (event) => {
console.error('Error fetching customer:', event.target.errorCode);
};
}
request.onsuccess = (event) => {
const db = event.target.result;
getCustomer(db, 1); // Fetch customer with ID 1
};
Um einen vorhandenen Datensatz zu aktualisieren, können wir die Methode put() verwenden, die ähnlich wie add() funktioniert, aber den Datensatz ersetzt, wenn der Schlüssel bereits vorhanden ist.
const updateCustomer = (db, customer) => {
const transaction = db.transaction(['customers'], 'readwrite');
const objectStore = transaction.objectStore('customers');
const request = objectStore.put(customer);
request.onsuccess = () => {
console.log('Customer updated:', customer);
};
request.onerror = (event) => {
console.error('Error updating customer:', event.target.errorCode);
};
}
const updatedCustomer = { id: 1, name: 'Jane Doe', email: 'jane@example.com' };
request.onsuccess = (event) => {
const db = event.target.result;
updateCustomer(db, updatedCustomer);
};
Um schließlich einen Datensatz zu löschen, verwenden Sie die Methode delete().
const deleteCustomer = (db, id) => {
const transaction = db.transaction(['customers'], 'readwrite');
const objectStore = transaction.objectStore('customers');
const request = objectStore.delete(id);
request.onsuccess = () => {
console.log('Customer deleted.');
};
request.onerror = (event) => {
console.error('Error deleting customer:', event.target.errorCode);
};
}
request.onsuccess = (event) => {
const db = event.target.result;
deleteCustomer(db, 1); // Delete customer with ID 1
};
IndexedDB ist eine robuste Lösung für die Handhabung der clientseitigen Datenspeicherung, insbesondere in Offline-First-Webanwendungen. Indem Sie dieser Anleitung folgen, haben Sie Folgendes gelernt:
Mit IndexedDB können Sie robustere Webanwendungen erstellen, die Daten lokal speichern und auch ohne Internetverbindung funktionieren.
MDN Web Docs – IndexedDB API
Eine umfassende Anleitung zur Funktionsweise von IndexedDB, seinen API-Methoden und Anwendungsfällen.
MDN IndexedDB-Leitfaden
Google Developers – IndexedDB
Ein ausführlicher Artikel über Best Practices und die Verwendung von IndexedDB zum Erstellen offlinefähiger Web-Apps.
Google Developers – IndexedDB
W3C Indexed Database API
Die offizielle Spezifikation des W3C, die die technische Implementierung und Struktur von IndexedDB beschreibt.
W3C IndexedDB Spec
Diese Ressourcen bieten zusätzliche Tiefe und Kontext, wenn Sie über dieses Tutorial hinaus mehr über IndexedDB erfahren möchten!
Viel Spaß beim Codieren!
Das obige ist der detaillierte Inhalt vonEin Leitfaden für Einsteiger zu IndexedDB. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
