HTML - IndexedDB

Daten erstellen

Um Daten zu einem Objektspeicher in IndexedDB hinzuzufügen, müssen Sie Transaktionen verwenden. Öffnen Sie zunächst eine Transaktion für den gewünschten Objektspeicher im "readwrite"-Modus. Dann erhalten Sie eine Referenz auf den Objektspeicher mit der objectStore()-Methode des Transaktionsobjekts. Verwenden Sie schließlich die add()- oder put()-Methode des Objektspeichers, um die Daten hinzuzufügen.

let db;
let request = indexedDB.open("MyDatabase", 1);

request.onsuccess = function(event) {
  db = event.target.result;
  addData({ id: 1, name: "John Doe", age: 25 });
};

function addData(data) {
  let transaction = db.transaction(["MyObjectStore"], "readwrite");
  let objectStore = transaction.objectStore("MyObjectStore");

  let request = objectStore.add(data);

  request.onsuccess = function(event) {
    console.log("Daten erfolgreich hinzugefügt");
  };

  request.onerror = function(event) {
    console.log("Fehler beim Hinzufügen der Daten");
  };
}

Die add()-Methode wird verwendet, um neue Daten hinzuzufügen, während die put()-Methode verwendet werden kann, um neue Daten hinzuzufügen oder vorhandene Daten zu aktualisieren, falls der Schlüssel bereits existiert.

Es ist wichtig, Fehler zu behandeln, die während des Dateneinfügeprozesses auftreten können. Sie können den onerror-Ereignishandler des Anfrageobjekts verwenden, um Fehler abzufangen und zu behandeln.

Daten lesen

Um Daten aus einem Objektspeicher zu erhalten, können Sie die get()-Methode des Objektspeichers verwenden. Sie müssen den Schlüssel der Daten angeben, die Sie abrufen möchten.

let transaction = db.transaction(["MyObjectStore"], "readonly");
let objectStore = transaction.objectStore("MyObjectStore");

let request = objectStore.get(1);

request.onsuccess = function(event) {
  let data = event.target.result;
  console.log("Abgerufene Daten:", data);
};

Wenn Sie nach Daten basierend auf einer bestimmten Eigenschaft suchen möchten, können Sie Indizes verwenden. Erhalten Sie zunächst eine Referenz auf den Index mit der index()-Methode des Objektspeichers. Verwenden Sie dann die get()-Methode des Index, um Daten basierend auf dem Indexschlüssel abzurufen.

let transaction = db.transaction(["MyObjectStore"], "readonly");
let objectStore = transaction.objectStore("MyObjectStore");
let index = objectStore.index("name");

let request = index.get("John Doe");

request.onsuccess = function(event) {
  let data = event.target.result;
  console.log("Abgerufene Daten:", data);
};

Für fortgeschrittenere Abfragen oder das Durchlaufen mehrerer Dateneinträge können Sie Cursors verwenden. Cursors ermöglichen es Ihnen, alle Daten in einem Objektspeicher oder Index zu durchlaufen. Sie können einen Cursor mit der openCursor()-Methode des Objektspeichers oder Index öffnen.

let transaction = db.transaction(["MyObjectStore"], "readonly");
let objectStore = transaction.objectStore("MyObjectStore");

let request = objectStore.openCursor();

request.onsuccess = function(event) {
  let cursor = event.target.result;
  if (cursor) {
    console.log("Schlüssel:", cursor.key);
    console.log("Daten:", cursor.value);
    cursor.continue();
  } else {
    console.log("Keine weiteren Daten");
  }
};

Im obigen Beispiel öffnen wir einen Cursor für den Objektspeicher. Der onsuccess-Ereignishandler wird für jeden Dateneintrag aufgerufen. Wir können auf den Schlüssel und den Wert des aktuellen Eintrags mit cursor.key und cursor.value zugreifen. Um zum nächsten Eintrag zu gelangen, rufen wir die continue()-Methode des Cursors auf.

Daten aktualisieren

