---
title: IndexedDB
slug: Web/API/IndexedDB_API
translation_of: Web/API/IndexedDB_API
---
<div>
  IndexedDB is een API voor het opslaan van significante hoeveelheden van gestructureerde</div>
<div>
  data op de cliënt en voor hoogperformante opzoekingen van deze data door het gebruik van indexen.</div>
<div>
  Terwijl <a href="/en-US/docs/DOM/Storage" title="en-US/docs/DOM/Storage">DOM Storage</a> handig is voor het opslaan van kleinere hoeveelheden van data is het minder bruikbaar voor de </div>
<div>
  opslag van grotere hoeveelheden van gestructureerde data.</div>
<div>
  IndexedDB levert hiervoor de oplossing.</div>
<div>
   </div>
<div>
  <div>
    Deze pagina is het startpunt voor de technische omschrijving van de API objecten.</div>
  <div>
    Als je een basis nodig hebt kan je <a href="/en-US/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB" style="line-height: inherit;" title="/en-US/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB">Basic Concepts About IndexedDB</a> consulteren<span style="line-height: inherit;">. Voor meer details kan je </span><a href="https://developer.mozilla.org/en-US/docs/IndexedDB/Using_IndexedDB" style="line-height: inherit;" title="https://developer.mozilla.org/en-US/docs/IndexedDB/Using_IndexedDB">Using IndexedDB</a> raadplegen.</div>
  <div>
     </div>
  <div>
    IndexedDB voorziet aparte APIs voor synchrone en asynchrone toegang.</div>
  <div>
    De synchrone API is bedoeld voor het gebruik in <a href="/en-US/docs/DOM/Worker" style="line-height: inherit;" title="Worker">Web Workers</a>, maar is nog door geen enkele browser geimplementeerd.</div>
  <div>
    <span style="line-height: inherit;">De asynchrone API werkt zowel met als zonder Web Workers, maar Firefox heeft dit nog niet geïmplementeerd.</span></div>
</div>
<h2 id="Asynchrone_API"><br>
  Asynchrone API</h2>
<p>De asynchrone API methoden geven feedback zonder de oproepende thread te blokkeren.<br>
  Om asynchrone toegang tot een database te verkrijgen roep je <code style="font-size: 14px; line-height: inherit;"><a href="/en-US/docs/IndexedDB/IDBFactory#open" title="en-US/docs/IndexedDB/IDBFactory#open">open</a>()</code><span style="line-height: inherit;"> op het </span><a href="/en-US/docs/IndexedDB/IDBEnvironment#attr_indexedDB" style="line-height: inherit;" title="en-US/docs/IndexedDB/IDBEnvironment#attr indexedDB"><code>indexedDB</code></a><span style="line-height: inherit;"> attribuut van een </span><a href="/en-US/docs/DOM/window" style="line-height: inherit;" title="en-US/docs/DOM/window">window</a><span style="line-height: inherit;"> object. Deze methode stuurt een IDBRequest object (IDBOpenDBRequest); asynchrone operaties communiceren met de oproepende applicatie door events uit te voeren op  IDBRequest objecten.</span></p>
<div class="note">
  <p>Notitie: Het <code>indexedDB</code> object heeft een prefix in oudere browserversies (eigendom <code>mozIndexedDB</code> in Gecko &lt; 16, <code>webkitIndexedDB</code> in Chrome, en <code>msIndexedDB</code> in IE 10).</p>
