---
title: IDBKeyRange
slug: Web/API/IDBKeyRange
tags:
  - API
  - Database
  - IDBKeyRange
  - IndexedDB
  - Interface
  - Reference
  - Storage
  - TopicStub
translation_of: Web/API/IDBKeyRange
---
<div>{{APIRef("IndexedDB")}}</div>

<p>L'interface <strong><code>IDBKeyRange</code></strong> de l'API <a href="/fr/docs/Web/API/API_IndexedDB">IndexedDB</a> représente un intervalle continue sur un type de donnée utilisé pour représenter des clés. Les enregistrements peuvent être récupérés depuis des objets {{domxref("IDBObjectStore")}} et {{domxref("IDBIndex")}} grâce à des clés ou à des intervalles de clé. Il est possible de préciser les bornes inférieure et supérieure de l'intervalle. Si les clés sont des chaînes de caractères, on pourrait ainsi parcourir l'ensemble des valeurs pour l'intervalle A–Z.</p>

<p>Un intervalle de clé peut être une seule valeur ou un intervalle avec des bornes inférieure et supérieure. Si l'intervalle possède ces deux bornes, il est dit borné. S'il n'a aucune borne, il est non-borné. Un intervalle de clé borné peut être ouvert (les bornes sont exclues) ou fermé (les bornes sont inclues). Pour récupérer les différentes clés d'un intervalle donné, on peut utiliser les fragments de code suivants :</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Intervalle</th>
   <th scope="col">Code</th>
  </tr>
  <tr>
   <td>Toutes les clés ≤ <strong>x</strong></td>
   <td>{{domxref("IDBKeyRange.upperBound")}}<code>(<strong>x</strong>)</code></td>
  </tr>
  <tr>
   <td>Toutes les clés &lt; <strong>x</strong></td>
   <td>{{domxref("IDBKeyRange.upperBound")}}<code>(<strong>x</strong>, true) </code></td>
  </tr>
  <tr>
   <td>Toutes les clés ≥<strong> y</strong></td>
   <td>{{domxref("IDBKeyRange.lowerBound")}}<code>(<strong>y</strong>)</code></td>
  </tr>
  <tr>
   <td>Toutes les clés &gt;<strong> y</strong></td>
   <td>{{domxref("IDBKeyRange.lowerBound")}}<code>(<strong>y</strong>, true)</code></td>
  </tr>
  <tr>
   <td>Toutes les clés ≥ <strong>x</strong> &amp;&amp; ≤ <strong>y</strong></td>
   <td>{{domxref("IDBKeyRange.bound")}}<code>(<strong>x</strong>, <strong>y</strong>)</code></td>
  </tr>
  <tr>
   <td>Toutes les clés &gt; <strong>x</strong> &amp;&amp;&lt; <strong>y</strong></td>
   <td>{{domxref("IDBKeyRange.bound")}}<code>(<strong>x</strong>, <strong>y</strong>, true, true)</code></td>
  </tr>
  <tr>
   <td>Toutes les clés &gt; <strong>x</strong> &amp;&amp; ≤ <strong>y</strong></td>
   <td>{{domxref("IDBKeyRange.bound")}}<code>(<strong>x</strong>, <strong>y</strong>, true, false)</code></td>
  </tr>
  <tr>
   <td>Toutes les clés ≥ <strong>x</strong> &amp;&amp;&lt; <strong>y</strong></td>
   <td>{{domxref("IDBKeyRange.bound")}}<code>(<strong>x</strong>, <strong>y</strong>, false, true)</code></td>
  </tr>
  <tr>
   <td>La clé = <strong>z</strong></td>
   <td>{{domxref("IDBKeyRange.only")}}<code>(<strong>z</strong>)</code></td>
  </tr>
 </thead>
</table>

<p>Une clé est contenue dans un intervalle de clé lorsque les conditions suivantes sont réunies :</p>

<ul>
 <li>La borne inférieure de l'intervalle de clé est :
  <ul>
   <li><code>undefined</code></li>
   <li>Inférieure à la valeur de la clé</li>
   <li>Égal à la valeur de la clé si <code>lowerOpen</code> est <code>false</code> (l'intervalle est fermé à gauche)</li>
  </ul>
 </li>
 <li>La borne supérieure de l'intervalle de clé est :
  <ul>
   <li><code>undefined</code></li>
   <li>Supérieure à la valeur de la clé</li>
   <li>Égal à la valeur de la clé si <code>upperOpen</code> vaut <code>false</code> (l'intervalle est fermé à droite)</li>
  </ul>
 </li>
</ul>

<p>{{AvailableInWorkers}}</p>

<h2 id="Propriétés">Propriétés</h2>

<dl>
 <dt>{{domxref("IDBKeyRange.lower")}} {{readonlyInline}}</dt>
 <dd>Cette propriété fournit la borne inférieure de l'intervalle de clé.</dd>
 <dt>{{domxref("IDBKeyRange.upper")}} {{readonlyInline}}</dt>
 <dd>Cette propriété fournit la borne supérieure de l'intervalle de clé.</dd>
 <dt>{{domxref("IDBKeyRange.lowerOpen")}} {{readonlyInline}}</dt>
 <dd>Cette méthode renvoie <code>false</code> si la borne inférieure est contenue dans l'intervalle de clé (autrement dit elle permet de vérifier si l'intervalle est ouvert à gauche).</dd>
 <dt>{{domxref("IDBKeyRange.upperOpen")}} {{readonlyInline}}</dt>
 <dd>Cette méthode renvoie <code>false</code> si la borne supérieure est contenue dans l'intervalle de clé (autrement dit elle permet de vérifier si l'intervalle est ouvert à droite).</dd>
