Merge pull request #35 from fiji-flo/unslugging-nl

Unslugging nl

5 files changed, 825 insertions, 1 deletions

diff --git a/files/nl/web/api/window.crypto.getrandomvalues/index.html b/files/nl/web/api/crypto/getrandomvalues/index.html
index c91a691be9..1bd7b38c19 100644
--- a/files/nl/web/api/window.crypto.getrandomvalues/index.html
+++ b/files/nl/web/api/crypto/getrandomvalues/index.html
@@ -1,7 +1,8 @@
 ---
 title: window.crypto.getRandomValues
-slug: Web/API/window.crypto.getRandomValues
+slug: Web/API/Crypto/getRandomValues
 translation_of: Web/API/Crypto/getRandomValues
+original_slug: Web/API/window.crypto.getRandomValues
 ---
 <p>{{ ApiRef() }}</p>
 <p>{{ SeeCompatTable() }}</p>
diff --git a/files/nl/web/api/element/mousedown_event/index.html b/files/nl/web/api/element/mousedown_event/index.html
new file mode 100644
index 0000000000..928737e695
--- /dev/null
+++ b/files/nl/web/api/element/mousedown_event/index.html
@@ -0,0 +1,235 @@
+---
+title: mousedown
+slug: Web/API/Element/mousedown_event
+tags:
+  - API
+  - DOM
+  - Event
+  - Interface
+  - NeedsSpecTable
+  - Referentie
+translation_of: Web/API/Element/mousedown_event
+original_slug: Web/Events/mousedown
+---
+<div>Het <code>mousedown </code>event wordt opgeworpen wanneer de knop van een aanwijs device wordt ingedrukt op een element.</div>
+
+<h2 id="Algemene_info">Algemene info</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Specificatie</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mousedown">DOM L3</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("MouseEvent")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt>
+ <dd style="margin: 0 0 0 120px;">Ja</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt>
+ <dd style="margin: 0 0 0 120px;">Ja</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Doel</dt>
+ <dd style="margin: 0 0 0 120px;">Element</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Default Actie</dt>
+ <dd style="margin: 0 0 0 120px;">Varieert: Start een drag/drop operatie; start een text selectie; start een scroll/pan interactie (in combinatie met de middelste muisknop, indien ondersteund)</dd>
+</dl>
+
+<h2 id="Eigenschappen">Eigenschappen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Eigenschap</th>
+   <th scope="col">Type</th>
+   <th scope="col">Beschrijving</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>Het event target (het hoogste target in de DOM boom).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Het type van het event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>Boolean</td>
+   <td>Of het event normaalgezien bubblet of niet</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td><code>Boolean</code></td>
+   <td>Kan het event gecancellet worden of niet?</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td>{{domxref("WindowProxy")}}</td>
+   <td>{{domxref("document.defaultView")}} (<code>window</code> van het document)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td><code>long</code> (<code>float</code>)</td>
+   <td>Het aantal opeenvolgende clicks in een kort inerval, plus een.</td>
+  </tr>
+  <tr>
+   <td><code>currentTarget</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>De node waar de event listener aan hangt.</td>
+  </tr>
+  <tr>
+   <td><code>relatedTarget</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>Voor <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> en <code>mouseleave</code> events: target van het complementaire event (<code>mouseleave</code> target in het geval van een <code>mouseenter</code> event). <code>null</code> anders.</td>
+  </tr>
+  <tr>
+   <td><code>screenX</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>De X coordinaat van de muiscursor in globale (scherm) coordinaten.</td>
+  </tr>
+  <tr>
+   <td><code>screenY</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>De Y coordinaat van de muiscursor in globale (scherm) coordinaten.</td>
+  </tr>
+  <tr>
+   <td><code>clientX</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>De X coordinaat van de muiscursor in lokale (DOM inhoud) coordinaten.</td>
+  </tr>
+  <tr>
+   <td><code>clientY</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>De Y coordinaat van de muiscursor in lokale (DOM inhoud) coordinaten.</td>
+  </tr>
+  <tr>
+   <td><code>button</code> {{readonlyInline}}</td>
+   <td>unsigned short</td>
+   <td>Het getal van de knop die ingedrukt werd toen het event afgevuurd werd: Linkse knop=0, middelste knop=1 (indien aanwezig), rechtse knop=2. Voor muizen geconfigureerd voor linkshandig gebruik, waarbij de knopacties omgekeerd zijn, worden de waarden van rechts naar links gelezen.</td>
+  </tr>
+  <tr>
+   <td><code>buttons</code> {{readonlyInline}}</td>
+   <td>unsigned short</td>
+   <td>
+    <p>De knoppen die ingedrukt werden op het moment dat het muisevent afgevuurd werd: Linkse knop=1, Rechtse knop=2, Middelste (wiel) knop=4, 4e knop (typisch, "Browser Back" knop)=8, 5e knop (typisch, "Browser Forward" knop)=16. Indien twee of meer knoppen samen ingedrukt zijn, wordt de logische som van de waarden teruggegeven. B.v., indien zowel de linkse als de rechtse knop ingedrukt worden, wordt 3 teruggeven  (=1 | 2). <a href="/en-US/docs/Web/API/MouseEvent">Meer info</a>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>mozPressure</code> {{readonlyInline}}</td>
+   <td>float</td>
+   <td>
+    <p>De hoeveelheid druk toegepast op een touch of tabdevice, wanneer het event gegenereerd werd; deze waarde ligt tussen 0.0 (minimale druk) en 1.0 (maximale druk).</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>ctrlKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> indien de control toets ingedrukt was wanneer het event gevuurd werd. <code>false</code> indien niet.</td>
+  </tr>
+  <tr>
+   <td><code>shiftKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> indien de shift key ingedrukt was wanneer het event gevuurd werd. <code>false</code> indien niet.</td>
+  </tr>
+  <tr>
+   <td><code>altKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> indien de alt key ingedrukt was wanneer het event gevuurd werd. <code>false</code> indien niet.</td>
+  </tr>
+  <tr>
+   <td><code>metaKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> indien de meta key ingedrukt was wanneer het event gevuurd werd. <code>false</code> indien niet.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibiliteit">Browser compatibiliteit</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>Edge</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basis support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>
+    <p>Op disabled form elements</p>
+   </td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</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 Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basis support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Op disabled form elements</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Werkt enkel voor {{HTMLElement("textarea")}} elementen and enkele {{HTMLElement("input")}} element types.</p>
+
+<h2 id="Zie_ook">Zie ook</h2>
+
+<ul>
+ <li>{{Event("mousedown")}}</li>
+ <li>{{Event("mouseup")}}</li>
+ <li>{{Event("mousemove")}}</li>
+ <li>{{Event("click")}}</li>
+ <li>{{Event("dblclick")}}</li>
+ <li>{{Event("mouseover")}}</li>
+ <li>{{Event("mouseout")}}</li>
+ <li>{{Event("mouseenter")}}</li>
+ <li>{{Event("mouseleave")}}</li>
+ <li>{{Event("contextmenu")}}</li>
+</ul>
diff --git a/files/nl/web/api/element/mouseout_event/index.html b/files/nl/web/api/element/mouseout_event/index.html
new file mode 100644
index 0000000000..a3fdc91448
--- /dev/null
+++ b/files/nl/web/api/element/mouseout_event/index.html
@@ -0,0 +1,260 @@
+---
+title: mouseout
+slug: Web/API/Element/mouseout_event
+translation_of: Web/API/Element/mouseout_event
+original_slug: Web/Events/mouseout
+---
+<p>Het <code>mouseout</code> event wordt uitgevoerd wanneer een aanwijzend apparaat (doorgaans een muis) van het element (of een van zijn children) dat de listener aan zich heeft verbonden,  af is bewogen.  </p>
+
+<h2 id="Algemene_info">Algemene info</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Specificatie</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseout" title="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-dblclick">DOM L3</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">MouseEvent</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt>
+ <dd style="margin: 0 0 0 120px;">Ja</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt>
+ <dd style="margin: 0 0 0 120px;">Ja</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Target</dt>
+ <dd style="margin: 0 0 0 120px;">Element</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Default Action</dt>
+ <dd style="margin: 0 0 0 120px;">Geen</dd>
+</dl>
+
+<h2 id="Eigenschappen">Eigenschappen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Whether the event normally bubbles or not</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Whether the event is cancellable or not?</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td>
+   <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td><code>long</code> (<code>float</code>)</td>
+   <td>A count of consecutive clicks that happened in a short amount of time, incremented by one.</td>
+  </tr>
+  <tr>
+   <td><code>currentTarget</code> {{readonlyInline}}</td>
+   <td>EventTarget</td>
+   <td>The node that had the event listener attached.</td>
+  </tr>
+  <tr>
+   <td><code>relatedTarget</code> {{readonlyInline}}</td>
+   <td>EventTarget</td>
+   <td>For <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> and <code>mouseleave</code> events: the target of the complementary event (the <code>mouseleave</code> target in the case of a <code>mouseenter</code> event). <code>null</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>screenX</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The X coordinate of the mouse pointer in global (screen) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>screenY</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The Y coordinate of the mouse pointer in global (screen) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>clientX</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The X coordinate of the mouse pointer in local (DOM content) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>clientY</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The Y coordinate of the mouse pointer in local (DOM content) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>button</code> {{readonlyInline}}</td>
+   <td>unsigned short</td>
+   <td>The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.</td>
+  </tr>
+  <tr>
+   <td><code>buttons</code> {{readonlyInline}}</td>
+   <td>unsigned short</td>
+   <td>The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). <a href="/en-US/docs/Web/API/MouseEvent">More info</a>.</td>
+  </tr>
+  <tr>
+   <td><code>mozPressure</code> {{readonlyInline}}</td>
+   <td>float</td>
+   <td>The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).</td>
+  </tr>
+  <tr>
+   <td><code>ctrlKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>shiftKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>altKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>metaKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voorbeeld">Voorbeeld</h2>
+
+<p>Het volgende voorbeeld illustreert het verschil tussen <code>mouseout</code> en <a href="/en-US/docs/Web/Events/mouseleave" title="/en/Mozilla_event_reference/mouseleave"><code>mouseleave</code></a> events.</p>
+
+<pre class="brush: html">&lt;ul id="test"&gt;
+  &lt;li&gt;item 1&lt;/li&gt;
+  &lt;li&gt;item 2&lt;/li&gt;
+  &lt;li&gt;item 3&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;script&gt;
+  var test = document.getElementById("test");
+
+
+  // this handler will be executed only once when the cursor moves off the unordered list
+  test.addEventListener("mouseleave", function( event ) {
+    // highlight the mouseleave target
+    event.target.style.color = "purple";
+
+    // reset the color after a short delay
+    setTimeout(function() {
+      event.target.style.color = "";
+    }, 500);
+  }, false);
+
+
+  // this handler will be executed every time the cursor is moved off a different list-item
+  test.addEventListener("mouseout", function( event ) {
+    // highlight the mouseout target
+    event.target.style.color = "orange";
+
+    // reset the color after a short delay
+    setTimeout(function() {
+      event.target.style.color = "";
+    }, 500);
+  }, false);
+&lt;/script&gt;
+</pre>
+
+<h2 id="Browsercompatibiliteit">Browsercompatibiliteit</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>Edge</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basisondersteuning</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Op disabled formelementen</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatGeckoDesktop("44.0")}}<sup>[2]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</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 Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basisondersteuning</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Op disabled formelementen</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Werkt alleen voor {{HTMLElement("textarea")}}-elementen en sommige {{HTMLElement("input")}} element types.</p>
+
+<p>[2] Geïmplementeerd in {{bug("218093")}}.</p>
+
+<h2 id="Zie_ook">Zie ook</h2>
+
+<ul>
+ <li>{{event("mousedown")}}</li>
+ <li>{{event("mouseup")}}</li>
+ <li>{{event("mousemove")}}</li>
+ <li>{{event("click")}}</li>
+ <li>{{event("dblclick")}}</li>
+ <li>{{event("mouseover")}}</li>
+ <li>{{event("mouseout")}}</li>
+ <li>{{event("mouseenter")}}</li>
+ <li>{{event("mouseleave")}}</li>
+ <li>{{event("contextmenu")}}</li>
+</ul>
diff --git a/files/nl/web/api/web_storage_api/index.html b/files/nl/web/api/web_storage_api/index.html
new file mode 100644
index 0000000000..ab4bf0d6b7
--- /dev/null
+++ b/files/nl/web/api/web_storage_api/index.html
@@ -0,0 +1,299 @@
+---
+title: DOM Storage
+slug: Web/API/Web_Storage_API
+translation_of: Web/API/Web_Storage_API
+translation_of_original: Web/Guide/API/DOM/Storage
+original_slug: DOM/Storage
+---
+<h2 id="Samenvatting">Samenvatting</h2>
+<p>DOM Storage is de naam van een set <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#storage" style="line-height: inherit;">opslag-gerelateerde features</a> <span style="line-height: inherit;">voor het eerst geïntroduceerd in de </span><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/" title="http://www.whatwg.org/specs/web-apps/current-work/">Web Applications 1.0</a><span style="line-height: inherit;">-specificatie en nu afgesplitst in zijn eigen </span><a class="external" href="http://dev.w3.org/html5/webstorage/" style="line-height: inherit;" title="http://dev.w3.org/html5/webstorage/">W3C Web Storage</a>-specificatie. DOM Storage is ontworpen met als doel een grotere, beter beveiligde en makkelijker te gebruiken alternatief voor opslaan van informatie dan cookies te zijn. Het is geintroduceerd met <a href="/en-US/docs/Firefox_2_for_developers" style="line-height: inherit;" title="Firefox_2_for_developers">Firefox 2</a> en <a class="external" href="http://developer.apple.com/safari/library/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/Name-ValueStorage/Name-ValueStorage.html" style="line-height: inherit;" title="http://developer.apple.com/safari/library/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/Name-ValueStorage/Name-ValueStorage.html">Safari 4</a>.</p>
+<div class="note">
+ <strong>Note:</strong> DOM Storage is niet hetzelfde als <a href="/en-US/docs/Storage" title="Storage">mozStorage</a> (Mozilla's XPCOM interfaces voor SQLite) of <a href="/en-US/docs/Session_store_API" title="Session_store_API">Session store API</a> (een <a href="/en-US/docs/XPCOM" title="XPCOM">XPCOM</a> opslag utility te gebruiken door extensies).</div>
+<h2 id="Omschrijving">Omschrijving</h2>
+<p>Het DOM Storage-mechanisme is een manier om key/value-paren op een veilige manier op te slaan en later ophalen voor gebruik. Het doel van deze toevoeging is om een uitgebreide manier te leveren waardoor het mogelijk wordt om interactieve applicaties te maken (inclusief geavanceerde capaciteiten, zoals het 'offline' kunnen werken voor langere tijd).</p>
+<p>Op Mozilla-gebaseerde browsers, Internet <span style="line-height: inherit;">Explorer 8+, Safari 4+, Chrome en Opera leveren allemaal een werkende implementatie van de DOM Storage-specificatie. (In het geval dat je ook oudere versies van IE ondersteunt, kan het handig zijn om te weten dat er een legacy feature genaamd "</span><a class="external" href="http://msdn.microsoft.com/en-us/library/ms531424(VS.85).aspx" style="line-height: inherit;">userData behavior</a><span style="line-height: inherit;">" in pre-8 versies van IE zit)</span></p>
+<p>DOM Storage is handig omdat er geen goede browser-only methode bestaat voor het aanhoudend opslaan van redelijke hoeveelheden data voor een willekeurige tijdsperiode. <a class="external" href="http://en.wikipedia.org/wiki/HTTP_cookie" style="line-height: inherit;">Browsercookies</a> hebben gelimiteerde capaciteit en geven geen mogelijkheid voor het organiseren van aanhoudende data. Andere methodes (zoals <a class="external" href="http://www.macromedia.com/support/documentation/en-US/docs/flashplayer/help/help02.html" style="line-height: inherit;">Flash Local Storage</a>) vereisen een externe plugin.</p>
+<p>Een van de eerste publieke applicaties die gebruik maakt van de nieuwe DOM Storage-functionalitiet (naast Internet Explorer's userData Behavior) was <a class="external" href="http://aaronboodman.com/halfnote/" style="line-height: inherit;">halfnote</a> (een notitieapplicatie) geschreven door <a class="external" href="http://aaronboodman.com/" style="line-height: inherit;">Aaron Boodman</a>. In zijn applicatie, sloeg Aaron notities zowel op door middel van een server (als een internetverbinding beschikbaar was) en een lokale dataopslag. Dit maakte het voor de gebruiker mogelijk om veilig opgeslagen notities te maken met een sporadische internetverbinding.</p>
+<p>Ondanks dat het concept, en implementatie, in halfnote redelijk simpel was, laat de creatie zien wat de mogelijkheden zijn voor een nieuw soort webapplicaties die zowel online als offline bruikbaar zijn.</p>
+<p><span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.628em; line-height: inherit;">Referentie</span></p>
+<p>Het hierop volgende zijn globale objecten die bestaan als een property van elk <a href="/en-US/docs/DOM/window" title="DOM/window"><code>window</code> object</a>. Dit betekent dat ze aangesproken kunnen worden als <code>sessionStorage</code> of <code>window.sessionStorage</code>. (Dit is belangrijk omdat je hierdoor ze kan gebruiken in IFrames om extra data op te slaan, aan te spreken, buiten wat er direct beschikbaar is in je eigen pagina.)</p>
+<h3 id="Storage"><code>Storage</code></h3>
+<p>Dit is een constructor (<code>Storage</code>) voor alle Storage instanties (<code>sessionStorage</code> en <code>globalStorage[location.hostname]).</code> Het zetten van <code>Storage.prototype.removeKey = function(key){ this.removeItem(this.key(key)) }</code> zou zowel <code>localStorage.removeKey en sessionStorage.removeKey </code><span style="line-height: inherit;">als zodanig veranderen.</span></p>
+<p><code>globalStorage</code> items zijn geen instanties van <code>Storage</code>, maar zijn instanties van <code>StorageObsolete</code>.</p>
+<p><code>Storage</code> is gedefineerd door de WhatWG <a class="external" href="http://dev.w3.org/html5/webstorage/#storage-0" title="http://dev.w3.org/html5/webstorage/#storage-0">Storage Interface</a> als het volgende:</p>
+<pre class="eval">interface <dfn>Storage</dfn> {
+  readonly attribute unsigned long <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-length" title="dom-Storage-length">length</a>;
+  [IndexGetter] DOMString <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-key" title="dom-Storage-key">key</a>(in unsigned long index);
+  [NameGetter] DOMString <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-getitem" title="dom-Storage-getItem">getItem</a>(in DOMString key);
+  [NameSetter] void <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-setitem" title="dom-Storage-setItem">setItem</a>(in DOMString key, in DOMString data);
+  [NameDeleter] void <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-removeitem" title="dom-Storage-removeItem">removeItem</a>(in DOMString key);
+  void <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-clear" title="dom-Storage-clear">clear</a>();
+};
+</pre>
+<div class="note">
+ <strong>Note: </strong>Ookal kan je de waardes lezen en schrijven door de standaard JavaScript property access methode, het gebruik van de getItem en setItem methodes wordt aangeraden.</div>
+<div class="note">
+ <strong>Note:</strong> Onthoud dat alles dat je opslaat via een store beschreven op deze pagina wordt omgezet naar een string via zijn <code>.toString</code> methode voordat het wordt opgeslagen. Een gewoon object opslaan resulteert dus in een string <code>"[object Object]"</code> dat wordt opgeslagen, in plaats van het object of zijn JSON-representatie. Het gebruik van native JSON parsing en serializatie methodes geleverd door de browser is een goede en veelvuldig gebruikte manier om objecten in string formaat op te slaan.</div>
+<h3 id="sessionStorage"><code>sessionStorage</code></h3>
+<p>Dit is een globaal object (<code>sessionStorage</code>) dat een opslagruimte biedt gedurende de duur van paginasessie. Een paginasessie duurt zolang de browser open is en overleeft het herladen van de pagina en paginarestoraties. Het openen van een pagina in een nieuwe tab of window zorgt ervoor dat een nieuwe sessie wordt gestart.</p>
+<pre class="brush:js">// Sla data op in de huidige sessie store
+sessionStorage.setItem("username", "John");
+
+// Spreek de opgeslagen data aan
+alert( "username = " + sessionStorage.getItem("username"));
+</pre>
+<p>Het <code>sessionStorage</code> object is het handigst voor het bijhouden van tijdelijke data die behouden moet blijven als de pagina per ongeluk wordt herladen.</p>
+<p>{{ fx_minversion_note("3.5", "Voor Firefox 3.5, werd sessionStorage data niet automatisch hersteld van een browsercrash. Startend vanaf Firefox 3.5, werkt dit zoals per de specificatie.") }}</p>
+<p><strong>Voorbeelden:</strong></p>
+<p>Automatisch opslaan van de inhoud van een tekstveld en als de browser per ongeluk herladen wordt, het herstellen van de inhoud van het tekstveld, zodat geen tekst verloren gaat.</p>
+<pre class="brush:js"> // Haal het tekstveld op dat we gaan volgen
+ var field = document.getElementById("field");
+
+ // Kijk of er een autosave waarde is
+ // (Dit gebeurt alleen als de pagina per ongeluk wordt herladen)
+ if ( sessionStorage.getItem("autosave")) {
+    // Herstel de inhoud van het tekstveld
+    field.value = sessionStorage.getItem("autosave");
+ }
+
+ // Bekijk de inhoud van het tekstveld iedere seconde
+ setInterval(function(){
+    // En sla het resultaat op in het sessie storage object
+    sessionStorage.setItem("autosave", field.value);
+ }, 1000);
+</pre>
+<p><strong>Meer informatie:</strong></p>
+<ul>
+ <li><a class="external" href="http://dev.w3.org/html5/webstorage/#the-sessionstorage-attribute" title="http://dev.w3.org/html5/webstorage/#the-sessionstorage-attribute">sessionStorage specificatie</a></li>
+</ul>
+<h3 id="localStorage" name="localStorage"><code>localStorage</code></h3>
+<p><code>localStorage</code> is hetzelfde als <code>{{ Anch("sessionStorage") }} </code>met dezelfde same-origin regels toegepast, maar is vasthoudend. <code>localStorage</code> werd geintroduceerd in Firefox 3.5.</p>
+<div class="note">
+ <strong>Note:</strong> Als de browser in prive browsing modus gaat, wordt er een nieuwe, tijdelijke database aangemaakt om lokale dat in op te slaan. Deze database wordt geleegd en weggegooid als prive browsing modus wordt uitgezet.</div>
+<h4 id="Compatibility">Compatibility</h4>
+<p><code>Storage</code> objecten zijn een recente toevoeging aan de standaard. Hierdoor is het mogelijk dat ze niet aanwezig zijn in alle browsers. Je kan hier omheen werken door het toevoegen van en van de volgende twee stukken code aan het begin van je scripts. Dit maakt het gebruik van het <code>localStorage</code> object mogelijk in implementaties die het niet native ondersteunen.</p>
+<p>Dit algoritme is een exacte imitatie van het <code>localStorage</code> object, maar maakt gebruik van cookies.</p>
+<pre class="brush:js">if (!window.localStorage) {
+  Object.defineProperty(window, "localStorage", new (function () {
+    var aKeys = [], oStorage = {};
+    Object.defineProperty(oStorage, "getItem", {
+      value: function (sKey) { return sKey ? this[sKey] : null; },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "key", {
+      value: function (nKeyId) { return aKeys[nKeyId]; },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "setItem", {
+      value: function (sKey, sValue) {
+        if(!sKey) { return; }
+        document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/";
+      },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "length", {
+      get: function () { return aKeys.length; },
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "removeItem", {
+      value: function (sKey) {
+        if(!sKey) { return; }
+        document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
+      },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    this.get = function () {
+      var iThisIndx;
+      for (var sKey in oStorage) {
+        iThisIndx = aKeys.indexOf(sKey);
+        if (iThisIndx === -1) { oStorage.setItem(sKey, oStorage[sKey]); }
+        else { aKeys.splice(iThisIndx, 1); }
+        delete oStorage[sKey];
+      }
+      for (aKeys; aKeys.length &gt; 0; aKeys.splice(0, 1)) { oStorage.removeItem(aKeys[0]); }
+      for (var aCouple, iKey, nIdx = 0, aCouples = document.cookie.split(/\s*;\s*/); nIdx &lt; aCouples.length; nIdx++) {
+        aCouple = aCouples[nIdx].split(/\s*=\s*/);
+        if (aCouple.length &gt; 1) {
+          oStorage[iKey = unescape(aCouple[0])] = unescape(aCouple[1]);
+          aKeys.push(iKey);
+        }
+      }
+      return oStorage;
+    };
+    this.configurable = false;
+    this.enumerable = true;
+  })());
+}
+</pre>
+<div class="note">
+ <strong>Note:</strong> De maximum grootte van de data dat kan worden opgeslagen is zeer beperkt door het gebruik van cookies.  Met dit algoritme gebruik de functies <code>localStorage.setItem()</code> en <code>localStorage.removeItem()</code> om een key toe te voegen, te veranderen of te verwijderen. Het gebruik van de methodes <code>localStorage.yourKey = yourValue;</code> en <code>delete localStorage.yourKey;</code> om een key te zetten en te verwijderen <strong>is niet een veilige manier met deze code</strong>. Je kan ook de naam veranderen en het alleen gebruiken om een documents cookies te beheren onafhankelijk van het localStorage object. Door het aanpassen van de  string <code style="background: #ccc;">"; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"</code> naar: <code style="background: #ccc;">"; path=/"</code> (en het aanpassen van de naam) wordt dit een <code>sessionStorage</code> polyfill in plaat van een <code>localStorage</code> polyfill.</div>
+<p>Hier is nog een, minder precieze, imitatie van het <code>localStorage</code> object. Het is simpeler dan de vorige, maar is compatible met oudere browsers, zoals pre-8 versie van IE (<strong>werkend getest tot Internet Explorer 6</strong>). Het maakt ook gebruik van cookies.</p>
+<pre class="brush:js">if (!window.localStorage) {
+  window.localStorage = {
+    getItem: function (sKey) {
+      if (!sKey || !this.hasOwnProperty(sKey)) { return null; }
+      return unescape(document.cookie.replace(new RegExp("(?:^|.*;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&amp;") + "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"), "$1"));
+    },
+    key: function (nKeyId) {
+      return unescape(document.cookie.replace(/\s*\=(?:.(?!;))*$/, "").split(/\s*\=(?:[^;](?!;))*[^;]?;\s*/)[nKeyId]);
+    },
+    setItem: function (sKey, sValue) {
+      if(!sKey) { return; }
+      document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/";
+      this.length = document.cookie.match(/\=/g).length;
+    },
+    length: 0,
+    removeItem: function (sKey) {
+      if (!sKey || !this.hasOwnProperty(sKey)) { return; }
+      document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
+      this.length--;
+    },
+    hasOwnProperty: function (sKey) {
+      return (new RegExp("(?:^|;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&amp;") + "\\s*\\=")).test(document.cookie);
+    }
+  };
+  window.localStorage.length = (document.cookie.match(/\=/g) || window.localStorage).length;
+}
+</pre>
+<div class="note">
+ <strong>Note: </strong> De maximum grootte van de data dat kan worden opgeslagen is zeer beperkt door het gebruik van cookies. Maak bij dit algoritme gebruik van de functies <code>localStorage.getItem()</code>, <code>localStorage.setItem()</code> and <code>localStorage.removeItem()</code> om een key te krijgen, veranderen of verwijderen. Het gebruik van de methode <code>localStorage.yourKey</code> om een key te krijgen veranderen of verwijderen <strong>is niet toegestaan bij deze code</strong>. Je kan ook de naam veranderen en het alleen gebruiken om een documents cookies te beheren onafhankelijk van het localStorage object. Door het aanpassen van de  string <code style="background: #ccc;">"; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"</code> into: <code style="background: #ccc;">"; path=/" </code> (en het aanpassen van de naam) wordt dit een <code style="font-size: 14px;">sessionStorage</code> polyfill in plaat van een <code style="font-size: 14px;">localStorage</code> polyfill.</div>
+<h4 id="Compatibility_en_de_relatie_met_globalStorage">Compatibility en de relatie met globalStorage</h4>
+<p class="note"><code>localStorage</code> is hetzelfde als <code>globalStorage[location.hostname]</code>, met de uitzondering dat deze gescoped is naar een HTML5 origin (scheme + hostname + non-standard port) en dat <code>localStorage</code> een instantie is van <code>Storage</code> in tegenstelling tot <code>globalStorage[location.hostname]</code> wat een instantie is van <code>StorageObsolete</code> welke hieronder wordt behandeld. Bijvoorbeeld, <a class="external" href="http://example.com" rel="freelink">http://example.com</a> is niet bereikbaar voor het <code>localStorage</code> object als <a class="link-https" href="https://example.com" rel="freelink">https://example.com</a> maar ze kunnen hetzelfde <code>globalStorage</code> item aanspreken. <code>localStorage</code> is een standaard interface terwijl <code>globalStorage</code> een non-standaard is, dus dien je niet er van uit te gaan dat deze beschikbaar is.</p>
+<p>Merk op dat het zetten van een property op <code>globalStorage[location.hostname]</code> deze <strong>niet</strong> zet op <code>localStorage</code> en dat het uitbreiden van <code>Storage.prototype</code> geen effect heeft op <code>globalStorage</code> items, alleen het uitbreiden van <code>StorageObsolete.prototype</code> werkt.</p>
+<h3 id="globalStorage"><code>globalStorage</code></h3>
+<div>
+ {{ Non-standard_header }}{{ obsolete_header("13.0") }}</div>
+<p><code>globalStorage </code>is verouderd sinds Gecko 1.9.1 (Firefox 3.5) en niet meer ondersteund sinds Gecko 13 (Firefox 13). Gebruik <code>{{ Anch("localStorage") }} </code>ter vervanging. Deze voorgestelde specificatie is verwijderd van de HTML5 specificatie ten gunste van <code>{{ Anch("localStorage") }}</code>, wat geimplementeerd is in Firefox 3.5. Dit is een  globaal object (<code>globalStorage</code>) dat meerdere prive opslag ruimtes bijhoud die gebruikt kunnen worden om data over een langere periode op te slaan (bijv. gedurende meerdere pagina en browser sessies).</p>
+<div class="warning">
+ Note: <code>globalStorage</code> is niet een <code>Storage</code> instantie, maar een <code>StorageList</code> instantie dat <code>StorageObsolete</code> instanties bevat.</div>
+<pre class="eval deki-transform">// Sla data op dat alleen scripts op het mozilla.org domein kunnen aanspreken
+globalStorage['mozilla.org'].setItem("snippet", "&lt;b&gt;Hello&lt;/b&gt;, how are you?");
+</pre>
+<p>Specifiek, levert het <code>globalStorage</code> object toegang tot een aantal verschillende opslag objecten waar data in kan worden opgeslagen. Bijvoorbeeld, als we een web pagina maakten dat <code>globalStorage</code> gebruikte op dit domein (developer.mozilla.org) dan hadden we de volgende opslag object tot onze beschikking:</p>
+<ul>
+ <li><code>globalStorage{{ mediawiki.external('\'developer.mozilla.org\'') }}</code> - Alle web paginas in een developer.mozilla.org sub-domein kan zowel lezen als schrijven in dit opslag object.</li>
+</ul>
+<p><strong>Voorbeelden:</strong></p>
+<p>Elk van deze voorbeelden vereist dat je een script stopt (met de volgende code) in elke pagina waar je het resultaat wilt zien.</p>
+<p>Onthoud een gebruikers gebruikersnaam voor het specifieke sub-domein dat wordt bezocht:</p>
+<pre class="eval deki-transform"> globalStorage['developer.mozilla.org'].setItem("username", "John");
+</pre>
+<p>Houd bij hoe vaak een gebruiker een pagina bezoekt op je domein:</p>
+<pre class="eval deki-transform"> // parseInt moet gebruikt worden omdat alle dat als string wordt opgeslagen
+ globalStorage['mozilla.org'].setItem("visits", parseInt(globalStorage['mozilla.org'].getItem("visits") || 0 ) + 1);
+</pre>
+<h2 id="Opslag_locatie_en_weggooien_van_de_data">Opslag locatie en weggooien van de data</h2>
+<p>In Firefox de DOM storage data wordt opgeslagen in het <a class="external" href="http://kb.mozillazine.org/Webappsstore.sqlite" title="http://kb.mozillazine.org/Webappsstore.sqlite">webappsstore.sqlite bestand</a> in de profiel folder (er is ook een chromeappsstore.sqlite bestand dat gebruikt wordt om de browsers eigen data op te slaan, <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=592990" title="https://bugzilla.mozilla.org/show_bug.cgi?id=592990">met name voor de start pagina - about:home</a>, maar mogelijk ook voor andere interne pagina met "about:" URLs).</p>
+<ul>
+ <li>DOM Storage kan verwijderd worden via "Tools -&gt; Clear Recent History -&gt; Cookies" als de tijd bereik "Everyting" is (via nsICookieManager::removeAll)
+  <ul>
+   <li>Maar niet wanneer een andere tijd bereik is gespecificeerd: (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=527667" title="https://bugzilla.mozilla.org/show_bug.cgi?id=527667">bug 527667</a>)</li>
+   <li>Verschijnt niet in Tools -&gt; Options -&gt; Privacy -&gt; Remove individual cookies (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=506692" title="https://bugzilla.mozilla.org/show_bug.cgi?id=506692">bug 506692</a>)</li>
+  </ul>
+ </li>
+ <li>DOM Storage wordt <strong>niet</strong> verwijderd via Tools -&gt; Options -&gt; Advanced -&gt; Network -&gt; Offline data -&gt; Clear Now.</li>
+ <li>Verschijnt niet in de "Tools -&gt; Options -&gt; Advanced -&gt; Network -&gt; Offline data" lijst, tenzij de site ook de offline cache gebruikt. Als de site wel verschijnt in de lijst, dan wordt de DOM storage data verwijderd samen met de <a href="/en-US/docs/HTML/Using_the_application_cache" title="Offline resources in Firefox">offline cache</a> als er op de Verwijder knop wordt gedrukt.</li>
+</ul>
+<p>Zie ook <a href="/en-US/docs/HTML/Using_the_application_cache#Storage_location_and_clearing_the_offline_cache" title="Offline resources in Firefox#Storage location and clearing the offline cache">clearing offline resources cache</a>.</p>
+<h2 id="Meer_informatie">Meer informatie</h2>
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/webstorage/" title="http://www.w3.org/TR/webstorage/">Web Storage</a> (W3C Web Apps Working Group)</li>
+ <li><a class="external" href="http://kb.mozillazine.org/Dom.storage.enabled">Enable/Disable DOM Storage in Firefox or SeaMonkey</a></li>
+</ul>
+<h2 id="Voorbeelden">Voorbeelden</h2>
+<ul>
+ <li><a class="external" href="http://www.diveintojavascript.com/tutorials/web-storage-tutorial-creating-an-address-book-application" title="JavaScript Web Storage Tutorial: Creating an Address Book Application">JavaScript Web Storage Tutorial: Creating an Address Book Application</a> - hands-on tutorial die beschrijft hoe de Web Storage API te gebruiken door een simpele adresboek applicatie te maken</li>
+ <li><a class="external" href="http://hacks.mozilla.org/2010/01/offline-web-applications/" title="http://hacks.mozilla.org/2010/01/offline-web-applications/">offline web applications</a> at hacks.mozilla.org - laat een offline app demo zien en legt uit hoe het werkt.</li>
+ <li><a class="external" href="http://noteboard.eligrey.com/" title="http://noteboard.eligrey.com/">Noteboard</a> - Notitie applicatie dat alle data lokaal opslaat.</li>
+ <li><a class="external" href="http://github.com/eligrey/jData-host" title="http://github.com/eligrey/jData-host">jData</a> - Een gedeelde localStorage object interface dat door elke website kan worden aangesproken en werkt in Firefox 3+, Webkit 3.1.2+ nightlies, en IE8. Zie het als een pseudo-globalStorage[""] maar met schrijf toegang beschermd door gebruikers bevestiging.</li>
+ <li><a class="external" href="http://codebase.es/test/webstorage.html" title="http://codebase.es/test/webstorage.html">HTML5 localStorage example</a>. Simpel en eenvoudig te begrijpen voorbeeld van localStorage. Slaat- en haalt teksten op en toont een lijst van opgeslagen items. Getest in Firefox 3 en hoger.</li>
+ <li><a class="external" href="http://upload.jonathanwilsson.com/html5/sessionstorage.php" title="http://upload.jonathanwilsson.com/html5/sessionstorage.php">HTML5 Session Storage</a>. Een zeer simpel voorbeeld van sessionStorage. Bevat ook een voorbeeld van localStorage. Getest in Firefox 3.6 of hoger.</li>
+ <li><a class="external" href="http://channy.creation.net/work/firefox/domstorage/"><strike>Basic DOMStorage Examples</strike></a><strike> - Broken in Firefox 3 and up due to use of globalStorage on one domain level up from the current domain which is not allowed in Firefox 3.</strike></li>
+ <li><a class="external" href="http://aaronboodman.com/halfnote/"><strike>halfnote</strike></a><strike> - (displaying broken in Firefox 3) Note writing application that uses DOM Storage.</strike></li>
+</ul>
+<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>
+   <tr>
+    <td>globalStorage</td>
+    <td>{{ CompatNo }}</td>
+    <td>2-13</td>
+    <td>{{ CompatNo }}</td>
+    <td>{{ CompatNo }}</td>
+    <td>{{ CompatNo }}</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>{{ CompatUnknown }}</td>
+    <td>{{ CompatUnknown }}</td>
+    <td>{{ CompatUnknown }}</td>
+    <td>{{ CompatUnknown }}</td>
+    <td>iOS 3.2</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<p>All browsers have varying capacity levels for both local- 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="Related">Related</h2>
+<ul>
+ <li><a class="external" href="http://en.wikipedia.org/wiki/HTTP_cookie">HTTP cookies</a> (<code><a href="/en-US/docs/DOM/document.cookie" title="DOM/document.cookie">document.cookie</a></code>)</li>
+ <li><a class="external" href="http://www.macromedia.com/support/documentation/en-US/docs/flashplayer/help/help02.html">Flash Local Storage</a></li>
+ <li><a class="external" href="http://msdn2.microsoft.com/en-us/library/ms531424.aspx">Internet Explorer userData behavior</a></li>
+ <li><a href="/en-US/docs/XPCOM_Interface_Reference/nsIDOMStorageEventObsolete" title="XPCOM Interface Reference/nsIDOMStorageEventObsolete">nsIDOMStorageEventObsolete</a></li>
+ <li><a href="/en-US/docs/DOM/event/StorageEvent" title="DOM/Event/StorageEvent">StorageEvent</a></li>
+ <li><a href="/en-US/docs/DOM/Storage/Implementation" title="/en-US/docs/DOM/Storage/Implementation">Implementation Details</a></li>
+</ul>
+<div>
+ {{ HTML5ArticleTOC }}</div>
diff --git a/files/nl/web/api/web_workers_api/using_web_workers/index.html b/files/nl/web/api/web_workers_api/using_web_workers/index.html
new file mode 100644
index 0000000000..7b127b0076
--- /dev/null
+++ b/files/nl/web/api/web_workers_api/using_web_workers/index.html
@@ -0,0 +1,29 @@
+---
+title: Gebruik DOM workers
+slug: Web/API/Web_Workers_API/Using_web_workers
+tags:
+  - HeeftTaalgebruikHerzieningNodig
+translation_of: Web/API/Web_Workers_API/Using_web_workers
+original_slug: Gebruik_maken_van_DOM_workers
+---
+<p>{{ fx_minversion_header(3.1) }}</p>
+<p>{{ draft() }}</p>
+<div class="warning">
+ <strong>Let op:</strong> De specificaties voor de DOM workers zijn nog niet volledig.</div>
+<p>DOM workers maken het mogelijk voor web content om scripts in achtergrond threads uit te voeren. Zodra een worker aangemaakt is kan deze thread berichten sturen door middel van een event handler, die gespecificeerd is door de maker.</p>
+<p>Een worker thread kan opdrachten uitvoeren zonder de gebruikers interface te storen.</p>
+<div class="note">
+ <strong>Notitie:</strong> Zoals altijd, background threads — inclusief workers — kunnen geen invloed uit oefenen op de DOM. Als er acties uitgevoerd moeten worden vanuit de background thread, moeten dezen eerst terug gestuurd worden naar de oorsprongkelijke maker (main thread).</div>
+<h2 id="Het_maken_van_een_worker">Het maken van een worker</h2>
+<p>Het maken van een nieuwe worker is simpel. Alles wat je hoeft te doen is de <code>Worker()</code> constructor op te roepen, opgeven van het script dat uitgevoerd moet worden in de background thread. Als je wenst notificaties te ontvangen van de worker, kun je de worker's <code>onmessage</code> property wijzigen naar een event handler functie.</p>
+<pre class="brush: js">var myWorker = new Worker('my_worker.js');
+myWorker.onmessage = function(event) {
+  print("Called back by the worker!\n");
+};</pre>
+<p>Regel 1 in dit voorbeeld maakt en start het uitvoeren van een worker thread. Regel 2 zet de <code>onmessage</code> handler voor de worker naar een functie, dat opgeroepen kan worden als de worker zijn eigen <code>postMessage()</code> functie oproept.</p>
+<h2 id="Zie_ook">Zie ook</h2>
+<ul>
+ <li><code><a class="internal" href="/Nl/DOM/Worker" title="Nl/DOM/Worker">Worker</a></code></li>
+ <li><code><a class="internal" href="/Nl/DOM/SharedWorker" title="Nl/DOM/SharedWorker">SharedWorker</a></code></li>
+ <li><code><a class="internal" href="/En/Using_DOM_workers" title="En/Using DOM workers">Using_DOM_workers (Engelstalig)</a></code></li>
+</ul>