Webspeicher-API
Die Web Storage API ist eine einfache Syntax zum Speichern und Abrufen von Daten im Browser. Es ist sehr einfach zu bedienen:
Beispiel
localStorage.setItem("name", "John Doe");
localStorage.getItem("name");
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 werden für Tage, Wochen und Jahre verfügbar sein.
Die setItem()-Methode
Die Methode localStorage.setItem() speichert ein Datenelement in einem Speicher.
Es nimmt einen Namen und einen Wert als Parameter:
Beispiel
localStorage.setItem("name", "John Doe");
Die getItem()-Methode
Die Methode localStorage.getItem() ruft ein Datenelement aus dem Speicher ab.
Es nimmt einen Namen als Parameter:
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.
Die Daten werden gelöscht, wenn der Browser geschlossen wird.
Beispiel
sessionStorage.getItem("name");
Die setItem()-Methode
Die Methode sessionStorage.setItem() speichert ein Datenelement in einem Speicher.
Es nimmt einen Namen und einen Wert als Parameter:
Beispiel
sessionStorage.setItem("name", "John Doe");
Die getItem()-Methode
Die Methode sessionStorage.getItem() ruft ein Datenelement aus dem Speicher ab.
Es nimmt einen Namen als Parameter:
Beispiel
sessionStorage.getItem("name");
Eigenschaften und Methoden von Speicherobjekten
| Property/Method | Description |
|---|---|
| key(n) | Returns the name of the nth key in the storage |
| length | Returns the number of data items stored in the Storage object |
| getItem(keyname) | Returns the value of the specified key name |
| setItem(keyname, value) | Adds that key to the storage, or update that key's value if it already exists |
| removeItem(keyname) | Removes that key from the storage |
| clear() | Empty all key out of the storage |
Verwandte Seiten für die Webspeicher-API
| Property | Description |
|---|---|
| window.localStorage | Allows to save key/value pairs in a web browser. Stores the data with no expiration date |
| window.sessionStorage | Allows to save key/value pairs in a web browser. Stores the data for one session |