Um vorhandene Daten in einem Objektspeicher zu aktualisieren, können Sie die put()-Methode verwenden. Sie funktioniert ähnlich wie die add()-Methode, aber wenn der Schlüssel bereits existiert, wird der entsprechende Datensatz aktualisiert.

let transaction = db.transaction(["MyObjectStore"], "readwrite");
let objectStore = transaction.objectStore("MyObjectStore");

let updatedData = { id: 1, name: "John Doe", age: 26 };
let request = objectStore.put(updatedData);

request.onsuccess = function(event) {
  console.log("Daten erfolgreich aktualisiert");
};

Sie können auch bestimmte Felder eines vorhandenen Dateneintrags mit der put()-Methode aktualisieren. Rufen Sie zuerst die Daten mit der get()-Methode ab, aktualisieren Sie die gewünschten Felder und verwenden Sie dann put(), um die Änderungen zu speichern.

let transaction = db.transaction(["MyObjectStore"], "readwrite");
let objectStore = transaction.objectStore("MyObjectStore");

let request = objectStore.get(1);

request.onsuccess = function(event) {
  let data = event.target.result;
  data.age = 27;

  let updateRequest = objectStore.put(data);

  updateRequest.onsuccess = function(event) {
    console.log("Daten erfolgreich aktualisiert");
  };
};

Achten Sie beim Aktualisieren von Daten auf Versionierung und Schemaänderungen. Wenn Sie die Struktur Ihrer Objektspeicher oder Indizes ändern müssen, sollten Sie dies im onupgradeneeded-Ereignishandler behandeln und Ihre Datenbank ordnungsgemäß versionieren.

Daten löschen

Um Daten aus einem Objektspeicher zu entfernen, können Sie die delete()-Methode des Objektspeichers verwenden. Sie müssen den Schlüssel der Daten angeben, die Sie entfernen möchten.

let transaction = db.transaction(["MyObjectStore"], "readwrite");
let objectStore = transaction.objectStore("MyObjectStore");

let request = objectStore.delete(1);

request.onsuccess = function(event) {
  console.log("Daten erfolgreich entfernt");
};

Wenn Sie einen gesamten Objektspeicher leeren möchten, können Sie die clear()-Methode des Objektspeichers verwenden.

let transaction = db.transaction(["MyObjectStore"], "readwrite");
let objectStore = transaction.objectStore("MyObjectStore");

let request = objectStore.clear();

request.onsuccess = function(event) {
  console.log("Objektspeicher erfolgreich geleert");
};

Um eine Datenbank zu löschen, können Sie die deleteDatabase()-Methode des indexedDB-Objekts verwenden. Dies entfernt die Datenbank und alle ihre Objektspeicher vollständig.

let request = indexedDB.deleteDatabase("MyDatabase");

request.onsuccess = function(event) {
  console.log("Datenbank erfolgreich gelöscht");
};

Seien Sie vorsichtig beim Löschen von Daten, da es sich um eine dauerhafte Operation handelt und nicht rückgängig gemacht werden kann.

Versionierung und Upgrades

IndexedDB verwendet Versionierung, um Änderungen an der Datenbankstruktur im Laufe der Zeit zu verwalten. Jeder Datenbank ist eine Versionsnummer zugeordnet. Wenn Sie eine Datenbank mit einer höheren Versionsnummer als der aktuellen öffnen, wird das onupgradeneeded-Ereignis ausgelöst, das es Ihnen ermöglicht, das Datenbankschema zu ändern.

let request = indexedDB.open("MeineDatenbank", 2); // Upgrade auf Version 2

request.onupgradeneeded = function(event) {
  let db = event.target.result;

  // Führe Änderungen am Datenbankschema durch
  if (event.oldVersion < 1) {
    // Erstelle Objektspeicher und Indizes für Version 1
    let objectStore = db.createObjectStore("MeinObjektspeicher", { keyPath: "id" });
    objectStore.createIndex("name", "name", { unique: false });
  }

  if (event.oldVersion < 2) {
    // Mache Änderungen für Version 2
    let objectStore = db.createObjectStore("WeitererObjektspeicher", { keyPath: "id" });
    objectStore.createIndex("kategorie", "kategorie", { unique: false });
  }
};

