Storage

Instanzeigenschaften

Storage.length Schreibgeschtzt

Gibt eine ganze Zahl zurck, die die Anzahl der im Storage Objekt gespeicherten Datenelemente darstellt.

Instanzmethoden

Storage.key()

Wenn eine Nummer n bergeben wird, gibt diese Methode den Namen des n-ten Schlssels im Speicher zurck.

Storage.getItem()

Wenn ein Schlsselname bergeben wird, wird der Wert dieses Schlssels zurckgegeben.

Storage.setItem()

Wenn ein Schlsselname und ein Wert bergeben werden, wird dieser Schlssel dem Speicher hinzugefgt oder der Wert des Schlssels aktualisiert, falls er bereits existiert.

Storage.removeItem()

Wenn ein Schlsselname bergeben wird, wird dieser Schlssel aus dem Speicher entfernt.

Storage.clear()

Beim Aufruf werden alle Schlssel aus dem Speicher gelscht.

Beispiele

Hier greifen wir auf ein Storage Objekt durch den Aufruf von localStorage zu. Zunchst berprfen wir, ob der lokale Speicher Datenelemente enthlt, indem wir !localStorage.getItem('bgcolor') verwenden. Wenn dieser der Fall ist, fhren wir eine Funktion namens setStyles() aus, die die Datenelemente mit Storage.getItem() abruft und diese Werte verwendet, um die Seitenstile zu aktualisieren. Falls nicht, fhren wir eine andere Funktion, populateStorage(), aus, die Storage.setItem() verwendet, um die Elementwerte festzulegen, und dann setStyles() ausfhrt.

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);
}

Spezifikationen

Browser-Kompatibilitt

Siehe auch

• Verwendung der Web Storage API
• Window.localStorage
• Window.sessionStorage
• CacheStorage