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
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
|
---
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 < <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 ><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> && ≤ <strong>y</strong></td>
<td>{{domxref("IDBKeyRange.bound")}}<code>(<strong>x</strong>, <strong>y</strong>)</code></td>
</tr>
<tr>
<td>Toutes les clés > <strong>x</strong> &&< <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 > <strong>x</strong> && ≤ <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> &&< <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 = '<strong>' + cursor.value.fThing + '</strong>, ' + 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>
|
