Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
Storage
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
DasStorage Interface derWeb Storage API bietet Zugriff auf den Sitzungs- oder lokalen Speicher einer bestimmten Domäne. Es ermöglicht beispielsweise das Hinzufügen, Ändern oder Löschen gespeicherter Datenelemente.
Um zum Beispiel den Sitzungspeicher einer Domäne zu manipulieren, wird ein Aufruf anWindow.sessionStorage gemacht; während für den lokalen Speicher der Aufruf anWindow.localStorage erfolgt.
Instanzeigenschaften
Storage.lengthSchreibgeschütztGibt eine ganze Zahl zurück, die die Anzahl der im
StorageObjekt gespeicherten Datenelemente darstellt.
Instanzmethoden
Storage.key()Wenn eine Nummer
nübergeben wird, gibt diese Methode den Namen des n-ten Schlüssels im Speicher zurück.Storage.getItem()Wenn ein Schlüsselname übergeben wird, wird der Wert dieses Schlüssels zurückgegeben.
Storage.setItem()Wenn ein Schlüsselname und ein Wert übergeben werden, wird dieser Schlüssel dem Speicher hinzugefügt oder der Wert des Schlüssels aktualisiert, falls er bereits existiert.
Storage.removeItem()Wenn ein Schlüsselname übergeben wird, wird dieser Schlüssel aus dem Speicher entfernt.
Storage.clear()Beim Aufruf werden alle Schlüssel aus dem Speicher gelöscht.
Beispiele
Hier greifen wir auf einStorage Objekt durch den Aufruf vonlocalStorage zu. Zunächst überprüfen wir, ob der lokale Speicher Datenelemente enthält, indem wir!localStorage.getItem('bgcolor') verwenden. Wenn dieser der Fall ist, führen wir eine Funktion namenssetStyles() aus, die die Datenelemente mitStorage.getItem() abruft und diese Werte verwendet, um die Seitenstile zu aktualisieren. Falls nicht, führen wir eine andere Funktion,populateStorage(), aus, dieStorage.setItem() verwendet, um die Elementwerte festzulegen, und dannsetStyles() ausführt.
if (!localStorage.getItem("bgcolor")) { populateStorage();} else { setStyles();}function populateStorage() { localStorage.setItem("bgcolor", document.getElementById("bgcolor").value); localStorage.setItem("font", document.getElementById("font").value); localStorage.setItem("image", document.getElementById("image").value); setStyles();}function setStyles() { const currentColor = localStorage.getItem("bgcolor"); const currentFont = localStorage.getItem("font"); const currentImage = localStorage.getItem("image"); document.getElementById("bgcolor").value = currentColor; document.getElementById("font").value = currentFont; document.getElementById("image").value = currentImage; htmlElem.style.backgroundColor = `#${currentColor}`; pElem.style.fontFamily = currentFont; imgElem.setAttribute("src", currentImage);}Hinweis:Um dies als vollständiges funktionierendes Beispiel zu sehen, besuchen Sie unserWeb Storage Demo.
Spezifikationen
| Specification |
|---|
| HTML # storage |