Lokale Speicherung in HTML

Lokale Speicherung in HTML: Überlegen den Cookies.

Was ist lokale Speicherung in HTML?

Durch lokale Speicherung (Local Storage) können Web-Anwendungen Daten lokal im Browser des Benutzers speichern.

Vor HTML5 konnten Anwendungsdaten nur in Cookies gespeichert werden, einschließlich jeder Serveranfrage. Lokale Speicherung ist sicherer und ermöglicht es, große Datenmengen lokal zu speichern, ohne die Leistung der Website zu beeinträchtigen.

Im Gegensatz zu Cookies sind die Speicherbeschränkungen erheblich größer (mindestens 5 MB), und die Informationen werden nicht an den Server übertragen.

Lokale Speicherung erfolgt über den Ursprungsort (origin) (durch Domäne und Protokoll). Alle Seiten können von dort aus gleiche Daten speichern und abrufen.

Browser-Unterstützung

Die Tabelle zeigt die erste Browser-Version, die Local Storage vollständig unterstützt.

API
Web Storage 4.0 8.0 3.5 4.0 11.5

HTML-Lokal speichert Objekte

HTML-Lokal speichert bietet zwei Objekte, um Daten auf dem Client zu speichern:

  • window.localStorage - Speichert Daten ohne Ablaufdatum
  • window.sessionStorage - Speichert Daten für eine Session (wird gelöscht, wenn der Browser-Tab geschlossen wird)

Bei der Verwendung von Local Storage sollten Sie die Browser-Unterstützung für localStorage und sessionStorage überprüfen:

if (typeof(Storage) !== "undefined") {
    // Code für localStorage/sessionStorage
} else {
    // Entschuldigung! Web Storage wird nicht unterstützt ..
}

localStorage-Objekt

Der localStorage-Objekt speichert Daten ohne Ablaufdatum. Die Daten werden nicht gelöscht, wenn der Browser geschlossen wird, und sind am nächsten Tag, in der Woche oder im Jahr verfügbar.

Beispiel

// Speichern
localStorage.setItem("lastname", "Gates");
// Abholen
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

Versuchen Sie es selbst

Beispielinterpretation:

  • Erstellen Sie ein localStorage-Namens/Wert-Paar, wobei: name="lastname", value="Gates"
  • Den Wert "lastname" abholen und ihn in das Element mit id="result" einfügen

Das Beispiel kann auch so geschrieben werden:

// Speichern
localStorage.lastname = "Gates";
// Abholen
document.getElementById("result").innerHTML = localStorage.lastname;

Die Syntax zum Löschen des localStorage-Projekts "lastname":

localStorage.removeItem("lastname");

Anmerkung: Der Name/Wert-Paare werden immer als Zeichenkette gespeichert. Wenn nötig, denken Sie daran, sie in andere Formate umzuwandeln!

Das folgende Beispiel zählt die Anzahl der Male, dass der Benutzer auf den Button klickt. Der Wert der Zeichenkette wird im Code in einen numerischen Wert umgewandelt und der Zähler wird sukzessive erhöht:

Beispiel

if (localStorage.clickcount) {
    localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
    localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "Sie haben diesen Button " +
localStorage.clickcount + " Mal.";

Versuchen Sie es selbst

sessionStorage-Objekt

Das sessionStorage-Objekt ist gleich dem localStorage-Objekt, unterscheidet sich jedoch darin, dass es nur Daten für eine Session speichert. Wenn der Benutzer ein bestimmtes Browser-Tab schließt, werden die Daten ebenfalls gelöscht.

Das folgende Beispiel zählt die Klicks des Benutzers auf den Button in der aktuellen Session:

Beispiel

if (sessionStorage.clickcount) {
    sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
    sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "In dieser Session haben Sie diesen Button " +
sessionStorage.clickcount + " Mal.";

Versuchen Sie es selbst