HTML-lokaler Speicher

HTML-lokaler Speicher: Überlegen den Cookies.

Was ist HTML-lokaler Speicher?

Durch den lokalen Speicher (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. Lokaler Speicher ist sicherer und ermöglicht es, eine große Menge an Daten 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 Speicher werden über den Ursprungsort (origin) (durch Domäne und Protokoll) bereitgestellt. Alle Seiten können von dort aus die gleichen Daten speichern und abrufen.

Browser-Unterstützung

Die Tabelle zeigt die ersten Browser-Versionen, die lokale Speicherung vollständig unterstützen.

API
Web Storage 4.0 8.0 3.5 4.0 11.5

HTML-Lokalspeicherung-Objekte

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

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

Beim Verwenden von lokaler Speicherung 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

Das 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");
// Abrufen
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

Versuchen Sie es selbst

Beispielinterpretation:

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

Das Beispiel kann auch so geschrieben werden:

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

Die Syntax zum Löschen des localStorage-Elements "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!

Dieses Beispiel zählt die Anzahl der Male, dass der Benutzer auf den Button klickt. Der Wert der Zeichenkette wird im Code in eine numerische Werte umgewandelt und die Zählung entsprechend erhöht:

Beispiel

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

Versuchen Sie es selbst

sessionStorage-Objekt

Das sessionStorage-Objekt ist dem localStorage-Objekt äquivalent, 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 bereits " +
sessionStorage.clickcount + " Mal.";

Versuchen Sie es selbst