SessionStorage

Definition: SessionStorage ist Teil der Web Storage API und ermöglicht das Speichern von Schlüssel-Wert-Paaren für die Dauer einer Browser-Tab-Session. Im Unterschied zu LocalStorage werden SessionStorage-Daten automatisch gelöscht, sobald der Tab oder das Browserfenster geschlossen wird. Entscheidend: Jeder Tab hat seinen eigenen, vollständig isolierten SessionStorage – zwei Tabs mit derselben Website teilen keine SessionStorage-Daten. Die API ist identisch mit LocalStorage: setItem(), getItem(), removeItem(), clear(). Maximal 5–10 MB pro Origin. Im Marketing-Kontext ist SessionStorage ideal für temporäre Session-Daten wie Formularfortschritte in mehrstufigen Leadformularen, Checkout-States und Kampagnen-Parameter die nur für die aktuelle Sitzung relevant sind.

Erläuterung

SessionStorage ist der «Kurzzeitgedächtnis»-Speicher des Browsers – alles was nur für den aktuellen Tab und die aktuelle Sitzung relevant ist, gehört hier rein. Das macht ihn von Haus aus sicherer als LocalStorage für sensible temporäre Daten, da er automatisch bereinigt wird. Die Tab-Isolation ist dabei sowohl Vor- als auch Nachteil: Kein Cross-Tab-Zugriff aber auch kein versehentliches Leak in andere Tabs.

SessionStorage vs. LocalStorage

Lebensdauer: SessionStorage: nur Tab-Session (Tab schließen = Daten weg); LocalStorage: dauerhaft bis zur expliziten Löschung oder Browser-Datenschutz-Bereinigung (Safari ITP: 7 Tage); Seite neu laden innerhalb des Tabs: SessionStorage bleibt erhalten; Browser-Restart: SessionStorage weg (außer «Session Restore»-Feature)
Tab-Isolation: SessionStorage: jeder Tab hat eigenen Speicher; zwei Tabs gleicher Domain: kein Datenaustausch; window.open() aus Tab: neuer Tab erhält Kopie des SessionStorage zum Zeitpunkt des Öffnens (danach unabhängig); LocalStorage: site-weit geteilt zwischen allen Tabs gleicher Origin
Wann welches: SessionStorage für: Formular-Fortschritt, Checkout-State, temporäre Filter, aktuelle Suchanfrage, Wizard-Schritt-Daten; LocalStorage für: Nutzereinstellungen (Theme, Sprache), zuletzt gesehene Produkte, A/B-Test-Variante, Login-Zustand-Indikatoren

API und Implementierung

Grundmethoden: sessionStorage.setItem('checkout_step', '3'); sessionStorage.getItem('checkout_step'); // '3' oder null; sessionStorage.removeItem('checkout_step'); sessionStorage.clear(); // gesamten SessionStorage leeren; sessionStorage.length; sessionStorage.key(0); // ersten Key abrufen
Objekte speichern: sessionStorage.setItem('form_data', JSON.stringify({name: 'Max', email: 'max@...'})); const data = JSON.parse(sessionStorage.getItem('form_data') || '{}'); JSON-Serialisierung für komplexe Objekte notwendig; null-Check und JSON-Error-Handling implementieren (QuotaExceededError bei vollem Speicher)
Storage Event: window.addEventListener('storage', e => {}): feuert NUR bei LocalStorage-Änderungen anderer Tabs; SessionStorage-Änderungen lösen kein storage-Event aus (Tab-Isolation); für SessionStorage-Updates: nur im gleichen Tab via direktem Zugriff

Anwendungsfälle im Marketing

Multi-Step-Leadformular: Formularfelder Schritt für Schritt in SessionStorage speichern; bei Browser-Zurück-Navigation: Felder vorausgefüllt; bei Page-Refresh: Daten erhalten; bei Tab-Schließen: automatisch bereinigt (kein Datenschutzproblem); Konversion erhöhen durch keine verlorenen Eingaben
Checkout-State: Aktueller Schritt im Checkout (Adresse/Zahlung/Übersicht); Warenkorb-Snapshot für Page-Reload-Stabilität; Zahlungsmethoden-Auswahl temporär speichern; Tab-Schließen = SessionStorage geleert = kein veralteter Checkout-State beim nächsten Besuch
Kampagnen-Parameter-Passing: UTM-Parameter aus Landing URL in SessionStorage; beim Conversion-Event in dataLayer pushen für Attribution; sessionStorage.getItem('utm_source') für First-Click-Attribution in der Sitzung; robuster als URL-Parameter-Weitergabe durch Seiten
Duplicate-Submit-Prevention: Nach Formular-Submit: Flag setzen sessionStorage.setItem('form_submitted', 'true'); auf Folgeseite prüfen; verhindert doppelte Submissions bei Browser-Zurück-Klick; automatisch bereinigt wenn Nutzer Tab schließt und neu beginnt

Sicherheit und Datenschutz

Sicherheitsaspekte: SessionStorage via JavaScript zugänglich – wie LocalStorage XSS-verwundbar; keine sensiblen Credentials (Passwörter, Zahlungsdaten) speichern; für Formular-Zwischenzustände mit personenbezogenen Daten (Name, E-Mail): Tab-Isolation und automatische Bereinigung reduzieren Risiko gegenüber LocalStorage; trotzdem: minimal notwendige Daten speichern
DSGVO: SessionStorage-Daten bleiben lokal im Browser des Nutzers; kein Server-Transfer außer bei explizitem Formular-Submit; kein Cookie-Consent für rein technisch-notwendige SessionStorage-Nutzung (z. B. Formular-State); Tracking-relevante Daten in SessionStorage können Consent-pflichtig sein

Praxistipp: Implementieren Sie SessionStorage für alle mehrstufigen Formulare und Checkout-Prozesse: Nach jedem Schritt die Feldinhalte in SessionStorage sichern, bei Navigation zurück auslesen. Das verhindert Datenverlust bei versehentlichem Browser-Zurück-Klick – ein häufiger Abbruch-Grund im Checkout. Wichtig: Sichern Sie beim Lesen von SessionStorage immer gegen null und JSON-Parse-Fehler ab (try/catch): const data = (() => { try { return JSON.parse(sessionStorage.getItem('form_data')); } catch { return {}; }})(); Diese Robustheit verhindert JavaScript-Fehler in Private-Browsing-Modi.