Mit Web Storage können Daten im Browser gespeichert werden. Im Gegensatz zu Cookies, die bei jedem Request zum Server geschickt werden, erfolgt der Zugriff ausschließlich über den Browser.
Web storage bietet zwei Speichermechanismen:
Local storage
Session storage
Local storage
Daten im Local storage werden einem Ursprung ("origin") zugeordnet, also der Kombination aus Protokoll (z.B.: http oder https), Hostname und Portnummer. Alle Scripte desselben Ursprungs dürfen nur auf Daten desselben Ursprungs zugreifen (Same-origin-policy).
Daten im Local storage bleiben nach dem Beenden des Browser erhalten.
//Speichern von Daten
localStorage.setItem('key', 'value');
//Zugriff auf Daten
const localStorageValue = localStorage.getItem('key');
Session storage
Daten im Session storage werden pro Tab / Fenster gespeichert. Wird ein Tab geschlossen, werden auch alle dem Tab zugeordneten Daten im Session Storage entfernt. So ist es möglich unterschiedliche Anwendungszustände in unterschiedlichen Tabs leicht zu verwalten. Daten im Session storage können ebenfalls nur von Scripte desselben Ursprungs gesehen oder manipuliert werden (Same-origin-policy).
//Speichern von Daten in der aktuellen Sitzung (Session)
sessionStorage.setItem('key', 'value');
//Zugriff auf Daten der aktuellen Sitzung (Session)
const sessionValue = sessionStorage.getItem('key');
Datentypen
Achtung: Es können nur Strings im local storage und im session storage gespeichert werden.
Links
Wiki und Lernwerkzeug vereint!
