HTML - IndexedDB: Ihre persönliche Datenbank im Browser

Hallo, zukünftige Web-Entwickler! Heute tauchen wir in die aufregende Welt der IndexedDB ein. Als Ihr freundlicher Nachbarschafts-EDV-Lehrer bin ich hier, um Sie auf dieser Reise zu begleiten, selbst wenn Sie noch nie eine Zeile Code geschrieben haben. Also, holen Sie sich Ihre virtuellen Helme und los geht's!

HTML - IndexedDB

Was ist IndexedDB?

IndexedDB ist wie eine winzige Datenbank, die direkt in Ihrem Webbrowser lebt. Stellen Sie sich vor, Sie haben einen kleinen Aktenkasten in Ihrem Computer, der alle möglichen Informationen für Ihre Webanwendungen speichern und organisieren kann. Cool, oder?

Warum IndexedDB verwenden?

Vielleicht fragen Sie sich, "Warum brauchen wir eine andere Möglichkeit, Daten zu speichern?" Nun, lassen Sie mich Ihnen eine kleine Geschichte erzählen. In der guten alten Zeit haben wir uns auf Cookies und lokalen Speicher verlassen, um Daten im Browser zu speichern. Aber das war so, als wollte man ein Elefant in eine Streichholzschachtel passen - begrenzt und nicht sehr flexibel.

Hier ist, warum IndexedDB der Superheld des Browser-Speichers ist:

Funktion	Beschreibung
Speicherkapazität	Kann mehr Daten speichern als Cookies oder lokaler Speicher
Datentypen	Unterstützt verschiedene Datentypen, einschließlich Dateien und Blob
Indizierung	Ermöglicht schnelle Suchen durch Ihre Daten
Transaktionen	Stellt die Datenintegrität mit transaktionsbasierten Operationen sicher
Asynchron	Freezt Ihre App nicht, während Sie mit Daten arbeiten

Erste Schritte mit IndexedDB

Lassen Sie uns die Ärmel hochkrempeln und mit ein wenig Code beginnen. Machen Sie sich keine Sorgen, wenn es initially einschüchternd aussieht - wir werden es Schritt für Schritt auseinandernehmen.

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

request.onerror = function(event) {
console.error("Datenbankfehler: " + event.target.error);
};

request.onsuccess = function(event) {
db = event.target.result;
console.log("Datenbank erfolgreich geöffnet");
};

request.onupgradeneeded = function(event) {
db = event.target.result;
const objectStore = db.createObjectStore("students", { keyPath: "id" });
console.log("Objekt-Speicher erstellt");
};

Wow! Das ist viel auf einmal, oder? Lassen Sie uns das auseinandernehmen:

Wir beginnen mit der Deklaration einer Variablen db, um unsere Datenbankverbindung zu speichern.
Wir verwenden indexedDB.open() um eine Datenbank namens "MyFirstDatabase" zu öffnen oder zu erstellen.
Wir richten drei Ereignis-Handler ein:

onerror: Dies wird ausgeführt, wenn etwas schiefgeht.
onsuccess: Dies wird ausgeführt, wenn die Datenbank erfolgreich geöffnet wird.
onupgradeneeded: Dies wird ausgeführt, wenn die Datenbank erstellt oder aktualisiert wird.

Denken Sie an onupgradeneeded als den Architekten der Datenbank. Hier gestalten wir unsere Datenbankstruktur.

Daten in IndexedDB hinzufügen

Nun, da wir unsere Datenbank eingerichtet haben, lassen Sie uns einige Daten hinzufügen. Stellen Sie sich vor, wir erstellen ein Studentenverwaltungssystem.