Im obigen Beispiel öffnen wir die Datenbank mit Version 2. Wenn die aktuelle Version niedriger als 2 ist, wird das onupgradeneeded-Ereignis ausgelöst. Wir können dann die oldVersion-Eigenschaft überprüfen, um die aktuelle Version zu ermitteln und die notwendigen Schemaänderungen für jedes Versions-Upgrade vorzunehmen.

Indizes und zusammengesetzte Schlüssel

Indizes in IndexedDB ermöglichen es Ihnen, Daten basierend auf bestimmten Eigenschaften effizient abzufragen und zu durchsuchen. Sie können Indizes für einzelne Eigenschaften erstellen oder zusammengesetzte Indizes erstellen, die mehrere Eigenschaften kombinieren.

let request = indexedDB.open("MeineDatenbank", 1);

request.onupgradeneeded = function(event) {
  let db = event.target.result;
  let objectStore = db.createObjectStore("MeinObjektspeicher", { keyPath: "id" });

  // Erstelle einen Einzel-Eigenschafts-Index
  objectStore.createIndex("name", "name", { unique: false });

  // Erstelle einen zusammengesetzten Index
  objectStore.createIndex("nameAlter", ["name", "alter"], { unique: false });
};

Im obigen Beispiel erstellen wir einen Einzel-Eigenschafts-Index für die Eigenschaft "name" und einen zusammengesetzten Index für die Eigenschaften "name" und "alter". Zusammengesetzte Indizes ermöglichen es Ihnen, Daten basierend auf mehreren Eigenschaften gleichzeitig abzufragen.

Transaktionen und Nebenläufigkeit

Transaktionen in IndexedDB stellen sicher, dass Daten korrekt und konsistent sind. Alle Datenbankoperationen müssen innerhalb einer Transaktion durchgeführt werden. Transaktionen können schreibgeschützt oder lese-schreib sein, abhängig von der Art der durchgeführten Operationen.

IndexedDB unterstützt auch gleichzeitigen Zugriff auf die Datenbank. Mehrere Transaktionen können gleichzeitig aktiv sein, aber sie arbeiten auf verschiedenen Objektspeichern oder haben unterschiedliche Zugriffsmodi (schreibgeschützt oder lese-schreib), um Konflikte zu vermeiden.

let transaction1 = db.transaction(["Objektspeicher1"], "readonly");
let transaction2 = db.transaction(["Objektspeicher2"], "readwrite");

// Mehrere Transaktionen können gleichzeitig aktiv sein
transaction1.objectStore("Objektspeicher1").get(1);
transaction2.objectStore("Objektspeicher2").add({ id: 1, name: "Hans" });

Im obigen Beispiel haben wir zwei gleichzeitig aktive Transaktionen. transaction1 ist schreibgeschützt und arbeitet auf "Objektspeicher1", während transaction2 lese-schreib ist und auf "Objektspeicher2" arbeitet. Sie können unabhängig voneinander ohne Konflikte fortfahren.

Leistungsüberlegungen

Um die Leistung Ihrer IndexedDB-Nutzung zu optimieren, beachten Sie Folgendes:

Indem Sie diese Leistungsüberlegungen berücksichtigen und Indizes, Transaktionen und Nebenläufigkeit gut nutzen, können Sie effiziente und schnelle Webanwendungen mit IndexedDB erstellen.

Umgang mit sensiblen Daten

Wenn Ihre Anwendung mit sensiblen Daten wie persönlichen Informationen oder Finanzdaten umgeht, müssen Sie beim Speichern und Verarbeiten dieser Daten in IndexedDB besondere Vorsichtsmaßnahmen treffen. Hier einige bewährte Praktiken:

1. Verschlüsseln Sie sensible Daten: Bevor Sie sensible Informationen in IndexedDB speichern, verschlüsseln Sie diese mit einem starken Verschlüsselungsalgorithmus. So können selbst Personen, die Zugriff auf die IndexedDB-Daten erhalten, die sensiblen Informationen ohne den Verschlüsselungsschlüssel nicht lesen.

