HTML -Webspeicher-API
HTML-Webspeicher; besser als Kekse.
Was ist HTML-Webspeicher?
Mit Webspeicher können Webanwendungen Daten lokal im Browser des Benutzers speichern.
Vor HTML5 mussten Anwendungsdaten in Cookies gespeichert werden, die in jeder Serveranfrage enthalten waren. 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 das Speicherlimit viel größer (mindestens 5 MB) und Informationen werden niemals an den Server übertragen.
Die Webspeicherung erfolgt 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
Der 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 des Webspeichers die Browserunterstützung für localStorage und sessionStorage:
if (typeof(Storage) !== "undefined") {
// Code for localStorage/sessionStorage.
}
else {
// Sorry! No Web Storage support..
}
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, Woche oder Jahr zur Verfügung.
Beispiel
// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
Beispiel erklärt:
- Erstellen Sie ein localStorage-Name/Wert-Paar mit name="lastname" und value="Smith"
- Rufen Sie den Wert von "lastname" ab und fügen Sie ihn mit id="result" in das Element ein
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 Strings gespeichert. Denken Sie daran, sie bei Bedarf in ein anderes Format zu konvertieren!
Im folgenden Beispiel wird gezählt, wie oft ein Benutzer auf eine Schaltfläche geklickt hat. In diesem Code wird der Wert-String 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 = "You have clicked the button " +
localStorage.clickcount + " time(s).";
Das sessionStorage-Objekt
Das sessionStorageObjekt ist dem localStorage-Objekt gleich, außer
dass es die Daten nur für eine Sitzung speichert. Die Daten werden gelöscht, wenn der Benutzer 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 = "You have clicked the button " +
sessionStorage.clickcount + " time(s) in this session.";