JavaScript Academy · Lektion

Transaktionen und CRUD

Fügen Sie Datensätze hinzu, lesen, aktualisieren und löschen Sie sie.

Transaktionen und CRUD ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des JavaScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Alles ist eine Transaktion

In IndexedDB finden alle Lese- und Schreibvorgänge innerhalb einer Transaktion statt. Eine Transaktion bündelt Vorgänge, sodass sie entweder alle erfolgreich sind oder vollständig zurückgesetzt werden. So bleiben die Daten konsistent.

Eine Transaktion starten

Erstellen Sie eine mit db.transaction(storeNames, mode). Der Modus ist 'readonly' (Standard) oder 'readwrite' für Änderungen.

const tx = db.transaction('notes', 'readwrite');
const store = tx.objectStore('notes');

Den Object Store abrufen

Rufen Sie aus der Transaktion über tx.objectStore(name) den Object Store ab, mit dem Sie arbeiten möchten. Alle CRUD-Methoden befinden sich auf diesem Store.

const tx = db.transaction('notes', 'readwrite');
const store = tx.objectStore('notes');
// store.add / get / put / delete

Datensätze hinzufügen

store.add(value) fügt einen neuen Datensatz ein. Der Vorgang schlägt fehl, wenn bereits ein Datensatz mit demselben Schlüssel existiert. So werden versehentliche Überschreibungen verhindert.

const store = tx.objectStore('notes');
const req = store.add({ id: 1, text: 'Buy milk' });
req.onsuccess = () => console.log('added with key', req.result);

Einen Datensatz lesen

store.get(key) ruft anhand seines Schlüssels einen Datensatz ab. Das Ergebnis ist bei onsuccess der Anfrage als request.result verfügbar (bei Nichtauffinden als undefined).

const req = store.get(1);
req.onsuccess = () => {
  console.log('record:', req.result);
};

Mit put aktualisieren

store.put(value) fügt einen Datensatz ein oder ersetzt ihn. Anders als add überschreibt die Methode einen vorhandenen Datensatz mit demselben Schlüssel und eignet sich daher ideal für Aktualisierungen.

store.put({ id: 1, text: 'Buy milk and eggs' });
// Replaces the existing record with id 1.

Einen Datensatz löschen

store.delete(key) entfernt den Datensatz mit dem angegebenen Schlüssel. Der Vorgang ist auch dann erfolgreich, wenn kein solcher Datensatz existiert.

const req = store.delete(1);
req.onsuccess = () => console.log('deleted');

Einen Store leeren

store.clear() entfernt alle Datensätze im Object Store auf einmal. Verwenden Sie die Methode, um zwischengespeicherte Daten zurückzusetzen.

store.clear();
// All records in 'notes' are removed.

Abschluss der Transaktion

Die Transaktion selbst löst oncomplete aus, wenn alle Vorgänge festgeschrieben wurden, und onerror oder onabort, wenn etwas fehlschlägt. Verwenden Sie oncomplete, um zu erkennen, dass Schreibvorgänge dauerhaft gespeichert sind.

tx.oncomplete = () => console.log('all changes saved');
tx.onerror = () => console.log('transaction failed');

Verhalten beim automatischen Commit

Transaktionen werden automatisch festgeschrieben, wenn die Kontrolle ohne ausstehende Anfragen an die Ereignisschleife zurückgegeben wird. Sie können eine Transaktion nicht über ein await für einen unabhängigen asynchronen Vorgang hinweg offen halten. Führen Sie daher alle Store-Operationen zusammen aus.

// Queue operations synchronously within the same tx:
store.add({ id: 2, text: 'A' });
store.add({ id: 3, text: 'B' });
// Both commit together when tx completes.

CRUD-Zusammenfassung

Die vier grundlegenden Operationen lassen sich eindeutig zuordnen:

Erstellen: add
Lesen: get
Aktualisieren: put
Löschen: delete

Alle werden innerhalb einer Transaktion ausgeführt, die Konsistenz garantiert.

Kurze Überprüfung

Testen Sie Ihr Verständnis von Transaktionen und CRUD.

Rückblick

Sie haben Transaktionen und CRUD kennengelernt:

Starten Sie mit db.transaction(store, mode).
Rufen Sie den Object Store mit tx.objectStore(name) ab.
add fügt Datensätze ein, get liest sie, put fügt sie ein oder aktualisiert sie und delete entfernt sie.
Die Ergebnisse stehen im onsuccess-Handler jeder Anfrage zur Verfügung.
tx.oncomplete bestätigt, dass die Änderungen gespeichert wurden.

Als Nächstes folgen Indizes und Abfragen.

Häufig gestellte Fragen

Ist die Lektion „Transaktionen und CRUD“ kostenlos?

Ja — der vollständige Text von „Transaktionen und CRUD“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des JavaScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Transaktionen und CRUD“?

Fügen Sie Datensätze hinzu, lesen, aktualisieren und löschen Sie sie. Du übst JavaScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um JavaScript Academy zu starten?

Keine Vorkenntnisse erforderlich. JavaScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „Transaktionen und CRUD“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser JavaScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede JavaScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu JavaScript Academy