Einführung zu DOM-Storage

Neu für Windows Internet Explorer 8

Die DOM-Storage-API schließt zwei verwandte Mechanismen zum Beibehalten von clientseitigen Daten auf sichere Weise ein, die das Dokumentobjektmodell (DOM) verwenden: sessionStorage und localStorage. Diese Objekte wurden in Internet Explorer 8 eingeführt.

Hinweis: Bei früheren Versionen von Internet Explorer wurde das Speichern beständiger Daten durch das Verhalten userData implementiert.

In diesem Thema sind die folgenden Abschnitte enthalten.

  • Was ist DOM-Storage?
  • DOM-Storage-Skriptobjekte
    • window.sessionStorage
    • window.localStorage
    • Storage-Objekt
  • DOM-Storage-Ereignisse
    • onstorage
    • onstoragecommit
  • Sicherheit und Datenschutz
    • Browserkontext der obersten Ebene und Ursprung
    • Ursprung bestimmt Speichergrenzen
    • Löschen der Speicherbereiche
  • Verwandte Themen

Was ist DOM-Storage?

DOM-Storage wird oft mit HTTP-Cookies verglichen. Ähnlich wie Cookies können Webentwickler sitzungsabhängige oder domänenspezifische Daten mithilfe von DOM-Storage als Name-Wert-Paare auf dem Client speichern. Im Gegensatz zu Cookies gestaltet der DOM-Storage jedoch die Steuerung einfacher, wie von einem Fenster gespeicherte Informationen für ein anderes Fenster sichtbar sind.

Ein Benutzer könnte z. B. zwei Browserfenster öffnen, um Flugtickets für zwei verschiedene Flüge zu kaufen. Wenn die Webanwendung der Fluggesellschaft ihren Sitzungsstatus jedoch mithilfe von Cookies speichert, könnten Informationen von einer Transaktion in die andere "durchsickern" und den Benutzer potenziell veranlassen, zwei Tickets für den gleichen Flug zu kaufen, ohne es zu bemerken. Da sich Anwendungen hinsichtlich der Offlineverhaltensweisen kompetenter verhalten, z. B. das lokale Speichern von Werten für die spätere Rückkehr zum Server, wird das Potenzial für diese Art des "Informationsverlusts" vorherrschender.

DOM-Storage bietet auch bedeutend mehr Speicherplatz als Cookies. In Internet Explorer können Cookies nur 4 Kilobyte (KB) Daten speichern. Dieser Gesamtwert kann aus einem Name-Wert-Paar von 4 KB oder aus bis zu 20 Name-Wert-Paaren bestehen, die eine Gesamtgröße von 4 KB besitzen. Im Vergleich stellt DOM-Storage ungefähr 10 Megabyte (MB) für jeden Speicherbereich bereit.

Funktionell unterscheiden sich Clientspeicherbereiche von Cookies. DOM-Storage sendet weder mit jeder Anforderung Werte zum Server, wie es bei Cookies der Fall ist, noch laufen die Daten in einem lokalen Speicherbereich jemals ab. Und im Gegensatz zu Cookies ist es einfach, mithilfe einer Standardschnittstelle, die wachsende Unterstützung durch Browseranbieter erfährt, auf einzelne Daten zuzugreifen.

DOM-Storage-Skriptobjekte

  • window.sessionStorage
  • window.localStorage
  • Storage-Objekt

window.sessionStorage

Sitzungsspeicher ist für Szenarios gedacht, in denen der Benutzer eine einzelne Transaktion ausführt. Das sessionStorage-Attribut des window-Objekts bewahrt Schlüssel-Wert-Paare für alle Seiten, die während der Gültigkeitsdauer einer einzelnen Registerkarte geladen werden (für die Dauer des Browserkontexts der obersten Ebene). Eine Seite könnte z. B. ein Kontrollkästchen enthalten, das der Benutzer aktiviert, um den Wunsch nach einer Versicherung anzugeben.

<label>
    <input type="checkbox" onchange="sessionStorage.insurance = checked">
    I want insurance on this trip.
</label>

Eine nachfolgende Seite könnte dann per Skript überprüfen, ob der Benutzer das Kontrollkästchen aktiviert hat.

if (sessionStorage.insurance) { ... } 