</div>
<ul>
  <li><a href="/en-US/docs/IndexedDB/IDBFactory" title="en-US/docs/IndexedDB/IDBFactory"><code>IDBFactory</code></a> voorziet toegang tot een database. Dit is de interface die geïmplementeerd is door het globale object <code>indexedDB</code> en het is daarom het startpunt van de API.</li>
  <li><a href="/en-US/docs/IndexedDB/IDBCursor" title="en-US/docs/IndexedDB/IDBCursor"><code>IDBCursor</code></a> itereert over object stores en indexen.</li>
  <li><a href="/en-US/docs/IndexedDB/IDBCursorWithValue"><code>IDBCursorWithValue</code></a> Itereert over object stores en indexen en stuurt de huidige waarde van de cursor terug.</li>
  <li><a href="/en-US/docs/IndexedDB/IDBDatabase" title="en-US/docs/IndexedDB/IDBDatabase"><code>IDBDatabase</code></a> stelt een connectie naar de database voor, het is de enige manier om een transactie te verkrijgen op de database.</li>
  <li><a href="/en-US/docs/IndexedDB/IDBEnvironment" title="en-US/docs/IndexedDB/IDBEnvironment"><code>IDBEnvironment</code></a> voorziet toegang tot een client gebaseerde database. Het is geïmplementeerd door <a href="/../en-US/docs/DOM/window" rel="internal" title="../en-US/docs/DOM/window">window</a> objecten.</li>
  <li><a href="/en-US/docs/IndexedDB/IDBIndex" title="en-US/docs/IndexedDB/IDBIndex"><code>IDBIndex</code></a> voorziet toegang tot de metadata van een index.</li>
  <li><code><a href="/en-US/docs/IndexedDB/IDBKeyRange" title="en-US/docs/IndexedDB/KeyRange">IDBKeyRange</a></code> definieert een bereik van sleutels.</li>
  <li><a href="/en-US/docs/IndexedDB/IDBObjectStore" title="en-US/docs/IndexedDB/IDBObjectStore"><code>IDBObjectStore</code></a> stelt een object store voor.</li>
  <li><a href="/en-US/docs/IndexedDB/IDBOpenDBRequest" title="en-US/docs/IndexedDB/IDBOpenDBRequest"><code>IDBOpenDBRequest</code></a> stelt een aanvraag voor om de database te openen.</li>
  <li><a href="/en-US/docs/IndexedDB/IDBRequest" title="en-US/docs/IndexedDB/IDBRequest"><code>IDBRequest</code></a> voorziet toegang tot resultaten van asynchrone aanvragen naar databases en database objecten.  Je verkrijgt dit wanneer je een asynchrone methode oproept.</li>
  <li><a href="/en-US/docs/IndexedDB/IDBTransaction" title="en-US/docs/IndexedDB/IDBTransaction"><code>IDBTransaction</code></a> stelt een transactie voor.  Je maakt een transactie op de database, specifieert de omvang (zoals welke object stores je toegang toe wil verkrijgen), en bepaal de soort van toegang die je wil (enkel lezen of schrijven).</li>
  <li><a href="/en-US/docs/IndexedDB/IDBVersionChangeEvent" title="IDBVersionChangeEvent"><code>IDBVersionChangeEvent</code></a> duidt aan dat de versie van de database is veranderd.</li>
</ul>
<p>Een vroege versie van de specificatie definieert ook deze nu verwijderde interfaces. Ze zijn nog steeds gedocumenteerd in geval u oudere code moet aanpassen:</p>
<ul>
  <li><code><a href="/en-US/docs/IndexedDB/IDBVersionChangeRequest" title="https://developer.mozilla.org/en-US/docs/IndexedDB/IDBVersionChangeRequest">IDBVersionChangeRequest</a></code> stelt een aanvraag voor om de versie van een database te veranderen. De manier om de database aan te passen is sindsdien veranderd (door <a href="/en-US/docs/IndexedDB/IDBFactory#open" title="en-US/docs/IndexedDB/IDBFactory#open"><code>IDBFactory.open()</code></a> op te roepen zonder ook <code><a href="/en-US/docs/IndexedDB/IDBDatabase#setVersion()" title="en-US/docs/IndexedDB/IDBDatabase#setVersion()">IDBDatabase.setVersion()</a></code>op te roepen), en de interface <a href="/en-US/docs/IndexedDB/IDBOpenDBRequest" title="en-US/docs/IndexedDB/IDBOpenDBRequest"><code>IDBOpenDBRequest</code></a> heeft nu de functionaliteit van het verwijderde <code>IDBVersionChangeRequest</code>.</li>
  <li><code><a href="/en-US/docs/IndexedDB/IDBDatabaseException" title="en-US/docs/IndexedDB/DatabaseException">IDBDatabaseException </a></code> {{ obsolete_inline() }} stelt uitzonderingcondities voor die kunnen voorkomen bij het uitvoeren van database operaties.</li>
</ul>
<p>Er is ook een <a href="/en-US/docs/IndexedDB/Syncronous_API" title="/en-US/docs/IndexedDB/SyncronousAPI">synchronone versie van de API</a>.  De synchrone API is nog in geen enkele browser geïmplementeerd. Het is bedoeld om te werken met <a href="/en-US/docs/DOM/Using_web_workers" title="https://developer.mozilla.org/en-US/docs/Using_web_workers">WebWorkers</a>.</p>
<h2 id="Opslaglimieten">Opslaglimieten</h2>
<p>Er is geen limiet op een enkel database item qua omvang.<br>
  Echter kan er wel een limiet zijn op elke indexedDB database omvang.<br>
  Deze limiet (en hoe de gebruikerinterface deze zal verklaren) kan variëren per browser.</p>
