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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
|
---
title: Storage
slug: Web/API/Storage
translation_of: Web/API/Storage
---
<p>{{APIRef("Web Storage API")}}</p>
<p>Die <code>Storage</code>-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.</p>
<p>In {{domxref("Window.sessionStorage")}} gespeicherte Daten verfallen mit Ablauf der Sitzung (in der Regel dem Schließen des Browsers), {{domxref("Window.localStorage")}} speichert die Daten hingegen grundsätzlich zeitlich unbegrenzt.</p>
<h2 id="Eigenschaften">Eigenschaften</h2>
<dl>
<dt>{{domxref("Storage.length")}} {{readonlyInline}}</dt>
<dd>Anzahl der in diesem <code>Storage</code>-Objekt gespeicherten Datensätze.</dd>
</dl>
<h2 id="Methoden">Methoden</h2>
<dl>
<dt>{{domxref("Storage.key()")}}</dt>
<dd>Gibt unter Angabe einer Zahl n den Schlüssel des n-ten Datensatzes zurück.</dd>
</dl>
<dl>
<dt>{{domxref("Storage.getItem()")}}</dt>
<dd>Gibt den zum Schlüssel gehörigen Wert zurück.</dd>
<dt>{{domxref("Storage.setItem()")}}</dt>
<dd>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.</dd>
<dt>{{domxref("Storage.removeItem()")}}</dt>
<dd>Löscht den Datensatz des gegebenen Schlüssels.</dd>
<dt>{{domxref("Storage.clear()")}}</dt>
<dd>Löscht sämtliche Datensätze des Storage-Objekts.</dd>
</dl>
<h2 id="Beispiele">Beispiele</h2>
<p>In diesem Beispiel wird auf das <code>Storage</code>-Objekt <code>localStorage</code> zugegriffen.</p>
<p>Zuerst wird mit <code>!localStorage.getItem('bgcolor') </code>geprüft, ob das Objekt keinen Datensatz namens <code>bgcolor</code> enthält. Ist der Datensatz <code>bgcolor</code> nicht vorhanden, wird <code>populateStorage()</code> aufgerufen, um Werte aus der Seite auszulesen und mittels {{domxref("Storage.setItem()")}} im <code>Storage</code>-Objekt zu speichern.<br>
Anschließend folgt der Aufruf der Funktion <code>setStyles()</code>, die alle Daten mittels {{domxref("Storage.getItem()")}} ausliest und die Darstellung der Seite entsprechend ändert.<br>
</p>
<pre class="brush: js">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);
}</pre>
<div class="note">
<p><strong>Anmerkung</strong>: Dieses Beispiel kann unter <a href="https://github.com/mdn/web-storage-demo">Web Storage Demo</a> ausprobiert werden.</p>
</div>
<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', '#the-storage-interface', 'Storage')}}</td>
<td>{{Spec2('Web Storage')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Edge</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>{{CompatVersionUnknown}}</td>
<td>3.5</td>
<td>8</td>
<td>10.50</td>
<td>4</td>
</tr>
<tr>
<td>sessionStorage</td>
<td>5</td>
<td>{{CompatUnknown}}</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>Edge</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>{{CompatVersionUnknown}}</td>
<td>{{ CompatUnknown }}</td>
<td>8</td>
<td>11</td>
<td>3.2[1]</td>
</tr>
</tbody>
</table>
</div>
<p>[1] Seit iOS 5.1 speichert Safari Mobile in <code>localStorage</code> 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.<br>
Desweiteren verhindert der private Modus von Safari Mobile jegliche Nutzung von <code>localStorage</code>.</p>
<p>Die Speicherkapazität von <code>localStorage</code> und <a class="new" href="https://developer.mozilla.org/de/docs/Web/API/SessionStorage" title="Die Beschreibung hierüber wurde bisher noch nicht geschrieben; bitte erwäge, mitzuwirken!"><code>sessionStorage</code></a>. unterscheidet sich von Browser zu Browser (siehe diese <a class="external external-icon" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">detailierte Aufstellung der Speicherkapazitäten für verschiedene Browser</a>).</p>
<h2 id="Siehe_auch">Siehe auch</h2>
<p><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a></p>
|