2. Verwenden Sie sichere Verschlüsselungsbibliotheken: Nutzen Sie etablierte und vertrauenswürdige Verschlüsselungsbibliotheken oder -algorithmen wie AES (Advanced Encryption Standard) zum Verschlüsseln und Entschlüsseln sensibler Daten. Entwickeln Sie keine eigenen Verschlüsselungsalgorithmen, da diese Schwachstellen aufweisen könnten.

3. Speichern Sie Verschlüsselungsschlüssel sicher: Bewahren Sie die zur Verschlüsselung und Entschlüsselung sensibler Daten verwendeten Schlüssel sicher auf. Speichern Sie sie nicht in derselben Datenbank wie die verschlüsselten Daten. Erwägen Sie stattdessen Techniken wie Schlüsselableitungsfunktionen oder sichere Schlüsselspeichermechanismen, die von der Plattform oder dem Browser bereitgestellt werden.

4. Minimieren Sie die Datenspeicherung: Speichern Sie sensible Daten nur dann in IndexedDB, wenn es unbedingt notwendig ist. Wenn die Daten nicht mehr benötigt werden, löschen Sie sie sicher aus der Datenbank. Überprüfen und entfernen Sie regelmäßig unnötige sensible Informationen, um das Risiko von Datenschutzverletzungen zu verringern.

Sicherung des Zugriffs auf IndexedDB

Zusätzlich zum sicheren Umgang mit sensiblen Daten sollten Sie auch den Zugriff auf IndexedDB kontrollieren, um unbefugten Zugriff oder Änderungen zu verhindern. Hier einige Maßnahmen, die Sie ergreifen können:

1. Nutzen Sie Browsersicherheitsfunktionen: Verwenden Sie Browsersicherheitsfunktionen wie die Same-Origin-Policy und Content Security Policy (CSP), um den Zugriff auf IndexedDB von nicht vertrauenswürdigen Quellen einzuschränken. Diese Richtlinien helfen, Cross-Site-Scripting (XSS)-Angriffe und unbefugten Zugriff auf IndexedDB von verschiedenen Ursprüngen zu verhindern.

<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

2. Implementieren Sie Benutzerauthentifizierung: Wenn Ihre Anwendung eine Benutzerauthentifizierung erfordert, stellen Sie sicher, dass nur authentifizierte Benutzer auf die IndexedDB-Daten zugreifen können. Verwenden Sie sichere Authentifizierungsmechanismen wie Token oder Sitzungsverwaltung, um die Identität des Benutzers zu überprüfen, bevor Sie Zugriff auf die Datenbank gewähren.

// Beispiel für Token-basierte Authentifizierung
fetch('https://api.example.com/data', {
  method: 'GET',
  headers: {
    'Authorization': 'Bearer ' + token
  }
})
  .then(response => response.json())
  .then(data => console.log(data));

3. Wenden Sie Zugriffskontrollen an: Implementieren Sie Zugriffskontrollen basierend auf Benutzerrollen oder -berechtigungen. Legen Sie fest, welche Benutzer oder Benutzergruppen Lese- oder Schreibzugriff auf bestimmte Objektspeicher oder Daten innerhalb von IndexedDB haben sollten. Wenden Sie diese Zugriffskontrollen konsequent in Ihrer gesamten Anwendung an.

4. Validieren und bereinigen Sie Benutzereingaben: Wenn Sie Benutzereingaben akzeptieren, die in IndexedDB gespeichert werden sollen, validieren und bereinigen Sie die Eingabe, um potenzielle Sicherheitslücken wie SQL-Injection oder Cross-Site-Scripting-Angriffe zu verhindern. Verwenden Sie strenge Validierungsregeln und entfernen oder escapen Sie alle potenziell schädlichen Zeichen oder Skripte.

const sanitizedInput = input.replace(/[<>]/g, ''); // einfache Bereinigung