function addStudent(student) {
const transaction = db.transaction(["students"], "readwrite");
const objectStore = transaction.objectStore("students");
const request = objectStore.add(student);

request.onerror = function(event) {
console.log("Fehler beim Hinzufügen des Studenten: " + event.target.error);
};

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

// Verwendung
addStudent({ id: 1, name: "Alice", grade: "A" });
addStudent({ id: 2, name: "Bob", grade: "B" });

Hier ist, was passiert:

Wir erstellen eine Transaktion - denken Sie daran als eine sichere Röhre für unsere Daten.
Wir holen den Objekt-Speicher (wie eine Tabelle in einer herkömmlichen Datenbank).
Wir verwenden add() um unsere Studentendaten einzufügen.
Wir richten Erfolg- und Fehler-Handler ein, um zu wissen, ob es funktioniert hat.

Daten aus IndexedDB abrufen

Was nützt gespeicherte Daten, wenn wir sie nicht abrufen können? Lassen Sie uns unsere Studentendaten abholen:

function getStudent(id) {
const transaction = db.transaction(["students"]);
const objectStore = transaction.objectStore("students");
const request = objectStore.get(id);

request.onerror = function(event) {
console.log("Fehler beim Abrufen des Studenten: " + event.target.error);
};

request.onsuccess = function(event) {
if (request.result) {
console.log("Student gefunden:", request.result);
} else {
console.log("Student nicht gefunden");
}
};
}

// Verwendung
getStudent(1);

Diese Funktion ist wie eine Bibliothekarin, die ein Buch für Sie holt:

Wir starten eine schreibgeschützte Transaktion (wir ändern nichts).
Wir verwenden get() um den Studenten nach seiner ID abzurufen.
Wenn wir den Studenten finden, protokollieren wir ihre Details; andernfalls sagen wir, dass sie nicht gefunden wurden.

Daten in IndexedDB aktualisieren

Schüler verbessern sich, Noten ändern sich. Lassen Sie uns unsere Aufzeichnungen aktualisieren:

function updateStudent(id, newGrade) {
const transaction = db.transaction(["students"], "readwrite");
const objectStore = transaction.objectStore("students");
const request = objectStore.get(id);

request.onerror = function(event) {
console.log("Fehler beim Abrufen des Studenten zum Aktualisieren: " + event.target.error);
};

request.onsuccess = function(event) {
const data = event.target.result;
data.grade = newGrade;

const updateRequest = objectStore.put(data);

updateRequest.onerror = function(event) {
console.log("Fehler beim Aktualisieren des Studenten: " + event.target.error);
};

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

// Verwendung
updateStudent(1, "A+");

Diese Funktion ist wie ein Lehrer, der ein Notizenbuch aktualisiert:

Wir holen die aktuellen Daten des Schülers.
Wir ändern die Note.
Wir verwenden put() um die aktualisierten Daten zurück in die Datenbank zu speichern.

Daten aus IndexedDB löschen

Manchmal müssen wir Daten entfernen. Lassen Sie uns eine Funktion hinzufügen, um einen Studenten zu entfernen:

function deleteStudent(id) {
const transaction = db.transaction(["students"], "readwrite");
const objectStore = transaction.objectStore("students");
const request = objectStore.delete(id);

request.onerror = function(event) {
console.log("Fehler beim Löschen des Studenten: " + event.target.error);
};

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

// Verwendung
deleteStudent(2);

Dies ist wie das Löschen eines Eintrags aus unseren Schülerakten:

Wir starten eine "readwrite"-Transaktion, weil wir Daten ändern.
Wir verwenden die delete()-Methode, um den Studenten nach seiner ID zu entfernen.
Wir behandeln Erfolg- und Fehlerfälle, um zu wissen, ob es funktioniert hat.

Schlussfolgerung

Glückwunsch! Sie haben gerade Ihre ersten Schritte in die Welt der IndexedDB gemacht. Wir haben das Erstellen einer Datenbank, Hinzufügen, Abrufen, Aktualisieren und Löschen von Daten behandelt. Dies sind die grundlegenden Operationen, die Sie bei der Arbeit mit IndexedDB verwenden werden.

Denken Sie daran, Übung macht den Meister. Versuchen Sie, eigene kleine Projekte mit IndexedDB zu erstellen. Vielleicht eine To-Do-Liste-App oder ein persönliches Tagebuch. Je mehr Sie damit spielen, desto wohler werden Sie sich fühlen.

IndexedDB mag zunächst komplex erscheinen, aber es ist ein leistungsstarkes Werkzeug, das Ihre Webanwendungen auf das nächste Level heben kann. Es ist wie eine Superkraft - die Fähigkeit, große Mengen an Daten direkt im Browser zu speichern und zu verwalten.

Weiterschreiben, neugierig bleiben und Spaß dabei haben! Wer weiß? Die nächste große Web-App könnte gerade an Ihren Fingern entlanglaufen.

Credits: Image by storyset

Vorheriges Tutorial:

HTML - Mikrodaten

Nächstes Tutorial:

HTML - Web-Nachrichten