Das Storage-Objekt unterstützt Expando-Eigenschaften ('insurance' (Versicherung) im vorangehenden Beispiel). Wenn der Eigenschaftenname nicht vorhanden ist, wird automatisch ein Schlüssel-Wert-Paar erstellt, um ihn automatisch aufzunehmen. Beachten Sie, dass Schlüssel-Wert-Paare immer als Zeichenfolgen gespeichert werden. Andere Datentypen z. B. Zahlen, boolesche Werte und strukturierte Daten müssen vor dem Fortbestehen in einem Speicherbereich in Zeichenfolgen konvertiert werden.

Nachdem ein Wert in "sessionStorage" gespeichert wurde, kann er von einem Skript abgerufen werden, das auf einer anderen Seite im gleichen Kontext ausgeführt wird. Wenn ein anderes Dokument geladen wird, wird "sessionStorage" aus dem Arbeitsspeicher für URLs gleichen Ursprungs initialisiert. (Weitere Informationen finden Sie unter Sicherheit und Datenschutz.)

Hinweis: Obwohl es hinsichtlich HTML 5 (Arbeitsentwurf)  World Wide Web-Link (möglicherweise in englischer Sprache) zulässig ist, setzt Internet Explorer 8 "sessionStorage" nach der Browserwiederherstellung nach einem Systemabsturz nicht fort.

window.localStorage

Der lokale Speichermechanismus umfasst mehrere Fenster und bleibt über die aktuelle Sitzung hinaus erhalten. Das localStorage-Attribut stellt beständige Speicherbereiche für Domänen bereit. Es ermöglicht es Webanwendungen, beinahe 10 MB an Benutzerdaten aus Leistungsgründen auf dem Client zu speichern, z. B. ganze Dokumente oder das Postfach eines Benutzers.

Eine Website kann z. B. einen Zähler dafür anzeigen, wie oft der Benutzer eine Seite mit dem folgenden Skript besucht hat.

<p>
  You have viewed this page
  <span id="count">an untold number of</span>
  time(s).
</p>
<script>
  var storage = window.localStorage;
  if (!storage.pageLoadCount) storage.pageLoadCount = 0;
  storage.pageLoadCount = parseInt(storage.pageLoadCount, 10) + 1;
  document.getElementById('count').innerHTML = storage.pageLoadCount;
</script> 

Hinweis: Vor dem Inkrementieren von pageLoadCount muss es zuerst mithilfe der parseInt-Methode (JScript 5.6) in eine Zahl konvertiert werden.

Jede Domäne und jede Unterdomäne verfügt über einen eigenen separaten lokalen Speicherbereich. Domänen können auf die Speicherbereiche von Unterdomänen zugreifen, und Unterdomänen können auf die Speicherbereiche von übergeordneten Domänen zugreifen. Auf localStorage['example.com'] kann z. B. über example.com und die zugehörigen Unterdomänen zugegriffen werden. Auf die Unterdomäne localStorage['www.example.com'] kann über example.com zugegriffen werden, aber nicht über andere Unterdomänen, z. B. mail.example.com.

Storage-Objekt

Die folgenden Eigenschaften und Methoden werden von Sitzungs- und lokalen Speicherobjekten unterstützt.

clear-Methode

Entfernt alle Schlüssel-Wert-Paare aus dem DOM-Storage-Bereich.

constructor-Eigenschaft

Gibt einen Verweis auf den Konstruktor eines Objekts zurück.

getItem-Methode

Ruft den dem DOM-Storage-Schlüssel zugeordneten aktuellen Wert ab.

key-Methode

Ruft den Schlüssel beim angegebenen Index in der Sammlung ab.

length-Eigenschaft

Ruft die Länge der Schlüssel-Wert-Liste ab.

remainingSpace-Eigenschaft

Ruft den für das Storage-Objekt verbleibenden Speicherbereich ab, in Bytes.

removeItem-Methode

Löscht ein Schlüssel-Wert-Paar aus der DOM-Storage-Sammlung.

setItem-Methode

Legt ein Schlüssel-Wert-Paar fest.

DOM-Storage-Ereignisse

Internet Explorer löst Ereignisse aus, wenn Daten in einem Speicherbereich aktualisiert werden, damit Informationen zwischen mehreren Instanzen des Browsers oder Registerkarten synchronisiert werden können.