5. Verwenden Sie sichere Kommunikation: Wenn Ihre Anwendung mit einem Server kommuniziert, um IndexedDB-Daten zu synchronisieren, stellen Sie sicher, dass der Kommunikationskanal sicher ist. Verwenden Sie HTTPS/SSL, um die zwischen Client und Server übertragenen Daten zu verschlüsseln und so Abhören oder Manipulationen zu verhindern.

<form action="https://yourserver.com/submit" method="post">
  <input type="text" name="data">
  <input type="submit" value="Absenden">
</form>

Denken Sie daran, dass Sicherheit ein fortlaufender Prozess ist. Es ist wichtig, sich über die neuesten Sicherheitsbestpraktiken und Schwachstellen auf dem Laufenden zu halten. Überprüfen und aktualisieren Sie Ihre Sicherheitsmaßnahmen regelmäßig, um sensible Daten zu schützen und Ihre IndexedDB-Implementierung sicher zu halten.

Offline-Datenspeicherung und Synchronisation

Einer der Hauptvorteile von IndexedDB ist die Fähigkeit, Daten offline zu speichern und Offline-Funktionalität in Webanwendungen zu ermöglichen. Mit IndexedDB können Sie Anwendungsdaten lokal auf dem Gerät des Benutzers speichern, sodass sie auch ohne Internetverbindung auf die Anwendung zugreifen und damit interagieren können.

// Daten offline speichern
function storeDataOffline(data) {
  let transaction = db.transaction(["MyObjectStore"], "readwrite");
  let objectStore = transaction.objectStore("MyObjectStore");

  let request = objectStore.add(data);

  request.onsuccess = function(event) {
    console.log("Daten offline gespeichert");
  };
}

// Daten bei Online-Verbindung synchronisieren
function syncDataWithServer() {
  let transaction = db.transaction(["MyObjectStore"], "readonly");
  let objectStore = transaction.objectStore("MyObjectStore");

  let request = objectStore.openCursor();

  request.onsuccess = function(event) {
    let cursor = event.target.result;
    if (cursor) {
      let data = cursor.value;
      sendDataToServer(data);
      cursor.continue();
    } else {
      console.log("Alle Daten mit dem Server synchronisiert");
    }
  };
}

// Daten an den Server senden
function sendDataToServer(data) {
  fetch('https://api.example.com/data', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(data)
  })
    .then(response => {
      if (response.ok) {
        console.log("Daten mit dem Server synchronisiert");
      }
    });
}

Die Funktion storeDataOffline speichert Daten in IndexedDB, wenn die Anwendung offline ist. Die Daten werden einem Objektspeicher innerhalb einer Transaktion hinzugefügt. Später, wenn die Anwendung wieder online ist, verwendet die Funktion syncDataWithServer einen Cursor, um alle gespeicherten Daten zu durchlaufen und jeden Datensatz mithilfe der Funktion sendDataToServer an den Server zu senden. Auf diese Weise kann die Anwendung offline arbeiten und die Daten mit dem Server synchronisieren, sobald eine Verbindung wiederhergestellt ist.

Zwischenspeichern von Anwendungsdaten

IndexedDB kann als Zwischenspeichermechanismus verwendet werden, um häufig abgerufene oder langsam zu ladende Daten lokal zu speichern. Durch das Zwischenspeichern von Daten in IndexedDB können Sie die Leistung und Geschwindigkeit Ihrer Webanwendung verbessern.

// Cache auf Daten prüfen
function getDataFromCache(key) {
  return new Promise((resolve, reject) => {
    let transaction = db.transaction(["CacheStore"], "readonly");
    let objectStore = transaction.objectStore("CacheStore");

    let request = objectStore.get(key);

    request.onsuccess = function(event) {
      let data = event.target.result;
      if (data) {
        console.log("Daten aus dem Cache abgerufen");
        resolve(data);
      } else {
        console.log("Daten nicht im Cache gefunden");
        reject();
      }
    };
  });
}

// Daten im Cache speichern
function storeDataInCache(key, data) {
  let transaction = db.transaction(["CacheStore"], "readwrite");
  let objectStore = transaction.objectStore("CacheStore");

  let request = objectStore.put(data, key);

  request.onsuccess = function(event) {
    console.log("Daten im Cache gespeichert");
  };
}

