JavaScript Academy · Lektion

Versionierung und Upgrades

Migrieren Sie Schemas bei Versionsänderungen.

Versionierung und Upgrades ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 4 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.

Warum Versionierung?

Anwendungen entwickeln sich weiter: Sie fügen Object Stores oder Indizes hinzu oder ändern die Struktur der Daten. IndexedDB verwendet eine Versionsnummer, um diese Schemaänderungen sicher in den Browsern aller Benutzer zu verwalten.

Die Versionsnummer

Das zweite Argument von open ist die Version, eine positive ganze Zahl. Wenn Sie sie erhöhen, teilen Sie dem Browser mit, dass sich das Schema geändert hat, und lösen ein Upgrade aus.

// Bumping from 1 to 2 triggers onupgradeneeded:
const request = indexedDB.open('app-db', 2);

Upgrades gehen nur aufwärts

Sie können die Version nur erhöhen. Das Öffnen mit einer niedrigeren Nummer als der gespeicherten schlägt mit einem Fehler fehl. Verringern Sie die Version niemals.

// If the stored DB is version 3:
const req = indexedDB.open('app-db', 2);
req.onerror = () => console.log('cannot open older version');

oldVersion und newVersion

Innerhalb von onupgradeneeded stellt das Ereignis oldVersion und newVersion bereit. Verwenden Sie diese Werte, um nur die Migrationen anzuwenden, die noch nicht ausgeführt wurden.

request.onupgradeneeded = (e) => {
  console.log('upgrading from', e.oldVersion, 'to', e.newVersion);
};

Schrittweise Migrationen

Ein robustes Muster ist ein Fall-through anhand von oldVersion: Jeder Block baut auf dem vorherigen auf, sodass ein Benutzer mit jeder alten Version das aktuelle Schema erreicht.

request.onupgradeneeded = (e) => {
  const db = e.target.result;
  if (e.oldVersion < 1) {
    db.createObjectStore('notes', { keyPath: 'id' });
  }
  if (e.oldVersion < 2) {
    db.createObjectStore('tags', { keyPath: 'name' });
  }
};

Später einen Index hinzufügen

Um während eines Upgrades einem vorhandenen Object Store einen Index hinzuzufügen, rufen Sie den Object Store aus der Upgrade-Transaktion ab und rufen darauf createIndex auf.

request.onupgradeneeded = (e) => {
  if (e.oldVersion < 3) {
    const store = e.target.transaction.objectStore('notes');
    store.createIndex('byDate', 'createdAt');
  }
};

Die Versionwechsel-Transaktion

Während onupgradeneeded ist die transaction des Ereignisses eine spezielle versionchange-Transaktion. Nur in diesem Kontext können Sie sowohl das Schema als auch Daten ändern.

request.onupgradeneeded = (e) => {
  const tx = e.target.transaction; // versionchange tx
  const store = tx.objectStore('notes');
  // migrate existing records here if needed
};

Vorhandene Daten migrieren

Wenn eine Schemaänderung eine neue Struktur der Datensätze erfordert, durchlaufen Sie den Object Store während des Upgrades mit einem Cursor und schreiben Sie die umgewandelten Werte mit put zurück.

const store = e.target.transaction.objectStore('notes');
store.openCursor().onsuccess = (ev) => {
  const cursor = ev.target.result;
  if (cursor) {
    const note = cursor.value;
    note.archived = false; // new field
    cursor.update(note);
    cursor.continue();
  }
};

Das versionchange-Ereignis

Wenn ein Tab ein Upgrade durchführt, erhalten andere Tabs mit der alten Version ein versionchange-Ereignis auf ihrer db. Sie sollten die Verbindung schließen, damit das Upgrade nicht blockiert wird.

db.onversionchange = () => {
  db.close(); // let the other tab upgrade
  console.log('database is outdated, please reload');
};

Object Stores löschen

Sie können einen nicht mehr benötigten Object Store während eines Upgrades mit db.deleteObjectStore(name) entfernen. Dadurch werden der Object Store und seine Daten dauerhaft gelöscht.

request.onupgradeneeded = (e) => {
  const db = e.target.result;
  if (e.oldVersion < 4 && db.objectStoreNames.contains('temp')) {
    db.deleteObjectStore('temp');
  }
};

Bewährte Vorgehensweisen für Upgrades

Halten Sie Migrationen idempotent und nach oldVersion geordnet, schließen Sie alte Verbindungen bei versionchange und testen Sie Upgrades von jeder vorherigen Version aus. So bleiben die Daten wiederkehrender Benutzer erhalten.

Kurze Überprüfung

Testen Sie Ihr Verständnis von Versionierung und Upgrades.

Rückblick

Sie haben Versionierung und Upgrades kennengelernt:

Erhöhen Sie die Versionsnummer, um onupgradeneeded auszulösen.
Verwenden Sie oldVersion für schrittweise, idempotente Migrationen.
Die versionchange-Transaktion des Upgrades ändert Schema und Daten.
Migrieren Sie Datensätze mit einem Cursor und cursor.update.
Schließen Sie alte Tabs beim versionchange-Ereignis.

Sie haben IndexedDB abgeschlossen. Als Nächstes folgen Service Worker.

Häufig gestellte Fragen

Ist die Lektion „Versionierung und Upgrades“ kostenlos?

Ja — der vollständige Text von „Versionierung und Upgrades“ 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 „Versionierung und Upgrades“?

Migrieren Sie Schemas bei Versionsänderungen. 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 4 von 4.

Wie lange dauert die Lektion „Versionierung und Upgrades“?

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