HTML lokale Speicher, besser als cookies .
Was ist HTML Local Storage?
Mit lokalen Speicher können Web-Anwendungen Daten lokal speichern im Browser des Benutzers.
Vor HTML5, hatte Anwendungsdaten in gespeichert werden cookies in jeder Serveranfrage enthalten. Die lokale Speicher ist sicherer, und große Mengen an Daten können lokal gespeichert werden, ohne dass Website-Performance zu beeinflussen.
Im Gegensatz zu cookies , ist die Speichergrenze weit größer (at least 5MB) und Daten werden niemals an den Server übertragen.
Der lokale Speicher ist je Ursprung (per domain and protocol) . Alle Seiten, von einem Ursprung, speichern und Zugriff auf die gleichen Daten.
Lokale und Sitzungsspeicher
Webspeicher bietet zwei verschiedene Speicherbereiche-lokale Speicher und Sitzungsspeicher, die in Umfang und Lebensdauer unterscheiden.
Daten platziert in lokalen Speicher ist je Herkunft (die Kombination aus Protokoll, den Hostnamen und die Portnummer wie in der Same Origin Policy definiert) (die Daten zur Verfügung stehen, um alle Skripte von Seiten aus dem gleichen Ursprung geladen, die zuvor die Daten gespeichert sind) und weiterhin besteht, nachdem der Browser geschlossen wird.
Session-Speicherung ist pro-origin-per-Fenster-oder-Register und ist auf die Lebensdauer des Fensters begrenzt. Session-Speicherung sollte separate Instanzen der gleichen Web-Anwendung ermöglichen, in verschiedenen Fenstern zu laufen, ohne miteinander, ein Anwendungsfall zu stören, die von Cookies nicht gut unterstützt wird.
Browser-Unterstützung
Die Zahlen in der Tabelle geben Sie die erste Browser-Version, die vollständig Local Storage unterstützt.
| API | |||||
|---|---|---|---|---|---|
| Web Storage | 4.0 | 8.0 | 3.5 | 4.0 | 11.5 |
HTML Local Storage Objects
HTML lokale Speicher bieten zwei Objekte für die Daten auf dem Client zu speichern:
- window.localStorage - speichert Daten ohne Verfallsdatum
- window.sessionStorage - speichert Daten für eine Sitzung (Daten verloren gehen , wenn der Browser - Tab geschlossen wird)
Vor dem lokalen Speicher verwenden, überprüfen Sie die Browserunterstützung für localStorage und sessionStorage :
if(typeof(Storage) !== "undefined") {
// Code for localStorage/sessionStorage.
} else {
// Sorry! No Web Storage support..
}
Das Objekt local
Das Objekt localstorage speichert die Daten ohne Verfallsdatum. Die Daten werden nicht gelöscht werden, wenn der Browser geschlossen wird, und am nächsten Tag, Woche oder Jahr zur Verfügung stehen.
Beispiel
// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname"); Versuch es selber " Beispiel erläutert werden:
- Erstellen Sie ein localStorage Name / Wert - Paar mit name="lastname" und value="Smith"
- Abrufen der Wert von "lastname" und legen sie in das Element mit id = „result“
Das obige Beispiel könnte auch wie folgt geschrieben werden:
// Store
localStorage.lastname = "Smith";
// Retrieve
document.getElementById("result").innerHTML = localStorage.lastname;
Die Syntax für das Entfernen von "lastname" local Artikel ist wie folgt:
localStorage.removeItem("lastname");
Hinweis: Name / Wert - Paare werden immer als Strings gespeichert. Denken Sie daran, sie in ein anderes Format zu konvertieren, wenn nötig!
Das folgende Beispiel zählt die Anzahl, wie oft ein Benutzer auf eine Schaltfläche geklickt hat. In diesem Code wird der Wert String in eine Zahl umgewandelt in der Lage sein, den Zähler zu erhöhen:
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)."; Versuch es selber " Das sessionStorage Objekt
Das sessionStorage Objekt ist gleich das localStorage - Objekt, mit der Ausnahme , dass es die Daten für nur eine Sitzung speichert. Die Daten werden gelöscht, wenn der Benutzer des spezifischen Browser-Tab geschlossen wird.
Das folgende Beispiel zählt die Anzahl, wie oft ein Benutzer auf eine Schaltfläche, in der aktuellen Sitzung 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."; Versuch es selber "