Start · Sprachen · JavaScript · Referenz · Window.sessionStorage

Window.sessionStorage

Eigenschaft

Die schreibgeschützte Eigenschaft <code>sessionStorage</code> greift auf ein <code>Storage</code>-Objekt der aktuellen Origin zu, dessen Daten nur für die Dauer der Seitensitzung erhalten bleiben.

Kategorie: web-api

Signatur

Window.sessionStorage

Beschreibung

Die schreibgeschützte Eigenschaft sessionStorage greift auf ein Session-Storage-Objekt der aktuellen Origin zu. sessionStorage ist ähnlich zu localStorage; der Unterschied besteht darin, dass localStorage nur nach Origin partitioniert ist, während sessionStorage sowohl nach Origin als auch nach Browser-Tabs (Top-Level-Browsing-Kontexten) partitioniert ist. Die Daten in sessionStorage werden nur für die Dauer der Seitensitzung aufbewahrt.

  • Immer wenn ein Dokument in einem bestimmten Tab im Browser geladen wird, wird eine eindeutige Seitensitzung erstellt und diesem Tab zugewiesen. Diese Seitensitzung ist nur in diesem speziellen Tab zugänglich. Das Hauptdokument und alle eingebetteten browsing contexts (iframes) werden nach ihrer Origin gruppiert, und jede Origin hat Zugriff auf ihren eigenen separaten Speicherbereich.
  • Wenn die Seite einen opener hat, ist sessionStorage zunächst eine Kopie des sessionStorage-Objekts des Openers. Sie sind jedoch weiterhin getrennt und Änderungen am einen wirken sich nicht auf das andere aus. Um zu verhindern, dass das sessionStorage kopiert wird, verwende eine der Techniken, die den opener entfernen (siehe Window.opener).
  • Eine Seitensitzung besteht, solange der Tab oder der Browser geöffnet ist, und überlebt Seiten-Neuladen und -Wiederherstellungen.
  • Das Öffnen einer Seite in einem neuen Tab oder Fenster erstellt eine neue Sitzung mit dem Wert des Top-Level-Browsing-Kontexts, was sich davon unterscheidet, wie Session-Cookies funktionieren.
  • Das Schließen des Tabs/Fensters beendet die Sitzung und löscht die Daten in sessionStorage.

Wert

Ein Storage-Objekt, das verwendet werden kann, um auf den Session-Storage-Bereich der aktuellen Origin zuzugreifen.

Ausnahmen

  • SecurityError – Wird in einem der folgenden Fälle ausgelöst:
    • Die Origin ist kein gültiges scheme/host/port-Tupel. Dies kann beispielsweise passieren, wenn die Origin die Schemata file: oder data: verwendet.
    • Die Anfrage verletzt eine Richtlinienentscheidung. Zum Beispiel hat der Benutzer den Browser so konfiguriert, dass die Seite keine Daten persistieren darf.
    Beachte, dass, wenn der Benutzer Cookies blockiert, Browser dies wahrscheinlich als Anweisung interpretieren, die Seite am Persistieren von Daten zu hindern.

Rückgabewert

Typ
Storage
Beschreibung
Ein Storage-Objekt für den Session-Storage-Bereich der aktuellen Origin.

Beispiele

Grundlegende Verwendung

// Save data to sessionStorage
sessionStorage.setItem("key", "value");

// Get saved data from sessionStorage
let data = sessionStorage.getItem("key");

// Remove saved data from sessionStorage
sessionStorage.removeItem("key");

// Remove all saved data from sessionStorage
sessionStorage.clear();

Text zwischen Aktualisierungen speichern

// Get the text field that we're going to track
let field = document.getElementById("field");

// See if we have an autosave value
// (this will only happen if the page is accidentally refreshed)
if (sessionStorage.getItem("autosave")) {
  // Restore the contents of the text field
  field.value = sessionStorage.getItem("autosave");
}

// Listen for changes in the text field
field.addEventListener("change", () => {
  // And save the results into the session storage object
  sessionStorage.setItem("autosave", field.value);
});

// Wichtig · Fallstricke

Das folgende Beispiel speichert automatisch den Inhalt eines Textfeldes und stellt den Inhalt des Textfeldes bei einer Browser-Aktualisierung wieder her, damit keine Eingaben verloren gehen.