Javascript Session Storage

Javascript Session Storage – Daten im Browser speichern

Session Storage speichert Daten im Browser des Benutzers – genauso wie Local Storage – überlebt ein Reload und ein Restore der Seite, gilt aber nur, solange die Seite geöffnet ist.

Session Storage lebt genauso wie Local Storage nur im Client und wird nicht mit HTTP-Requests hin- und hergeschoben. Bei Session Storage entsteht eine neue Session, wenn die Seite in einem neuen Browserfenster geöffnet wird.

18-12-15 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Beschränkung auf ein Browserfenster

Genauso wie LocalStorage wird der Speicher im SessionStorage nur durch die Ressourcen des Browsers auf dem Gastrechner limitiert (5 bis 10 MB).

Die Beschränkung von Session Storage auf ein individuelles Fenster tritt z.B. der Falle entgegen, dass während eines Einkaufs bei mehreren geöffneten Tabs oder Browserfenstern der Kauf aus Versehen zweimal ausgelöst wird.

Drei Arten von Speicher im Browser: Local Storage, Session Storage und Cookies
LocalStorage vs SessionStorage vs Cookies
Local Storage reicht über alle Browserfenster, Session Storage gilt nur innerhalb eines Browserfensters.

Auf den Session Storage kann nur aus dem ursprünglichen Fenster zugegriffen werden, nicht aus anderen Fenstern oder Tabs (während auf ein Cookie in jedem Browserfenster und jedem Tab zugegriffen werden kann).

Wird ein weiteres Fenster oder Tab geöffnet, entsteht im nächsten Fenster ein eigener Kontext und die Anwendung in weiteren Fenstern läuft unabhängig von der Anwendung in diesem Fenster.

Jedes Browserfenster/Tab nutzt seinen eigenen Session Storage und kümmert sich nicht um weitere Fenster. Mit HTTP-Cookies wäre das Abfangen eines zusätzlich geöffneten Fensters ein mühsames Unterfangen.

Methoden für SessionStorage

Session Storage ist eine Zeichenkette. Wenn andere Datentypen gespeichert werden sollen, muss das Script die Konvertierung übernehmen.

//schreibt Werte in key
window.sessionStorage.setItem(key,value)

//liest Werte aus key
window.sessionStorage.getItem(key,value)

//löscht den Wert von key 
window.sessionStorage.removeItem(key)

//Löscht den SessionStorage
window.sessionStorage.clear()

Das explizite »window« vor den Aufruf kann weggelassen werden.

Die Methoden für das Schreiben von Daten, die Übernahme der Daten und das Löschen sind dieselben wie beim Local Storage – nur mit einem anderen Objekt, nämlich mit dem window.sessionStorage-Objekt.

Session Storage speichern und auslesen

// Prüfen ob sessionStorage.color existiert 
if ("color" in sessionStorage) {
    document.querySelector(".color").value = sessionStorage.color;
} 

// sessionStorage speichern
document.querySelector(".save").addEventListener ("click", function () {
	sessionStorage.setItem ("color", document.querySelector(".color").value);
})

Anstelle von sessionStorage.getItem ("color") kann die Kurzform sessionStorage.color verwendet werden.

sessionStorage testen

Testen in der Browser-Console – Entwicklertools – der Browser. In Safari unter Entwickler / Webinformationen / Speicher, in Chrome mit dem drei Punkten auf der rechten Seite des Browserfenster, Weitere Tools, Entwicklertools, dann unter Application / Storage.

SessionStorage / LocalStorage testen mit Developer Tools

SessionStorage und Sicherheit

Der SessionStorage nimmt mehr Informationen auf als Cookies, aber der Benutzer kann den Session Storage deaktivieren, löschen und auch manipulieren. Weder SessionStorage noch LocalStorage taugen für sensible Daten.

Es gibt keine standardisierte Methode, um den verfügbaren Speicherplatz zu erfragen. Der Check, ob Session Storage oder Lokal Storage unterstützt und verfügbar ist, ist trickreich bis trügerisch. Kann sein, dass der Browser localStorage / sessionStorage unterstützt, aber im Private Browsing nicht für Scripts freigibt oder den verfügbaren Platz auf Null setzt.

Bei größeren und komplexen Daten ist der Session Storage langsam und da alle Werte einfache Strings sind, müssen sie manuell in Boolean-, Integer- oder Float-Werte umgewandelt werden. Abhilfe bringt hier JSON.stringify / JSON.parse

Ein wichtiger Vorteil von Session Storage wie von Local Storage: Beides funktioniert auch Offline.