</dl>

<h2 id="Méthodes">Méthodes</h2>

<h3 id="Méthodes_statiques">Méthodes statiques</h3>

<dl>
 <dt>{{domxref("IDBKeyRange.bound()")}}</dt>
 <dd>Cette méthode permet de créer un nouvel intervalle de clé avec une borne inférieure et une borne supérieure.</dd>
 <dt>{{domxref("IDBKeyRange.only()")}}</dt>
 <dd>Cette méthode crée un nouvel intervalle de clé qui ne contient qu'une valeur.</dd>
 <dt>{{domxref("IDBKeyRange.lowerBound()")}}</dt>
 <dd>Cette méthode crée un nouvel intervalle de clé avec une borne inférieure.</dd>
 <dt>{{domxref("IDBKeyRange.upperBound()")}}</dt>
 <dd>Cette méthode crée un nouvel intervalle de clé avec une borne supérieure.</dd>
</dl>

<h3 id="Méthodes_des_instances">Méthodes des instances</h3>



<dl>
 <dt>{{domxref("IDBKeyRange.includes()")}}</dt>
 <dd>Cette méthode renvoie un booléen qui indique si la clé passée en argument est contenue dans l'intervalle de clé.</dd>
</dl>



<dl>
</dl>

<h2 id="Exemples">Exemples</h2>

<p>Dans l'exemple qui suit, on montre comment utiliser un intervalle de clé. Ici, on déclare un objet <code>keyRangeValue</code> qui représente un intervalle pour les valeurs entre "A" et "F". On ouvre une transaction grâce à {{domxref("IDBTransaction")}}, on ouvre également un magasin d'objets puis un curseur avec la méthode {{domxref("IDBObjectStore.openCursor")}} pour lequel on indique que <code>keyRangeValue</code> est l'intervalle de clé à considérer. Cela signifie que le curseur récupèrera uniquement les enregistrements pour lesquels les clés sont contenues dans cet intervalle. Cet intervalle est fermé, il inclut les valeur "A" and "F" (on n'a pas indiqué que ces bornes étaient ouvertes). Si on avait utilisé <code>IDBKeyRange.bound("A", "F", true, true);</code>, l'intervalle serait ouvert et ne contiendrait pas "A" ou "F" mais uniquement les valeurs intermédiaires.</p>

<pre class="brush: js notranslate">function displayData() {
  var keyRangeValue = IDBKeyRange.bound("A", "F");

  var transaction = db.transaction(['fThings'], 'readonly');
  var objectStore = transaction.objectStore('fThings');

  objectStore.openCursor(keyRangeValue).onsuccess = function(event) {
    var cursor = event.target.result;
      if(cursor) {
        var listItem = document.createElement('li');
        listItem.innerHTML = '&lt;strong&gt;' + cursor.value.fThing + '&lt;/strong&gt;, ' + cursor.value.fRating;
        list.appendChild(listItem);

        cursor.continue();
      } else {
        console.log('Les éléments ont été affichés.');
      }
    };
  };</pre>

<div class="note">
<p><strong>Note </strong>: Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter <a href="https://github.com/mdn/IDBKeyRange-example">le dépôt GitHub IDBKeyRange-example</a> (<a href="https://mdn.github.io/IDBKeyRange-example/">ainsi que la démonstration associée</a>).</p>
</div>

<h2 id="Spécifications">Spécifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">État</th>
   <th scope="col">Commentaires</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('IndexedDB', '#idl-def-IDBKeyRange', 'IDBKeyRange')}}</td>
   <td>{{Spec2('IndexedDB')}}</td>
   <td>Définition initiale.</td>
  </tr>
  <tr>
   <td>{{SpecName('IndexedDB 2', '#keyrange', 'IDBKeyRange')}}</td>
   <td>{{Spec2('IndexedDB')}}</td>
   <td>Ajout de <code>includes()</code>.</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<p>{{Compat("api.IDBKeyRange")}}</p>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
 <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
 <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
 <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
 <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
 <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
 <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
</ul>