4.1 localStorage und sessionStorage
Web-Speicher ermöglichen Web-Anwendungen, Daten im Browser des Nutzers zu speichern. Das ist hilfreich, um Informationen zu speichern, die zwischen Besuchen oder bei der Navigation durch Seiten benötigt werden. In HTML5 wurden zwei hauptsächliche Typen von Web-Speichern eingeführt: localStorage und sessionStorage.
Was ist localStorage?
localStorage ist ein Datenspeicher, der im Browser des Nutzers für unbestimmte Zeit gespeichert wird. Daten im localStorage bleiben auch nach dem Schließen des Browsers und dem Neustart des Computers verfügbar. Das ist nützlich, um Informationen zu speichern, die zwischen Sitzungen erhalten bleiben sollen, wie Benutzereinstellungen oder Warenkorbdaten.
Was ist sessionStorage?
sessionStorage ist ein Datenspeicher, der im Browser des Nutzers für die Dauer einer Sitzung gespeichert wird. Die Daten im sessionStorage sind nur verfügbar, solange der Tab oder das Browserfenster geöffnet ist. Das ist nützlich, um Daten zu speichern, die nur während einer Sitzung benötigt werden, wie temporäre Formulardaten oder Anwendungszustände.
Wichtige Methoden und Eigenschaften
Methoden und Eigenschaften von localStorage und sessionStorage
Beide Typen von Web-Speichern haben das gleiche API, das Methoden und Eigenschaften zur Arbeit mit Daten umfasst:
setItem(key, value): speichert einen Wert mit dem angegebenen Schlüssel.getItem(key): gibt den Wert zurück, der unter dem angegebenen Schlüssel gespeichert ist.removeItem(key): entfernt den Wert mit dem angegebenen Schlüssel.clear(): löscht alle Daten im Speicher.key(index): gibt den Schlüssel am Index zurück.length: gibt die Anzahl der Schlüssel-Wert-Paare im Speicher zurück.
4.2 Anwendungsbeispiele
Beispiel für die Verwendung von localStorage:
<!DOCTYPE html>
<html>
<head>
<title>localStorage Example</title>
</head>
<body>
<h1>localStorage Example</h1>
<input type="text" id="username" placeholder="Enter your username">
<button id="saveButton">Save</button>
<button id="loadButton">Load</button>
<script>
const saveButton = document.getElementById('saveButton');
const loadButton = document.getElementById('loadButton');
const usernameInput = document.getElementById('username');
// Speichern des Werts in localStorage
saveButton.addEventListener('click', function() {
const username = usernameInput.value;
localStorage.setItem('username', username);
alert('Benutzername gespeichert!');
});
// Laden des Werts aus localStorage
loadButton.addEventListener('click', function() {
const savedUsername = localStorage.getItem('username');
if (savedUsername) {
usernameInput.value = savedUsername;
alert('Benutzername geladen!\n' + `${savedUsername}`);
} else {
alert('Kein Benutzername gefunden.');
}
});
</script>
</body>
</html>
Beispiel für die Verwendung von sessionStorage:
<!DOCTYPE html>
<html>
<head>
<title>sessionStorage Example</title>
</head>
<body>
<h1>sessionStorage Example</h1>
<input type="text" id="sessionData" placeholder="Enter some data">
<button id="saveSessionButton">Save</button>
<button id="loadSessionButton">Load</button>
<script>
const saveSessionButton = document.getElementById('saveSessionButton');
const loadSessionButton = document.getElementById('loadSessionButton');
const sessionDataInput = document.getElementById('sessionData');
// Speichern des Werts in sessionStorage
saveSessionButton.addEventListener('click', function() {
const data = sessionDataInput.value;
sessionStorage.setItem('data', data);
alert('Daten in der Sitzung gespeichert!');
});
// Laden des Werts aus sessionStorage
loadSessionButton.addEventListener('click', function() {
const savedData = sessionStorage.getItem('data');
if (savedData) {
sessionDataInput.value = savedData;
alert('Daten aus der Sitzung geladen!\n' + `${savedData}`);
} else {
alert('Keine Daten in der Sitzung gefunden.');
}
});
</script>
</body>
</html>
4.3 Vergleich von localStorage und sessionStorage
Unterschiede zwischen localStorage und sessionStorage
-
Speicherdauer:
- localStorage speichert Daten für unbestimmte Zeit, bis der Nutzer oder ein Skript diese explizit löscht.
- sessionStorage speichert Daten nur für die Dauer der aktuellen Sitzung (Tab oder Browserfenster).
-
Sichtbarkeit:
- Daten im localStorage sind in allen Tabs und Fenstern derselben Domain verfügbar.
- Daten im sessionStorage sind nur im aktuellen Tab oder Fenster verfügbar.
-
Speichergröße:
- Normalerweise haben localStorage und sessionStorage ein Limit von 5-10 MB pro Domain, je nach Browser.
Vergleichsbeispiel für die Verwendung von localStorage und sessionStorage:
<!DOCTYPE html>
<html>
<head>
<title>Comparison Example</title>
</head>
<body>
<script>
// Verwendung von localStorage
localStorage.setItem('persistentData', 'Diese Daten bleiben zwischen Sitzungen erhalten');
console.log(localStorage.getItem('persistentData')); // "Diese Daten bleiben zwischen Sitzungen erhalten"
// Verwendung von sessionStorage
sessionStorage.setItem('temporaryData', 'Diese Daten bleiben nur während der Sitzung erhalten');
console.log(sessionStorage.getItem('temporaryData')); // "Diese Daten bleiben nur während der Sitzung erhalten"
</script>
</body>
</html>
4.4 Anwendungsbereiche
Wann sollte man localStorage verwenden:
- Speichern von Daten, die zwischen Sitzungen erhalten bleiben müssen, wie Benutzereinstellungen oder Präferenzen
- Speichern von Daten, die in allen Tabs und Fenstern einer Domain verfügbar sein müssen
- Speichern von Daten, die sich selten ändern
Wann sollte man sessionStorage verwenden:
- Speichern von temporären Daten, die nur während der aktuellen Sitzung benötigt werden
- Speichern von Daten, die spezifisch für den aktuellen Tab oder das Fenster sind
- Speichern von Daten, die beim Schließen des Tabs oder Fensters gelöscht werden sollen
Sicherheit und Datenschutz
Beim Einsatz von Web-Speichern ist es wichtig, Sicherheits- und Datenschutzaspekte zu berücksichtigen:
- Verschlüsselung: Daten in Web-Speichern werden standardmäßig nicht verschlüsselt. Wenn vertrauliche Informationen gespeichert werden müssen, empfiehlt es sich, die Daten vor dem Speichern zu verschlüsseln.
- Cross-Domain-Angriffe: Web-Speicher funktionieren innerhalb einer Domain, was den Zugriff auf Daten von anderen Domains verhindert. Dennoch ist es wichtig, sich vor XSS-Angriffen (Cross-Site-Scripting) zu schützen, damit Angreifer nicht auf die Daten im Speicher zugreifen können.
- Begrenzung des Datenvolumens: Versuche, nur notwendige Informationen zu speichern und regelmäßig veraltete Daten zu löschen, um eine Überfüllung des Speichers zu vermeiden.
GO TO FULL VERSION