Die Indexed Database API (IndexedDB) ist eine Datenbank im Browser und kann nur lokal genutzt werden, um Daten für den einzelnen Nutzer schneller zu laden oder um Offline-Speichermöglichkeit zu bieten. Der Vorgänger von indexedDB ist die localStorage, mit der man auch Daten lokal im Browser speichern kann.

Die indexedDB ist sinnvoll, wenn du zum Beispiel eine PWA (Progressive Web App) erstellst, die auch offline nutzbar ist. Dann können hier Daten gespeichert werden und wenn der Nutzer wieder online ist, könnten diese Daten mit einer Datenbank im Internet synchronisiert werden.

Wir wollen uns die Nutzung der indexedDB an mehreren Beispielen anschauen.

Da die Nutzung der indexedDB in JavaScript sehr gewöhnungsbedürftig ist, wollen wir das JavaScript-Modul Dexie.js nutzen.

indexedDB mit Dexie.js

Am einfachsten ist die Nutzung der indexedDB mit Dexie.js indem du eine eigene JavaScript-Datei erstellst. Diese Datei kann dann in anderen Dateien eingebunden werden. Hier wird eine Datenbank „myTodoDatabase“ mit den Attributen „id, text, done“ erstellt. Das doppelte + vor id bedeutet, dass das Attribut „id“ der Primärschlüssel ist und automatisch inkrementiert wird.

import Dexie from "dexie";

const db = new Dexie("myTodoDatabase");
db.version(1).stores({
  // Primary key and indexed props
  todos: "++id, text, done",
});

Weitere Informationen: Erstellen von Datenbanken mit Dexie.js

Daten hinzufügen

Daten kannst du der Datenbank mit folgenden Befehlen hinzufügen:

async addNewTodoItemDB(todoText) {
	await db.todos.add({
		text: todoText,
		done: false,
	});
}

Weitere Informationen: Hinzufügen von Daten mit Dexie.js

Daten auslesen

Daten können von der indexedDB über verschiedene Arten mit einer SQL ähnlichen Syntax ausgelesen werden.

async loadData() {
	let myArray = [];
	myArray = await db.todos.toArray();
}
//ODER
async loadData() {
	let myArray = [];
	myArray = await db.todos.where(id).above(2).toArray();
}

Weitere Informationen: Auslesen von Daten mit Dexie.js

Daten aktualisieren

async handleUpdateItem(id) {
	await db.todos.update(id, {done: true});
},

Weitere Informationen: Aktualisieren von Daten mit Dexie.js

Daten löschen

async deleteItem(id) {
	await db.todos.delete(id);
}

Weitere Informationen: Löschen von Daten mit Dexie.js

Datenbank im Browser anzeigen

Die gespeicherten Daten kannst du im Browser einsehen, wenn du die Entwicklertools (Strg + Umschalttaste + J) deines Browsers öffnest und dann unter „Application > IndexedDB > Datenbankname“ gehst:

Beispiel: ToDo Items

Ich habe zum Probieren eine einfache Webseite mit unserem Code Editor gebaut, in der du ToDo-Items hinzufügen, anzeigen und entfernen kannst. Wenn du parallel die Entwicklertools öffnest, kannst du die Änderungen live mitverfolgen:

Beispiel: ToDo-Webseite mit IndexedDB

Beispiel: Bilder als Blob in der IndexedDB speichern

Mit der IndexedDB können auch Bilder lokal im Speicher des Browsers gespeichert werden. Hierzu habe ich ein Beispiel mit unserem Code Editor erstellt.

Hier kannst du Bilder „hochladen“ und dann auch gleich anzeigen lassen. Die Bilder sind nur in deinem Browser gespeichert und nicht im Internet.

Es gibt mehrere Möglichkeiten Bilder in der IndexedDB zu speichern, z.B.: als Blob oder als ArrayBuffer. Das Speichern und Laden als Blob funktioniert mit Safari und IOS nicht, darum habe ich zwei Beispiele erstellt:

1. Beispiel: Bilder in der IndexedDB speichern und laden (Blob)

2. Beispiel: Bilder in der IndexedDB speichern und laden (ArrayBuffer)

Links

• Dexie.js
• web.dev Best Practices for Using IndexedDB
• Dexie with Vue
• Informatik Biber