Folgende Ereignisse werden unterstützt.

  • onstorage
  • onstoragecommit

onstorage

Das onstorage-Ereignis wird in einem Dokument ausgelöst, wenn ein Speicherbereich geändert wird. Alle Dokumente, die denselben Sitzungskontext nutzen und die Dokumente, die momentan eine Seite von derselben Domäne oder Unterdomäne anzeigen, in der lokaler Speicher eingesetzt wird, empfangen das Ereignis.

Wenn das Zieldokumentobjekt gerade nicht aktiv ist, löst Internet Explorer keine Ereignisse aus.

onstoragecommit

Internet Explorer speichert lokalen Speicher mithilfe von XML-Dateien. Das onstoragecommit-Ereignis wird ausgelöst, wenn ein lokaler Speicher auf Datenträger geschrieben wird.

Sicherheit und Datenschutz

Die in lokalem Speicher gespeicherten Daten sind viel öffentlicher als die in Cookies gespeicherten Daten, die auf einen bestimmten Pfad innerhalb einer Domäne beschränkt sein können. Selbst das Auswählen eines schwer zu erratenden Schlüssels bietet keinen Datenschutz, da das Storage-Objekt eine Möglichkeit bereitstellt, diesen aufzulisten.

Hier folgen einige zu berücksichtigende Informationen:

  • Browserkontext der obersten Ebene und Ursprung
  • Ursprung bestimmt Speichergrenzen
  • Löschen der Speicherbereiche

Browserkontext der obersten Ebene und Ursprung

Der Zugriff auf den Sitzungsspeicherbereich wird vom Browserkontext der obersten Ebene eingeschränkt. In Internet Explorer wird für jede Registerkarte ein neuer Browserkontext erstellt. Ein im Browserkontext der obersten Ebene ausgeführtes Skript erhält keinen Zugriff auf einen Speicherbereich, der in einem anderen Kontext erstellt wurde. Websites können dem Sitzungsspeicher Daten hinzufügen, auf den beliebige Seiten dieses Ursprungs zugreifen können, die im gleichen Fenster geöffnet wurden.

Der Ursprung wird durch Protokoll, Hostname (oder IP-Adresse) und Portnummer der URL des Dokuments bestimmt. Der Skriptzugriff auf Speicherdaten wird nur gestattet, wenn der Skriptursprung dem Ursprung des Speicherbereichs entspricht.

Ursprung bestimmt Speichergrenzen

Datenträgerkontingentgrenzen werden der Domäne der Seite auferlegt, die den Wert festlegt, anstatt der Domäne, in der der Wert festgelegt wird. Dies verhindert, dass bösartige Skripts das Speicherkontingent einer verwandten Domäne verbrauchen. Es verhindert auch, dass derartige Skripts mithilfe zufälliger Unterdomänen uneingeschränkte Datenmengen speichern.

Die Speichergröße wird als Gesamtlänge aller Schlüsselnamen und Werte berechnet, und ein einzelner Speicherbereich kann bis zu 10 Millionen Bytes enthalten. Die remainingSpace-Eigenschaft bestimmt den verfügbaren Speicherbereich.

Löschen der Speicherbereiche

Der Sitzungszustand wird freigegeben, sobald das letzte Fenster geschlossen wird, das auf diese Daten verweist. Benutzer können Speicherbereiche jedoch jederzeit löschen, indem sie in Internet Explorer die Option "Browserverlauf löschen" im Menü "Extras" aktivieren, anschließend das Kontrollkästchen "Cookies" aktivieren und dann auf "OK" klicken. Dadurch werden Sitzungs- und lokale Speicherbereiche für alle Domänen gelöscht, die nicht im Ordner "Favoriten" enthalten sind sowie die Speicherkontingente in der Registrierung zurückgesetzt. Deaktivieren Sie das Kontrollkästchen "Bevorzugte Websitedaten beibehalten", um alle Speicherbereiche unabhängig von der Quelle zu löschen.

Wenn Sie Schlüssel-Wert-Paare aus einer Speicherliste löschen möchten, durchlaufen Sie die Sammlung mit removeItem, oder verwenden Sie clear, um alle Elemente gleichzeitig zu löschen. Denken Sie daran, dass Änderungen an einem lokalen Speicherbereich auf dem Datenträger asynchron gespeichert werden.

Verwandte Themen