Webspeicher-API


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen


Die Web Storage API ist eine einfache Syntax zum Speichern und Abrufen von Daten im Browser. Die Anwendung ist ganz einfach:

Beispiel

localStorage.setItem("name", "John Doe");
localStorage.getItem("name");

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
localStorage.setItem("name","John Doe");
document.getElementById("demo").innerHTML = localStorage.getItem("name");
</script>

</body>
</html>

Die Web Storage API wird in allen Browsern unterstützt:

Chrome IE/Edge Firefox Safari Opera
Yes Yes Yes Yes Yes

Das localStorage-Objekt

Das localStorage-Objekt bietet Zugriff auf einen lokalen Speicher für eine bestimmte Website. Es ermöglicht Ihnen, Datenelemente für diese Domäne zu speichern, zu lesen, hinzuzufügen, zu ändern und zu löschen.

Die Daten werden ohne Ablaufdatum gespeichert und beim Schließen des Browsers nicht gelöscht.

Die Daten stehen für Tage, Wochen und Jahre zur Verfügung.


Die setItem()-Methode

Die Methode localStorage.setItem() speichert ein Datenelement in einem Speicher.

Als Parameter werden ein Name und ein Wert benötigt:

Beispiel

localStorage.setItem("name", "John Doe");

Die getItem()-Methode

Die Methode localStorage.getItem() ruft ein Datenelement aus dem Speicher ab.

Als Parameter wird ein Name benötigt:

Beispiel

localStorage.getItem("name");


Das sessionStorage-Objekt

Das sessionStorage-Objekt ist identisch mit dem localStorage-Objekt.

Der Unterschied besteht darin, dass das sessionStorage-Objekt Daten für eine Sitzung speichert.

Mit dem Schließen des Browsers werden die Daten gelöscht.

Beispiel

sessionStorage.getItem("name");

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
sessionStorage.setItem("name","John Doe");
document.getElementById("demo").innerHTML = sessionStorage.getItem("name");
</script>

</body>
</html>

Die setItem()-Methode

Die Methode sessionStorage.setItem() speichert ein Datenelement in einem Speicher.

Als Parameter werden ein Name und ein Wert benötigt:

Beispiel

sessionStorage.setItem("name", "John Doe");

Die getItem()-Methode

Die Methode sessionStorage.getItem() ruft ein Datenelement aus dem Speicher ab.

Als Parameter wird ein Name benötigt:

Beispiel

sessionStorage.getItem("name");

Eigenschaften und Methoden von Speicherobjekten

key(n)

Gibt den Namen des nten Schlüssels im Speicher zurück

length

Gibt die Anzahl der im Storage-Objekt gespeicherten Datenelemente zurück

getItem(keyname)

Gibt den Wert des angegebenen Schlüsselnamens zurück

setItem(keyname, value)

Fügt dem Speicher einen Schlüssel hinzu oder aktualisiert einen Schlüsselwert (sofern dieser bereits vorhanden ist).

removeItem(keyname)

Entfernt diesen Schlüssel aus dem Speicher

clear()

Leeren Sie alle Schlüssel aus dem Speicher

Verwandte Seiten für die Web Storage API

window.localStorage

Ermöglicht das Speichern von Schlüssel/Wert-Paaren in einem Webbrowser. Speichert die Daten mit Nr Verfallsdatum

window.sessionStorage

Ermöglicht das Speichern von Schlüssel/Wert-Paaren in einem Webbrowser. Speichert die Daten für einen Sitzung