MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/8d22564490d8

Storage

Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.

Die Storage-Schnittstelle der Web Storage API ermöglicht den Zugriff auf den Session und Local Storage einer Domain, um dort Daten hinzuzufügen, zu ändern oder zu löschen.

Zum Ändern der Daten, die nur während der aktuellen Sitzung bestand haben, dient Window.sessionStorage, der dauerhafte Speicher steht unter Window.localStorage zur Verfügung.

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
Web Storage (Second edition)
Die Definition von 'Storage' in dieser Spezifikation.
Empfehlung  

Browserkompatibilität

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

Using the Web Storage API

Schlagwörter des Dokuments und Mitwirkende

 Mitwirkende an dieser Seite: mdnde
 Zuletzt aktualisiert von: mdnde,