Storage

Die Storage-Schnittstelle der Web-Storage-API ermöglicht den Zugriff auf einfache Schlüssel-Wert-Datenbanken des Browsers, in denen Daten mit einer Domain verknüpft gespeichert werden können.

In Window.sessionStorage gespeicherte Daten verfallen mit Ablauf der Sitzung (in der Regel dem Schließen des Browsers), Window.localStorage speichert die Daten hingegen grundsätzlich zeitlich unbegrenzt.

Eigenschaften

Storage.length Read only
Anzahl der in diesem Storage-Objekt gespeicherten Datensätze.

Methoden

Storage.key()
Gibt unter Angabe einer Zahl n den Schlüssel des n-ten Datensatzes zurück.
Storage.getItem()
Gibt den zum Schlüssel gehörigen Wert zurück.
Storage.setItem()
Speichert den gegebenen Wert im Storage-Objekt unter dem gegebenen Schlüssel. Ist unter diesem Schlüssel bereits ein Datensatz vorhanden, wird sein Wert mit dem gegebenen überschrieben.
Storage.removeItem()
Löscht den Datensatz des gegebenen Schlüssels.
Storage.clear()
Löscht sämtliche Datensätze des Storage-Objekts.

Beispiele

In diesem Beispiel wird auf das Storage-Objekt localStorage zugegriffen.

Zuerst wird mit !localStorage.getItem('bgcolor') geprüft, ob das Objekt keinen Datensatz namens bgcolor enthält. Ist der Datensatz bgcolor nicht vorhanden, wird populateStorage() aufgerufen, um Werte aus der Seite auszulesen und mittels Storage.setItem() im Storage-Objekt zu speichern.
Anschließend folgt der Aufruf der Funktion setStyles(), die alle Daten mittels Storage.getItem() ausliest und die Darstellung der Seite entsprechend ändert.
 

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

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

function setStyles() {
  var currentColor = localStorage.getItem('bgcolor');
  var currentFont = localStorage.getItem('font');
  var 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);
}

Anmerkung: Dieses Beispiel kann unter Web Storage Demo ausprobiert werden.

Spezifikationen

Spezifikation Status Kommentar
Unknown
Die Definition von 'Storage' in dieser Spezifikation.		 Unbekannt  

Browserkompatibilität

Wir konvertieren die Kompatibilitätsdaten in ein maschinenlesbares JSON Format. Diese Kompatibilitätstabelle liegt noch im alten Format vor, denn die darin enthaltenen Daten wurden noch nicht konvertiert. Finde heraus wie du helfen kannst!

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
localStorage 4 (Ja) 3.5 8 10.50 4
sessionStorage 5 ? 2 8 10.50 4
Feature Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 2.1 (Ja) ? 8 11 3.2[1]

[1] Seit iOS 5.1 speichert Safari Mobile in localStorage abgelegte Daten im Cache-Verzeichnis. Dieses wird in unregelmäßigen Abständen vom Betriebssystem teilweise geleert, spätestens jedoch, sobald nur noch wenig Speicherplatz zur Verfügung steht.
Desweiteren verhindert der private Modus von Safari Mobile jegliche Nutzung von localStorage.

Die Speicherkapazität von localStorage und sessionStorage. unterscheidet sich von Browser zu Browser (siehe diese detailierte Aufstellung der Speicherkapazitäten für verschiedene Browser).

Siehe auch