JavaScript LocalStorage, SessionStorage
JavaScript localStorage und sessionStorage: Daten speichern, Objekte mit JSON sichern, das storage-Event nutzen, Fehler behandeln und die richtige Wahl treffen.
localStorage und sessionStorage sind die beiden Objekte, aus denen die Web Storage API besteht — der einfachste Weg, Daten im Browser über Seitenladevorgänge hinaus zu speichern. Beide speichern Informationen als string-Schlüssel/Wert-Paare, die an den Ursprung der Seite (Protokoll + Host + Port) gebunden sind, und beide bieten exakt dieselben Methoden. Der einzige Unterschied liegt darin, wie lange die Daten erhalten bleiben: localStorage bewahrt sie auf unbestimmte Zeit, während sessionStorage sie verwirft, sobald der Tab geschlossen wird.
Diese Seite behandelt die vollständige API, wie Objekte sicher mit JSON gespeichert werden, wie mit dem storage-Event auf Änderungen in anderen Tabs reagiert werden kann, wie Fehler dieser APIs behandelt werden und wann ein leistungsfähigerer Datenspeicher sinnvoller ist.
Speichern Sie niemals sensible Informationen (Passwörter, Tokens, persönliche Daten) in localStorage oder sessionStorage. Jedes JavaScript, das auf der Seite ausgeführt wird — einschließlich Drittanbieter-Skripte — kann diese Daten lesen, und sie sind vollständig Cross-Site-Scripting-Angriffen (XSS) ausgesetzt.
LocalStorage in JavaScript verstehen
localStorage speichert Daten im Browser des Benutzers dauerhaft, ohne Ablaufdatum. Die Daten überleben das Schließen des Tabs, das Schließen des Browsers und sogar einen Neustart des Rechners — sie bleiben erhalten, bis Ihr Code (oder der Benutzer) sie löscht. Die Daten sind auf den Ursprung beschränkt, sodass https://example.com nicht lesen kann, was https://other.com gespeichert hat.
So wird LocalStorage verwendet
Die API ist überschaubar. Sie schreiben ein Paar mit setItem(key, value), lesen es mit getItem(key) zurück und löschen es mit removeItem(key). Das Lesen eines nicht vorhandenen Schlüssels gibt null zurück (nicht undefined). Die API bietet außerdem:
clear()— entfernt jeden Eintrag für diesen Ursprung.key(index)— gibt den Namen des Schlüssels an einem bestimmten Index zurück.length— die Anzahl der gespeicherten Einträge.- ein
storage-Event, das abgehört werden kann, um Änderungen in anderen Tabs zu erkennen.
Storage-Operationen sind synchron und laufen im Haupt-Thread. Das Lesen oder Schreiben großer Datenmengen kann daher das UI-Rendering blockieren. Für größere oder strukturierte Daten empfiehlt sich IndexedDB.
Objekte und Arrays mit JSON speichern
Der häufigste Fehler bei der Web Storage API ist, zu vergessen, dass alles als string gespeichert wird. Wenn Sie ein object an setItem übergeben, wird es stillschweigend mit toString() konvertiert, was den nutzlosen Wert "[object Object]" liefert. Die Lösung besteht darin, beim Schreiben mit JSON.stringify zu serialisieren und beim Lesen mit JSON.parse zu deserialisieren.
Mehr zur Konvertierung von Werten in und aus Strings erfahren Sie unter Working with JSON.
Gespeicherte Einträge durchlaufen
Verwenden Sie length zusammen mit key(index), um alle Einträge im Storage zu durchlaufen, oder lesen Sie die Schlüssel mit Object.keys:
Praktische Anwendung: Einen Theme-Switcher mit LocalStorage erstellen
Stellen Sie sich vor, Sie möchten das bevorzugte Theme des Benutzers (Hell oder Dunkel) speichern, damit es über Sitzungen hinaus erhalten bleibt. Das folgende Beispiel kombiniert HTML, CSS und JavaScript der Einfachheit halber in einem einzigen Block.
<style>
:root {
--bg-color: #ffffff;
--text-color: #000000;
}
.dark {
--bg-color: #333333;
--text-color: #ffffff;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
transition: background-color 0.5s, color 0.5s;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
</style>
<body>
<button onclick="toggleTheme()">Toggle Theme</button>
<script>
function setTheme(themeName) {
localStorage.setItem('theme', themeName);
document.documentElement.className = themeName;
}
function toggleTheme() {
var currentTheme = localStorage.getItem('theme') === 'dark' ? 'dark' : 'light';
if (currentTheme === 'light') {
setTheme('dark');
} else {
setTheme('light');
}
}
function loadTheme() {
var theme = localStorage.getItem('theme') || 'light';
setTheme(theme);
}
// Initial theme load
loadTheme();
</script>
</body>Dieses Skript prüft, ob ein Theme in LocalStorage gespeichert ist, und verwendet andernfalls 'light' als Standard. Anschließend wird das Theme angewendet, indem der Klassenname des HTML-Wurzelelements gesetzt wird, sodass CSS die Stile entsprechend anpassen kann.
SessionStorage: Temporäre Datenspeicherung in JavaScript
Während LocalStorage für die Speicherung von Daten ohne Ablaufdatum konzipiert ist, bietet SessionStorage eine Möglichkeit, Daten für die Dauer der Sitzung einer Seite zu speichern. In SessionStorage gespeicherte Daten werden gelöscht, wenn die Seitensitzung endet — das heißt, wenn der Tab oder das Fenster geschlossen wird.
So wird SessionStorage verwendet
Nachfolgend ein einfaches Beispiel für die Verwendung von SessionStorage. Die Methoden und die Syntax sind identisch mit localStorage — nur die Lebensdauer unterscheidet sich. Ein sessionStorage-Wert ist außerdem pro Tab beschränkt: Das Öffnen derselben Website in einem neuen Tab beginnt mit einem leeren sessionStorage, während ein neuer Tab dasselbe localStorage teilt.
Beispiel: SessionStorage für die automatische Speicherung von Formulardaten
Stellen Sie sich vor, Sie haben ein Formular, das ein Benutzer ausfüllen möchte, aber es besteht die Gefahr, dass er den Browser versehentlich schließt. Mit SessionStorage können Sie die Formulardaten vorübergehend speichern.
<body>
<div>Start writing an email address in the following input. Refresh the page in the middle of your typing, and you'll see that the page remembers what you entered before.</div>
<br />
<input type="email" id="email"/>
</body>
<script>
window.onload = function() {
const email = sessionStorage.getItem('email');
if (email) {
alert('email found from session storage: ' + email);
document.getElementById('email').value = email;
}
document.getElementById('email').oninput = function() {
sessionStorage.setItem('email', this.value);
};
};
</script>Dieser Code lädt beim Laden der Seite automatisch eine gespeicherte E-Mail-Adresse und aktualisiert den SessionStorage-Eintrag bei jeder Änderung des E-Mail-Felds. Zum Testen klicken Sie auf die Schaltfläche „Try it yourself", geben Sie etwas in das Eingabefeld ein und laden Sie die Seite neu. Der Wert bleibt nach dem Neuladen erhalten.
Beachten Sie immer die Größenbeschränkungen, bevor Sie Daten speichern (in der Regel etwa 5 MB für LocalStorage und SessionStorage).
LocalStorage vs. SessionStorage
Beide Objekte teilen dieselbe API, denselben ursprungsgebundenen Gültigkeitsbereich und dasselbe string-basierte Speichermodell. Die praktischen Unterschiede betreffen die Lebensdauer und die Sichtbarkeit:
| Merkmal | localStorage | sessionStorage |
|---|---|---|
| Lebensdauer | Bis zur expliziten Löschung | Bis zum Schließen des Tabs |
| Übersteht Tab-/Browser-Neustart | Ja | Nein |
| Zwischen Tabs desselben Ursprungs geteilt | Ja | Nein (jeder Tab ist isoliert) |
| Kapazität | ~5 MB | ~5 MB |
Löst das storage-Event in anderen Tabs aus | Ja | Nein |
Verwenden Sie sessionStorage, wenn die Daten nur für den aktuellen Besuch relevant sind — etwa bei einem mehrstufigen Assistenten, einem laufenden Formular oder einer Scroll-Position. Nutzen Sie localStorage für Einstellungen und andere Daten, die zwischen Besuchen erhalten bleiben sollen.
Auf Änderungen mit dem storage-Event reagieren
Wenn sich localStorage in einem Tab ändert, löst der Browser ein storage-Event in jedem anderen Tab desselben Ursprungs aus (jedoch nicht in dem Tab, der die Änderung vorgenommen hat). Dies ist die Standardmethode, um mehrere Tabs synchron zu halten — zum Beispiel, um den Benutzer überall abzumelden, wenn er sich in einem Tab abmeldet.
window.addEventListener('storage', (event) => {
console.log('Key changed:', event.key);
console.log('Old value:', event.oldValue);
console.log('New value:', event.newValue);
console.log('URL of the page that made the change:', event.url);
});
// In another tab, this would trigger the handler above:
// localStorage.setItem('theme', 'dark');Die Eigenschaften key, oldValue und newValue des Event-Objekts zeigen genau an, was sich geändert hat. Beachten Sie, dass sessionStorage dieses Event in anderen Tabs nicht auslöst, da seine Daten nie geteilt werden.
Fehler und Sonderfälle behandeln
Storage-Aufrufe können Ausnahmen werfen, daher sollte Produktionscode nicht davon ausgehen, dass sie immer erfolgreich sind:
- Kontingent überschritten. Das Schreiben über das ~5-MB-Limit hinaus wirft einen
QuotaExceededError. Umschließen Sie Schreibvorgänge mittry...catch, wenn der Wert groß sein könnte. - Deaktiviert oder privater Modus. Manche Browser (oder strenge Datenschutzeinstellungen) machen Storage nicht verfügbar, und selbst der Zugriff auf
localStoragekann einenSecurityErrorauslösen. Prüfen Sie die Verfügbarkeit, bevor Sie sich darauf verlassen.
Für größere Datensätze, komplexe Abfragen oder die Speicherung von Binärdaten ist eine leistungsfähigere clientseitige Datenbank wie IndexedDB besser geeignet. Wenn Daten automatisch mit jeder Anfrage an den Server gesendet werden sollen, verwenden Sie stattdessen Cookies. Mit der Storage API können Sie außerdem die verbleibende Kapazität prüfen und dauerhafte Speicherung anfordern.
Fazit
LocalStorage und SessionStorage bieten leistungsstarke Möglichkeiten zur Verbesserung der Benutzererfahrung durch effizientes Datenmanagement in Webanwendungen. Wenn Entwickler ihre Möglichkeiten und Grenzen verstehen, können sie fundierte Entscheidungen darüber treffen, wie diese Werkzeuge in ihren Projekten am besten eingesetzt werden.