// Daten aus dem Cache oder vom Server abrufen
function getData(key) {
  getDataFromCache(key)
    .then(data => {
      console.log("Daten aus dem Cache abgerufen:", data);
    })
    .catch(() => {
      fetch(`https://api.example.com/data/${key}`)
        .then(response => response.json())
        .then(data => {
          console.log("Daten vom Server abgerufen:", data);
          storeDataInCache(key, data);
        });
    });
}

Die Funktion getDataFromCache prüft, ob die angeforderten Daten im Cache (IndexedDB) verfügbar sind. Wenn die Daten gefunden werden, werden sie aufgelöst und zurückgegeben. Wenn die Daten nicht im Cache gefunden werden, wird die Funktion abgelehnt, und die Funktion getData ruft die Daten mithilfe der fetch-API vom Server ab. Sobald die Daten vom Server abgerufen wurden, werden sie mit der Funktion storeDataInCache für zukünftige Zugriffe im Cache gespeichert.

Durch die Implementierung dieses Zwischenspeichermechanismus können Sie die Anzahl der Netzwerkanfragen reduzieren und die Ladegeschwindigkeit Ihrer Anwendung verbessern, indem Daten bei Verfügbarkeit aus dem lokalen Cache bereitgestellt werden.

Implementierung von Suchfunktionen

Die Indexierungsfähigkeiten von IndexedDB machen es gut geeignet für die Implementierung von Suchfunktionen in einer Webanwendung. Durch das Erstellen von Indizes auf durchsuchbaren Feldern können Sie schnell Daten basierend auf bestimmten Kriterien suchen und abrufen.

// Index auf durchsuchbarem Feld erstellen
function createSearchIndex() {
  let request = indexedDB.open("MyDatabase", 1);

  request.onupgradeneeded = function(event) {
    let db = event.target.result;
    let objectStore = db.createObjectStore("ProductStore", { keyPath: "id" });
    objectStore.createIndex("name", "name", { unique: false });
  };
}

// Daten mit Index durchsuchen
function searchData(searchTerm) {
  let transaction = db.transaction(["ProductStore"], "readonly");
  let objectStore = transaction.objectStore("ProductStore");
  let index = objectStore.index("name");

  let request = index.getAll(IDBKeyRange.bound(searchTerm, searchTerm + '\uffff'));

  request.onsuccess = function(event) {
    let results = event.target.result;
    console.log("Suchergebnisse:", results);
  };
}

// Beispielverwendung
createSearchIndex();

// Beispieldaten hinzufügen
let transaction = db.transaction(["ProductStore"], "readwrite");
let objectStore = transaction.objectStore("ProductStore");
objectStore.add({ id: 1, name: "Apfel", category: "Obst" });
objectStore.add({ id: 2, name: "Banane", category: "Obst" });
objectStore.add({ id: 3, name: "Orange", category: "Obst" });

// Suche durchführen
searchData("Apf");

Wir erstellen mit der Funktion createSearchIndex einen Index für das Feld "name" des "ProductStore"-Objektspeichers. Dies ermöglicht eine effiziente Suche basierend auf dem Produktnamen.

Die Funktion searchData führt eine Suche mithilfe des Index durch. Sie nimmt einen Suchbegriff als Eingabe und verwendet die Methode getAll mit einem IDBKeyRange, um alle Produkte zu finden, die dem Suchbegriff entsprechen.

In der Beispielverwendung erstellen wir den Suchindex, fügen einige Beispieldaten zum "ProductStore"-Objektspeicher hinzu und führen dann eine Suche nach Produkten mit "Apf" in ihrem Namen durch. Die Suchergebnisse werden in der Konsole protokolliert.

Dies sind nur einige Beispiele dafür, wie IndexedDB in praktischen Szenarien eingesetzt werden kann. Die Flexibilität und leistungsstarken Funktionen von IndexedDB machen es für eine Vielzahl von Anwendungsfällen geeignet, bei denen clientseitige Datenspeicherung und -verarbeitung erforderlich sind.