1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
|
---
title: Web Storage API
slug: Web/API/Web_Storage_API
translation_of: Web/API/Web_Storage_API
---
<p>{{DefaultAPISidebar("Web Storage API")}}</p>
<p>Die <strong>Web Storage API</strong> bietet Mechanismen, durch welche Browser in einer weitaus intuitiveren Form Schlüssel-Werte-Paare abspeichern können, als dies bei Cookies der Fall ist.</p>
<h2 id="Web_Storage_Konzepte_und_Verwendung">Web Storage Konzepte und Verwendung</h2>
<p>Die zwei Mechanismen innerhalb des Web Storage sind wie folgt:</p>
<ul>
<li><code>sessionStorage</code> stellt für jeden vorhandenen Ausgangspunkt für die Dauer des Seitenbesuchs einen separaten Speicherbereich bereit (solange der Browser geöffnet bleibt inklusive Seitenaktualisierung und -Wiederherstellung).</li>
<li><code>localStorage</code> hat die gleiche Funktion, bleibt jedoch trotz Schließens und Neustart des Browsers persistent.</li>
</ul>
<p>Diese Mechanismen stehen durch die Eigenschaften {{domxref("Window.sessionStorage")}} und {{domxref("Window.localStorage")}} zur Verfügung (um dies näher zu beschreiben: Zur Unterstützung der Browser implementiert das <code>Window</code> Objekt die Objekte <code>WindowLocalStorage</code> und <code>WindowSessionStorage</code>, welche von <code>localStorage</code> und <code>sessionStorage</code> bereitgestellt werden) — durch deren Aufruf wird eine Instanz des {{domxref("Storage")}} Objekts erstellt, durch welches Daten gespeichert, abgerufen und gelöscht werden können. Ein anderes Speicherelement wird für das <code>sessionStorage</code> und <code>localStorage</code> jedes Ausgangspunktes verwendet — beide arbeiten getrennt und werden auch getrennt gesteuert.</p>
<div class="note">
<p><strong>Hinweis</strong>: Ab Firefox 45 aufwärts wird die Datenspeicherung pro Ausgangspunkt auf 10MB begrenzt, um Speicherprobleme durch übermäßige Verwendung des Web storage zu vermeiden.</p>
</div>
<div class="note">
<p><strong>Hinweis</strong>: Zugang zum Web Storage von IFrames Ditter wird verweigert, wenn der Anwender <a href="https://support.mozilla.org/de/kb/disable-third-party-cookies">Cookies Dritter deaktiviert</a> hat (Firefox implementiert dieses Verhalten ab der <a href="/de/docs/Mozilla/Firefox/Releases/43">version 43</a> aufwärts.)</p>
</div>
<div class="note">
<p><strong>Hinweis:</strong> Web Storage ist nicht dasselbe wie <a href="/de/docs/Storage" title="Storage">mozStorage</a> (Mozillas XPCOM Schnittstelle zu SQLite) oder die <a href="/de/docs/Session_store_API" title="Session_store_API">Session store API</a> (ein <a href="/de/docs/XPCOM" title="XPCOM">XPCOM</a> Speicherprogramm, welches von Erweiterungen verwendet wird).</p>
</div>
<h2 id="Web_Storage_Schnittstellen">Web Storage Schnittstellen</h2>
<dl>
<dt>{{domxref("Storage")}}</dt>
<dd>Erlaubt das Speichern, Abrufen und Löschen von Daten einer spezifischen Domain und des Speichertyps (session oder local).</dd>
<dt>{{domxref("Window")}}</dt>
<dd>Die Web Storage API erweitert das {{domxref("Window")}} Objekt mit zwei neuen Attributen — {{domxref("Window.sessionStorage")}} und {{domxref("Window.localStorage")}} — welche den Zugang zu den jeweiligen session- und local-Objekten der aktuellen Domain sowie eine {{domxref("Window.onstorage")}} Ereignissteuerung (event handler), welche aktiviert wird, wenn ein Speicherbereich geändert wird (z.B. bei der Speicherung eines neuen Datensatzes).</dd>
<dt>{{domxref("StorageEvent")}}</dt>
<dd>Das <code title="event-storage">storage</code>-Ereignis wird über das <code>Window</code>-Objekt eines (html-) Dokuments aktiviert, wenn sich ein Speicherbereich ändert.</dd>
</dl>
<h2 id="Beispiele">Beispiele</h2>
<p>Um einige der typischen Anwendungsfälle von Web Storage darzulegen, wurde ein einfaches Beispiel erstellt, fantasievoll als <a href="https://github.com/mdn/web-storage-demo">Web Storage Demo</a> benannt. Die Startseite bietet die Möglichkeit, Farbe, Schriftart und ein dekoratives Bild zu verändern. Wenn verschiedene Optionen ausgewählt werden, wird die Seite umgehend aktualisiert. Zudem werden die ausgewählten Optionen im <code>localStorage</code> gespeichert, sodass diese beim Verlassen und erneutem Aufruf der Seite bestehen bleiben. </p>
<p>Zudem besteht eine <a href="https://mdn.github.io/dom-examples/web-storage/event.html">Ereignis-Ausgabeseite</a> — wenn diese Seite in einem weiteren Tab geladen wird, hiernach Änderungen auf der Startseite vorgenommen werden, sind die aktualisierten Speicherinformationen zu sehen, welche durch die Aktivierung des Ereignisses {{event("StorageEvent")}} zustandekommen.</p>
<h2 id="Spezifikationen">Spezifikationen</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Spezifikation</th>
<th scope="col">Status</th>
<th scope="col">Kommentar</th>
</tr>
<tr>
<td>{{SpecName('Web Storage')}}</td>
<td>{{Spec2('Web Storage')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>localStorage</td>
<td>4</td>
<td>3.5</td>
<td>8</td>
<td>10.50</td>
<td>4</td>
</tr>
<tr>
<td>sessionStorage</td>
<td>5</td>
<td>2</td>
<td>8</td>
<td>10.50</td>
<td>4</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>2.1</td>
<td>{{ CompatUnknown }}</td>
<td>8</td>
<td>11</td>
<td>iOS 3.2</td>
</tr>
</tbody>
</table>
</div>
<p>Alle Browser haben variiernde Kapazitäten sowohl für das localStorage und auch das sessionStorage. Hier ist ein <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">detailierter Ablauf aller Speicherkapazitäten verschiedener Browser</a> zu finden.</p>
<div class="note">
<p><strong>Hinweis: </strong>Seit iOS 5.1, speichert Safari Mobile localStorage-Daten in den cache-Ordner, welcher gelegentlichen Speicherbereinigungen durch das OS ausgesetzt ist, welche typischerweise bei knappem Speicher auftreten.</p>
</div>
<h2 id="Privates_Surfen_Inkognito-Modus">Privates Surfen / Inkognito-Modus</h2>
<p>Die meisten modernen Browser unterstützen die als "Inkognito", "Privates Surfen" o.ä. bezeichnete Datenschutz-Option, welche keine Daten wie Verlauf und Cookies speichert. Aus ersichtlichen Gründen ist dies grundsätzlich inkompatibel mit Web Storage. Nichtsdestotrotz experimentieren Browseranbieter mit verschiedenen Szenarien, um mit dieser Inkompatibilität umzugehen.</p>
<p>Für die meisten Browser hat man sich für eine Strategie entschieden, wobei Speicher-APIs vorhanden und scheinbar voll funktionsfähig sind, mit dem einen großen Unterschied, dass alle gespeicherten Daten gelöscht werden, nachdem der Browser geschlossen wird. Für diese Browser bestehen desweiteren unterschiedliche Interpretationen dazu, was mit den vorhandenen abgespeicherten Daten (aus einer regulären Sitzung) geschehen soll. Sollten sie zum Abruf zur Verfügung stehen, um im Inkognito-Modus gelesen werden zu können? Dann gibt es einige Browser, insbesondere Safari, welche sich dazu entschieden haben, den Speicher zur Verfügung zu stellen, dieser jedoch leer ist und ihm ein Speicheranteil von 0 Byte zugeordnet ist. Dadurch machen sie es praktisch unmöglich, Daten auf den Speicher zu schreiben.</p>
<p>Entwicklern sollten diese unterschiedlichen Implementierungen bewusst sein und sie sollten dies bei der Entwicklung von Webseiten, welche von den Web Storage APIs abhängen, in Betracht ziehen. Für weitere Informationen werfe man einen Blick auf <a href="https://blog.whatwg.org/tag/localstorage">diesen WHATWG Blogpost</a> , das sich insbesondere mit diesem Thema befasst.</p>
<h2 id="Siehe_auch">Siehe auch</h2>
<p><a href="/de/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a><br>
<a href="https://medium.com/@ramsunvtech/onfocus-html5-storage-apis-b45d92aa424b">HTML5 Storage API By Venkatraman</a></p>
|
