JavaScript Academy · Lektion

localStorage und sessionStorage

Wählen Sie die passende Speicherdauer.

localStorage und sessionStorage ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 2 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.

Zwei Speicher, dieselbe API

localStorage und sessionStorage verwenden identische Methoden. Der Unterschied liegt in der Lebensdauer: also darin, wie lange die Daten erhalten bleiben.

localStorage bleibt erhalten

Daten in localStorage bleiben erhalten, bis sie ausdrücklich entfernt werden. Sie überstehen das Neuladen von Seiten, das Schließen von Tabs und Neustarts des Browsers.

localStorage.setItem("theme", "dark");
// Still there days later, after closing the browser

sessionStorage ist temporär

Daten in sessionStorage bleiben nur während der Tabsitzung erhalten. Beim Schließen des Tabs werden sie gelöscht.

sessionStorage.setItem("step", "2");
// Gone once the tab is closed

Isolation pro Tab

Jeder Browser-Tab erhält einen eigenen sessionStorage. Zwei Tabs derselben Website haben getrennte Sitzungsspeicher und teilen ihre Daten NICHT.

localStorage wird geteilt

Im Gegensatz dazu teilen sich alle Tabs und Fenster desselben Origins einen gemeinsamen localStorage. Eine Schreiboperation in einem Tab ist in den anderen sichtbar.

Verhalten beim Neuladen

Beim normalen Neuladen bleibt sessionStorage für diesen Tab erhalten. Beim Duplizieren eines Tabs wird die Sitzung möglicherweise kopiert, aber ein neu geöffneter Tab beginnt leer.

sessionStorage.setItem("draft", text);
// Survives F5 reload in the same tab

Zwischen den Speichern wählen

Verwenden Sie localStorage für langfristige Einstellungen (Theme, Sprache). Verwenden Sie sessionStorage für vorübergehenden, tabbezogenen Zustand (einen Schritt in einem Assistenten oder einen einmaligen Formularentwurf).

Sicherheitshinweis

Keiner der beiden Speicher ist sicher. Beide können von jedem Skript auf der Seite gelesen werden. Speichern Sie daher niemals Passwörter oder vertrauliche Tokens, die privat bleiben müssen.

Überall dieselben Methoden

Da die APIs übereinstimmen, können Sie den einen Speicher durch Ändern des Objektnamens gegen den anderen austauschen. Code, der für den einen geschrieben wurde, funktioniert auch mit dem anderen.

const store = useSession ? sessionStorage : localStorage;
store.setItem("k", "v");

Privates Browsen

Im privaten beziehungsweise Inkognito-Modus werden beide Speicher normalerweise beim Ende der Sitzung gelöscht; einige Browser schränken sie außerdem ein oder deaktivieren sie. Berücksichtigen Sie immer die Möglichkeit eines fehlgeschlagenen Schreibvorgangs.

try {
  localStorage.setItem("k", "v");
} catch (e) {
  console.log("storage unavailable");
}

Getrennte Kontingente

Jeder Speicher verfügt über ein eigenes Kontingent (üblicherweise etwa 5 MB pro Origin). Wenn Sie den sessionStorage füllen, wird das Kontingent von localStorage nicht belastet.

Kurzer Test

Die beiden Speicher vergleichen.

Zusammenfassung

Beide Speicher verwenden dieselbe API, unterscheiden sich aber in ihrer Lebensdauer. localStorage bleibt über Sitzungen hinweg erhalten und wird von allen Tabs eines Origins gemeinsam genutzt; sessionStorage gilt nur für die Sitzung eines Tabs und ist pro Tab isoliert. Keiner der beiden Speicher ist sicher, und jeder verfügt über ein eigenes Kontingent von etwa 5 MB.

Häufig gestellte Fragen

Ist die Lektion „localStorage und sessionStorage“ kostenlos?

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

Wählen Sie die passende Speicherdauer. 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 2 von 4.

Wie lange dauert die Lektion „localStorage und sessionStorage“?

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