JavaScript Academy · Lektion

Daten speichern und lesen

Verwenden Sie setItem, getItem und removeItem.

Daten speichern und lesen ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 1 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.

Key-Value-Speicher im Browser

Web Storage stellt jeder Origin einen einfachen Key-Value-Speicher im Browser bereit. Die beiden APIs localStorage und sessionStorage verwenden dieselben Methoden und speichern ausschließlich Zeichenketten.

Mit setItem schreiben

Speichern Sie einen Wert mit setItem(key, value). Beide Argumente sind Zeichenketten.

localStorage.setItem("theme", "dark");
localStorage.setItem("username", "ada");

Mit getItem lesen

Rufen Sie einen Wert mit getItem(key) ab. Wenn der Schlüssel nicht existiert, wird null und nicht undefined zurückgegeben.

const theme = localStorage.getItem("theme"); // "dark"
const missing = localStorage.getItem("nope"); // null

Zugriff über Eigenschaften

Sie können Werte auch wie Objekteigenschaften lesen und schreiben. Die Methodenform ist jedoch eindeutiger und vermeidet Konflikte mit integrierten Namen. Bevorzugen Sie die Methoden.

localStorage.theme = "light";       // works
console.log(localStorage.theme);    // "light"

Ein Element entfernen

Löschen Sie einen einzelnen Eintrag mit removeItem(key). Das Entfernen eines nicht vorhandenen Schlüssels hat keine Auswirkungen.

localStorage.removeItem("username");

Alles löschen

clear() löscht alle Schlüssel für den aktuellen Origin. Verwenden Sie die Methode mit Bedacht; es gibt keine Rückgängig-Funktion.

localStorage.clear();

Alles ist eine Zeichenkette

Der Speicher enthält ausschließlich Zeichenketten. Zahlen und boolesche Werte werden in Text umgewandelt. Lesen Sie sie als Zeichenketten zurück und konvertieren Sie sie bei Bedarf.

localStorage.setItem("count", 5);
const n = localStorage.getItem("count"); // "5" (string)
const num = Number(n);                    // 5

Schlüssel zählen

Die Eigenschaft length gibt an, wie viele Schlüssel gespeichert sind, und key(index) liefert den Namen an einer bestimmten Position. Das ist nützlich zum Durchlaufen des Speichers.

console.log(localStorage.length);
const firstKey = localStorage.key(0);

Den Speicher durchlaufen

Durchlaufen Sie alle gespeicherten Schlüssel mit length und key(). Lesen Sie dabei jeden Wert aus.

for (let i = 0; i < localStorage.length; i++) {
  const k = localStorage.key(i);
  console.log(k, localStorage.getItem(k));
}

Vorhandensein prüfen

Da ein fehlender Schlüssel null zurückgibt, können Sie mit einem einfachen Vergleich prüfen, ob er vorhanden ist.

if (localStorage.getItem("token") !== null) {
  console.log("user has a token");
}

Nur derselbe Origin

Der Speicher ist auf den Origin (Schema + Host + Port) beschränkt. Eine Website kann nicht auf den Speicher einer anderen Website zugreifen, und http und https gelten als unterschiedliche Origins.

Kurzer Test

Web Storage lesen und schreiben.

Zusammenfassung

Web Storage ist ein aus Zeichenketten bestehender Key-Value-Speicher pro Origin. Verwenden Sie setItem, getItem (gibt bei Abwesenheit null zurück), removeItem und clear. Durchlaufen Sie ihn mit length und key(i). Alles ist eine Zeichenkette, daher müssen Sie Typen selbst konvertieren. Außerdem ist der Speicher pro Origin isoliert.

Häufig gestellte Fragen

Ist die Lektion „Daten speichern und lesen“ kostenlos?

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

Verwenden Sie setItem, getItem und removeItem. 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 1 von 4.

Wie lange dauert die Lektion „Daten speichern und lesen“?

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