<ul>
  <li>
    <p>Firefox: geen limiet op de IndexedDB database omvang. De gebruikersinterface zal enkel permissie vragen om blobs groter dan 50MB op te slaan. Deze quota kan aangepast worden via de <code>dom.indexedDB.warningQuota</code> instelling (dewelke gedefinieerd is in <a href="http://mxr.mozilla.org/mozilla-central/source/modules/libpref/src/init/all.js" title="http://mxr.mozilla.org/mozilla-central/source/modules/libpref/src/init/all.js">http://mxr.mozilla.org/mozilla-central/source/modules/libpref/src/init/all.js</a>).</p>
  </li>
  <li>Google Chrome: zie <a class="link-https" href="https://developers.google.com/chrome/whitepapers/storage#temporary" rel="freelink">https://developers.google.com/chrome...rage#temporary</a></li>
</ul>
<h2 id="Example" name="Example">Voorbeeld</h2>
<p>Een krachtig voorbeeld waarvoor indexedDB gebruikt kan worden op het web is een voorbeeld door Marco Castelluccio, winnaar van de IndexedDB Mozilla DevDerby. De winnende demo was <a href="/en-US/demos/detail/elibri" title="https://developer.mozilla.org/en-US/demos/detail/elibri">eLibri</a>, een bibliotheek en eBook lezer applicatie.</p>
<h2 id="Browser_compatibility" name="Browser_compatibility">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>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>Asynchronous API</td>
        <td>
          <p>24.0<br>
            11.0 {{ property_prefix("webkit") }}</p>
        </td>
        <td>{{ CompatGeckoDesktop("16.0") }}<br>
          {{ CompatGeckoDesktop("2.0") }} {{ property_prefix("moz") }}</td>
        <td>10</td>
        <td>15.0</td>
        <td>{{ CompatNo() }}</td>
      </tr>
      <tr>
        <td>Synchronous API<br>
          (used with <a href="/en-US/docs/DOM/Using_web_workers" title="https://developer.mozilla.org/en-US/docs/Using_web_workers">WebWorkers</a>)</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}<br>
          See {{ bug(701634) }}</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>Asynchronous API</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatGeckoDesktop("6.0") }} {{ property_prefix("moz") }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<p>Er is ook de mogelijkheid om IndexedDB te gebruiken op oudere browsers die <a href="http://caniuse.com/sql-storage" title="http://caniuse.com/sql-storage">WebSQL</a> ondersteunen door gebruik te maken van <a href="https://github.com/axemclion/IndexedDBShim" title="https://github.com/axemclion/IndexedDBShim">IndexedDB Polyfill</a>.</p>
<h2 id="Zie_ook">Zie ook</h2>
<ul>
  <li><a href="/en-US/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB" title="en-US/docs/IndexedDB/Basic Concepts Behind IndexedDB">Basic Concepts About IndexedDB</a></li>
  <li><a href="/en-US/docs/IndexedDB/Using_IndexedDB" title="en-US/docs/IndexedDB/IndexedDB primer">Using IndexedDB</a></li>
  <li><a class="external" href="http://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/" title="http://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/">Storing images and files in IndexedDB</a></li>
  <li><a class="external" href="http://www.html5rocks.com/tutorials/indexeddb/todo/" title="http://www.html5rocks.com/tutorials/indexeddb/todo/">A simple TODO list using HTML5 IndexedDB</a>. {{ Note("Deze zelfstudie is gebaseerd op een oude versie van de specificatie en werkt niet met up-to-date browsers: bijvoorbeeld:  Het gebruikt nog steeds deverwijderde  <code>setVersion()</code> methode.") }}</li>
  <li><a class="external" href="http://www.w3.org/TR/IndexedDB/" title="http://www.w3.org/TR/IndexedDB/">Indexed Database API specification </a></li>
  <li><a class="external" href="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx" title="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx">IndexedDB — The Store in Your Browser</a></li>
  <li><a class="external" href="http://nparashuram.com/IndexedDB/trialtool/index.html" title="http://nparashuram.com/IndexedDB/trialtool/index.html">IndexedDB Examples</a></li>
  <li><a href="https://github.com/axemclion/IndexedDBShim" title="https://github.com/axemclion/IndexedDBShim">IndexedDB Polyfill</a> voor browsers die enkel WebSQL ondersteunen (vb. mobile WebKit)</li>
  <li><a href="http://nparashuram.com/IndexedDBShim/" title="http://nparashuram.com/IndexedDBShim/">JQuery IndexedDB plugin</a></li>
</ul>