Verwendung der Web Storage API

Grundkonzepte

Storage-Objekte sind einfache Key-Value-Stores, hnlich wie Objekte, bleiben aber ber Seitenladungen hinweg intakt. Die Schlssel und die Werte sind immer Strings (beachten Sie, dass, wie bei Objekten, ganzzahlige Schlssel automatisch in Strings umgewandelt werden). Sie knnen auf diese Werte wie auf ein Objekt zugreifen oder mit den Methoden Storage.getItem() und Storage.setItem(). Diese drei Zeilen setzen alle denselben Eintrag colorSetting:

localStorage.colorSetting = "#a4509b";
localStorage["colorSetting"] = "#a4509b";
localStorage.setItem("colorSetting", "#a4509b");

Die zwei Mechanismen innerhalb der Web Storage sind wie folgt:

• sessionStorage hlt einen separaten Speicherbereich fr jeden gegebenen Ursprung, der fr die Dauer der Seitensitzung verfgbar ist (solange der Browser geffnet ist, einschlielich Seitenneuladungen und -wiederherstellungen).
• localStorage tut dasselbe, bleibt jedoch bestehen, auch wenn der Browser geschlossen und wieder geffnet wird.

Diese Mechanismen sind ber die Eigenschaften Window.sessionStorage und Window.localStorage verfgbar (genauer gesagt, in untersttzenden Browsern implementiert das Window-Objekt die Objekte WindowLocalStorage und WindowSessionStorage, deren Mitglieder die Eigenschaften localStorage und sessionStorage sind) das Aufrufen einer dieser Eigenschaften erstellt eine Instanz des Storage-Objekts, ber die Datenobjekte gesetzt, abgerufen und entfernt werden knnen. Ein anderes Storage-Objekt wird fr das sessionStorage und localStorage fr jeden Ursprung verwendet sie funktionieren und werden separat gesteuert.

Wenn Sie also zunchst localStorage in einem Dokument aufrufen, wird ein Storage-Objekt zurckgegeben; das Aufrufen von sessionStorage in einem Dokument wird ein anderes Storage-Objekt zurckgeben. Beide knnen auf dieselbe Weise manipuliert werden, jedoch getrennt.

Lokale Speicherung auf Funktionsfhigkeit berprfen

Um localStorage nutzen zu knnen, sollten wir zuerst berprfen, ob es in der aktuellen Browsersitzung untersttzt und verfgbar ist.

Verfgbarkeit testen

Browser, die localStorage untersttzen, haben eine Eigenschaft im Fensterobjekt namens localStorage. Das bloe Testen, ob die Eigenschaft existiert, wie bei der normalen Funktionsberprfung, kann jedoch unzureichend sein. Verschiedene Browser bieten Einstellungen, die die Storage-API deaktivieren, ohne das globale Objekt zu verbergen. Ein Browser kann localStorage also untersttzen, aber es den Skripten auf der Seite nicht verfgbar machen.

Beispielsweise knnen einige Browser uns in einem Dokument, das im privaten Modus eines Browsers angesehen wird, ein leeres localStorage-Objekt mit einem Kontingent von Null geben, was es effektiv unbrauchbar macht. Im Gegenzug knnten wir einen legitimierten QuotaExceededError erhalten, was bedeutet, dass wir den gesamten verfgbaren Speicherplatz aufgebraucht haben, der Speicher ist jedoch tatschlich verfgbar. Unsere Funktionsprfung sollte diese Szenarien bercksichtigen.

Hier ist eine Funktion, die erkennt, ob localStorage sowohl untersttzt als auch verfgbar ist:

function storageAvailable(type) {
  let storage;
  try {
    storage = window[type];
    const x = "__storage_test__";
    storage.setItem(x, x);
    storage.removeItem(x);
    return true;
  } catch (e) {
    return (
      e instanceof DOMException &&
      e.name === "QuotaExceededError" &&
      // acknowledge QuotaExceededError only if there's something already stored
      storage &&
      storage.length !== 0
    );
  }
}

Und so wrden Sie es verwenden:

if (storageAvailable("localStorage")) {
  // Yippee! We can use localStorage awesomeness
} else {
  // Too bad, no localStorage for us
}

Sie knnen fr sessionStorage testen, indem Sie storageAvailable("sessionStorage") aufrufen.

Beispiel

Um eine typische Verwendung von Web Storage zu veranschaulichen, haben wir ein Beispiel erstellt, das Web Storage Demo heit. Die Startseite bietet Steuerungen, mit denen Sie die Farbe, die Schriftart und das dekorative Bild anpassen knnen:

[Beispiel fr Web Storage mit einem Textfeld, um die Farbe durch Eingabe eines Hex-Werts auszuwhlen, und zwei Dropdown-Mens, um den Schriftstil und das dekorative Bild auszuwhlen.]

Wenn Sie verschiedene Optionen auswhlen, wird die Seite sofort aktualisiert; zustzlich werden Ihre Auswahlmglichkeiten in localStorage gespeichert, sodass Ihre Auswahl erinnert wird, wenn Sie die Seite verlassen und spter erneut laden.

Wir haben auch eine Ereignisausgabeseite bereitgestellt wenn Sie diese Seite in einem anderen Tab laden und dann Ihre Auswahl auf der Startseite ndern, wird die aktualisierte Speicherdateninformation ausgegeben, sobald ein StorageEvent ausgelst wird.

[Ereignisausgabeseite]

Testen, ob Ihr Speicher befllt wurde

Zu Beginn testen wir in main.js, ob das Speicherobjekt bereits befllt wurde (d.h. die Seite wurde zuvor aufgerufen):

if (!localStorage.getItem("bgcolor")) {
  populateStorage();
} else {
  setStyles();
}

