JavaScript LocalStorage, SessionStorage
In der Webentwicklung ist das effiziente und sichere Speichern von Daten auf der Client-Seite von entscheidender Bedeutung. JavaScript bietet dafür zwei leistungsstarke Tools: LocalStorage und SessionStorage. Dieser Artikel geht tief auf diese Technologien ein, bietet praktische Code-Beispiele und Expertenwissen, um Entwicklern zu helfen, diese Funktionen optimal zu nutzen.
WARNING
Speichern Sie niemals sensible Informationen oder personenbezogene Daten ohne Verschlüsselung in localStorage oder sessionStorage!
LocalStorage in JavaScript verstehen
LocalStorage ermöglicht es Ihnen, Daten dauerhaft im Browser des Benutzers zu speichern, ohne Ablaufdatum. Das bedeutet, dass die in LocalStorage gespeicherten Daten auch nach dem Schließen und erneuten Öffnen des Browserfensters verfügbar bleiben.
Verwendung von LocalStorage
Hier ist ein einfaches Beispiel, das zeigt, wie Daten in LocalStorage gespeichert werden. Sie können jedes Schlüssel-Wert-Paar mit der Methode setItem festlegen und jeden Wert über seinen Schlüssel mit der Methode getItem lesen. Es gibt auch die Methode removeItem, um ein Paar über den Schlüssel zu entfernen. Die API bietet außerdem clear() zum Entfernen aller Elemente, key(index) zum Zugriff auf Elemente über den Index, length zum Zählen der gespeicherten Elemente und einen storage-Event-Listener, um Änderungen über Tabs hinweg zu erkennen.
note
LocalStorage-Operationen sind synchron und werden im Hauptthread ausgeführt, was die UI-Rendering bei großen Datenoperationen blockieren kann.
Praktische Anwendung: Erstellen eines Theme-Switchers mit LocalStorage
Stellen Sie sich ein Szenario vor, in dem Sie das bevorzugte Theme des Benutzers (hell oder dunkel) speichern möchten, damit es über Sitzungen hinweg erhalten bleibt.
Das folgende Beispiel vereinfachthalber HTML, CSS und JavaScript 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 gespeichertes Theme in LocalStorage vorhanden ist, oder verwendet standardmäßig 'light'. Anschließend wird das Theme angewendet, indem der Klassenname des HTML-Wurzelelements festgelegt 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 ausgelegt ist, bietet SessionStorage eine Möglichkeit, Daten für die Dauer der Seitensitzung zu speichern. In SessionStorage gespeicherte Daten werden gelöscht, wenn die Seitensitzung endet – also wenn der Tab oder das Fenster geschlossen wird.
Verwendung von SessionStorage
Nachfolgend finden Sie ein grundlegendes Beispiel zur Verwendung von SessionStorage. Wie Sie sehen, sind die Methoden und die Syntax LocalStorage sehr ähnlich. Der Unterschied liegt, wie oben erläutert, in der Art des Ablaufs.
Beispiel: Verwendung von SessionStorage in einer Auto-Save-Funktion für Formulardaten
Stellen Sie sich vor, Sie haben ein Formular, das ein Benutzer ausfüllen könnte, aber es besteht das Risiko, dass er den Browser versehentlich schließt. Sie können SessionStorage verwenden, um die Formulardaten vorübergehend zu 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 automatisch jede gespeicherte E-Mail-Adresse beim Laden der Seite und aktualisiert das SessionStorage-Eintrag, sobald sich das E-Mail-Feld ändert. Um es zu testen, klicken Sie auf die Schaltfläche „Try it yourself“, geben Sie etwas in das Eingabefeld ein und laden Sie die Seite anschließend neu. Der Wert bleibt auch nach dem Neuladen erhalten.
INFO
Berücksichtigen Sie immer die Größenbeschränkungen, bevor Sie Daten speichern (typischerweise 5 MB für sowohl LocalStorage als auch SessionStorage).
Fazit
LocalStorage und SessionStorage bieten leistungsstarke Möglichkeiten, die Benutzererfahrung durch effizientes Datenmanagement in Webanwendungen zu verbessern. Durch das Verständnis ihrer Fähigkeiten und Einschränkungen können Entwickler fundierte Entscheidungen darüber treffen, wie sie diese Tools am besten in ihren Projekten einsetzen.
Praxis
Welche der folgenden Aussagen über localStorage und sessionStorage in JavaScript sind wahr?