Beschränkung auf ein Browserfenster
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. Und so 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.
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 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.
