HTML Webspeicher-API
HTML Webspeicher; besser als cookies.
Was ist HTML Web Storage?
Mit Web Storage können Webanwendungen Daten lokal im Browser des Benutzers speichern.
Vor HTML5 mussten Anwendungsdaten in Cookies gespeichert werden, die in jede Serveranfrage einbezogen wurden. Der Webspeicher ist sicherer und große Datenmengen können lokal gespeichert werden, ohne die Leistung der Website zu beeinträchtigen.
Im Gegensatz zu Cookies ist die Speichergrenze viel höher (mindestens 5 MB) und es werden niemals Informationen an den Server übertragen.
Webspeicher ist pro Ursprung (pro Domäne und Protokoll). Alle Seiten eines Ursprungs können dieselben Daten speichern und darauf zugreifen.
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die Web Storage vollständig unterstützt.
| API | |||||
|---|---|---|---|---|---|
| Web Storage | 4.0 | 8.0 | 3.5 | 4.0 | 11.5 |
HTML-Webspeicherobjekte
HTML-Webspeicher bietet zwei Objekte zum Speichern von Daten auf dem Client:
window.localStorage- speichert Daten ohne Ablaufdatumwindow.sessionStorage- speichert Daten für eine Sitzung (Daten gehen verloren, wenn der Browser-Tab geschlossen wird)
Überprüfen Sie vor der Verwendung von Webspeicher die Browserunterstützung für localStorage und sessionStorage:
if (typeof(Storage) !== "undefined") {
// Code für localStorage/sessionStorage.
} else {
// Entschuldigung! Keine Web Storage-Unterstützung.
}
Das localStorage-Objekt
Das localStorage-Objekt speichert die Daten ohne Ablaufdatum. Die Daten werden beim Schließen des Browsers nicht gelöscht und stehen am nächsten Tag, in der nächsten Woche oder im nächsten Jahr wieder zur Verfügung.
Beispiel
// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
Try it Yourself »
Beispiel erklärt:
- Erstellen Sie ein Name/Wert-Paar für localStorage mit name="lastname" und value="Smith"
- Rufen Sie den Wert von "lastname" ab und fügen Sie ihn mit in das Element ein id="result"
Das obige Beispiel könnte auch so geschrieben werden:
// Store
localStorage.lastname = "Smith";
// Retrieve
document.getElementById("result").innerHTML = localStorage.lastname;
Die Syntax zum Entfernen des localStorage-Elements "lastname" lautet wie folgt:
localStorage.removeItem("lastname");
Hinweis: Name/Wert-Paare werden immer als Zeichenfolgen gespeichert. Denken Sie daran, sie bei Bedarf in ein anderes Format zu konvertieren!
Das folgende Beispiel zählt, wie oft ein Benutzer auf eine Schaltfläche geklickt hat. In diesem Code wird der Wertstring in eine Zahl umgewandelt, um den Zähler erhöhen zu können:
Beispiel
if (localStorage.clickcount) {
localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "Sie haben auf die Schaltfläche geklickt " +
localStorage.clickcount + " mal.";
Try it Yourself »
Das sessionStorage-Objekt
Das sessionStorage-Objekt entspricht dem localStorage-Objekt, außer, dass es die Daten nur für eine Sitzung speichert. Die Daten werden gelöscht, wenn der Nutzer den jeweiligen Browser-Tab schließt.
Das folgende Beispiel zählt, wie oft ein Benutzer in der aktuellen Sitzung auf eine Schaltfläche geklickt hat:
Beispiel
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "Sie haben in dieser Sitzung " +
sessionStorage.clickcount + " Mal auf die Schaltfläche geklickt.";
Try it Yourself »
