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
|
---
title: Window.sessionStorage
slug: Web/API/Window/sessionStorage
tags:
- API
- Referentie
- eigenschap
- opslag
- sessie opslag
translation_of: Web/API/Window/sessionStorage
---
<p>{{APIRef()}}</p>
<p>De <code>sessionStorage</code> eigenschap stelt je in staat toegang te krijgen tot het {{domxref("Storage")}} object. sessionStorage lijkt sterk op {{domxref("Window.localStorage")}}, het enige verschil is dat data opgeslagen in localStorage geen vervaltijd heeft, waarbij sessionStorage vervalt als de sessie van de pagina vervalt. Een pagina sessie duurt zo lang de browser open is en overleeft acties als vernieuwen. <strong>Het openen van een pagina in een nieuw tabblad of window zorgt voor een nieuwe sessie</strong>, wat dus anders is dan hoe sessie-cookies werken. </p>
<h2 id="Syntax">Syntax</h2>
<pre class="brush: js">// Sla data op in sessionStorage
sessionStorage.setItem('key', 'value');
// Vraag opgeslagen data op uit sessionStorage
var data = sessionStorage.getItem('key');
// Verwijder opgeslagen data uit sessionStorage
sessionStorage.removeItem('key')
</pre>
<h3 id="Waarde">Waarde</h3>
<p>Een {{domxref("Storage")}} object.</p>
<h2 id="Voorbeeld">Voorbeeld</h2>
<p>Het volgende stukje code slaat data op in de sessie van het huidige domein door {{domxref("Storage.setItem()")}} aan te roepen op {{domxref("Storage")}}.</p>
<pre class="brush: js">sessionStorage.setItem('mijnKat', 'Tom');</pre>
<p>Het volgende voorbeeld slaat automatisch de inhoud van een text veld op en als de browser per ongeluk herladen wordt zal de text herstelt worden en is er niks verloren gegaan.</p>
<pre class="brush: js">// Zoek het veld wat je wilt bewaren in de sessie
var field = document.getElementById("field");
// Kijk eerst of we een 'autosave' waarde hebben
// (dit gebeurt alleen als je per ongeluk ververst)
if (sessionStorage.getItem("autosave")) {
// Herstel de inhoud van het veld
field.value = sessionStorage.getItem("autosave");
}
// Luister naar wijzigingen in het veld
field.addEventListener("change", function() {
// Sla het resultaat op in de sessionStorage
sessionStorage.setItem("autosave", field.value);
});</pre>
<div class="note">
<p><strong>Note</strong>: Please refer to the <a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a> article for a full example.</p>
</div>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('Web Storage', '#the-sessionstorage-attribute', 'sessionStorage')}}</td>
<td>{{Spec2('Web Storage')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</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>All browsers have varying capacity levels for both localStorage and sessionStorage. Here is a <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">detailed rundown of all the storage capacities for various browsers</a>.</p>
<div class="note">
<p><strong>Note: </strong>since iOS 5.1, Safari Mobile stores localStorage data in the cache folder, which is subject to occasional clean up, at the behest of the OS, typically if space is short.</p>
</div>
<h2 id="See_also">See also</h2>
<ul>
<li><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a></li>
<li>{{domxref("Window.localStorage")}}</li>
</ul>
|