Die Methode Storage.getItem() wird verwendet, um ein Datenobjekt aus dem Speicher abzurufen; in diesem Fall testen wir, ob das bgcolor-Element existiert; falls nicht, fhren wir populateStorage() aus, um die vorhandenen Anpassungswerte in den Speicher einzutragen. Wenn bereits Werte vorhanden sind, fhren wir setStyles() aus, um das Seitenstyling mit den gespeicherten Werten zu aktualisieren.

Werte aus dem Speicher abrufen

Wie oben erwhnt, knnen Werte aus dem Speicher mit Storage.getItem() abgerufen werden. Dies erfordert den Schlssel des Datenobjekts als Argument und gibt den Datenwert zurck.

Zum Beispiel:

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

Hier holen sich die ersten drei Zeilen die Werte aus dem lokalen Speicher. Danach setzen wir die Werte, die in den Formularelementen angezeigt werden, auf diese Werte, sodass sie synchron bleiben, wenn Sie die Seite neu laden. Schlielich aktualisieren wir die Stile/dekorative Bilder auf der Seite, sodass Ihre Anpassungsoptionen beim erneuten Laden wieder angezeigt werden.

Werte im Speicher setzen

Storage.setItem() wird sowohl zum Erstellen neuer Datenobjekte als auch (wenn das Datenobjekt bereits existiert) zum Aktualisieren bestehender Werte verwendet. Dies erfordert zwei Argumente: den Schlssel des zu erstellenden/zu ndernden Datenobjekts und den Wert, der darin gespeichert werden soll.

function populateStorage() {
  localStorage.setItem("bgcolor", document.getElementById("bgcolor").value);
  localStorage.setItem("font", document.getElementById("font").value);
  localStorage.setItem("image", document.getElementById("image").value);

  setStyles();
}

Die Funktion populateStorage() setzt drei Elemente im lokalen Speicher die Hintergrundfarbe, Schriftart und den Bildpfad. Anschlieend wird die Funktion setStyles() ausgefhrt, um die Seitenstile usw. zu aktualisieren.

Wir haben auch einen onchange-Handler an jedes Formularelement angehngt, sodass die Daten und das Styling aktualisiert werden, sobald ein Formularwert gendert wird:

bgcolorForm.onchange = populateStorage;
fontForm.onchange = populateStorage;
imageForm.onchange = populateStorage;

Storage untersttzt nur das Speichern und Abrufen von Strings. Wenn Sie andere Datentypen speichern mchten, mssen Sie diese in Strings umwandeln. Fr einfache Objekte und Arrays knnen Sie JSON.stringify() verwenden.

const person = { name: "Alex" };
localStorage.setItem("user", person);
console.log(localStorage.getItem("user")); // "[object Object]"; not useful!
localStorage.setItem("user", JSON.stringify(person));
console.log(JSON.parse(localStorage.getItem("user"))); // { name: "Alex" }

Es gibt jedoch keine generische Mglichkeit, beliebige Datentypen zu speichern. Darber hinaus ist das zurckgegebene Objekt eine tiefe Kopie des ursprnglichen Objekts und nderungen daran wirken sich nicht auf das ursprngliche Objekt aus.

Auf Speichernderungen mit StorageEvent reagieren

Das storage Ereignis wird ausgelst, wenn eine nderung an dem Storage-Objekt eines anderen Dokuments vorgenommen wird, das denselben Speicherbereich teilt. Dies funktioniert nicht auf derselben Seite, die die nderungen vornimmt es ist wirklich eine Mglichkeit, andere Seiten der Herkunft, die den Speicher verwenden, mit den vorgenommenen nderungen zu synchronisieren. Seiten anderer Ursprnge knnen nicht auf dieselben Speicherobjekte zugreifen.

Fr localStorage wird der Speicherbereich zwischen allen Tabs mit demselben Ursprung geteilt. Fr sessionStorage wird der Speicherbereich nur innerhalb des Tabs geteilt, unter allen iframes des gleichen Ursprungs.

Auf der Ereignisseite (siehe events.js) besteht das einzige JavaScript wie folgt:

window.addEventListener("storage", (e) => {
  document.querySelector(".my-key").textContent = e.key;
  document.querySelector(".my-old").textContent = e.oldValue;
  document.querySelector(".my-new").textContent = e.newValue;
  document.querySelector(".my-url").textContent = e.url;
  document.querySelector(".my-storage").textContent = JSON.stringify(
    e.storageArea,
  );
});

Hier fgen wir dem window-Objekt einen Ereignislistener hinzu, der ausgelst wird, wenn das Storage-Objekt, das mit dem aktuellen Ursprung verwandt ist, gendert wird. Wie Sie oben sehen knnen, verfgt das mit diesem Ereignis verknpfte Ereignisobjekt ber eine Reihe von Eigenschaften, die ntzliche Informationen enthalten den Schlssel der vernderten Daten, den alten Wert vor der nderung, den neuen Wert nach der nderung, die URL des Dokuments, das den Speicher verndert hat, und das Speicherobjekt selbst (das wir stringifiziert haben, damit Sie seinen Inhalt sehen knnen).

Datenaufzeichnungen lschen

Web Storage bietet auch einige einfache Methoden, um Daten zu entfernen. Wir verwenden diese in unserem Demo nicht, aber sie lassen sich sehr einfach in Ihr Projekt integrieren:

• Storage.removeItem() nimmt ein einziges Argument an den Schlssel des Datenobjekts, das Sie entfernen mchten und entfernt es aus dem Speicherobjekt fr diesen Ursprung.
• Storage.clear() nimmt keine Argumente an und leert das gesamte Speicherobjekt fr diesen Ursprung.

Spezifikationen

Browser-Kompatibilitt

api.Window.localStorage

api.Window.sessionStorage

Siehe auch

• Web Storage API Startseite