diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/fr/web/api/idbindex | |
parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip |
initial commit
Diffstat (limited to 'files/fr/web/api/idbindex')
-rw-r--r-- | files/fr/web/api/idbindex/count/index.html | 218 | ||||
-rw-r--r-- | files/fr/web/api/idbindex/get/index.html | 190 | ||||
-rw-r--r-- | files/fr/web/api/idbindex/getall/index.html | 101 | ||||
-rw-r--r-- | files/fr/web/api/idbindex/getallkeys/index.html | 104 | ||||
-rw-r--r-- | files/fr/web/api/idbindex/getkey/index.html | 214 | ||||
-rw-r--r-- | files/fr/web/api/idbindex/index.html | 278 | ||||
-rw-r--r-- | files/fr/web/api/idbindex/isautolocale/index.html | 81 | ||||
-rw-r--r-- | files/fr/web/api/idbindex/keypath/index.html | 165 | ||||
-rw-r--r-- | files/fr/web/api/idbindex/locale/index.html | 133 | ||||
-rw-r--r-- | files/fr/web/api/idbindex/multientry/index.html | 167 | ||||
-rw-r--r-- | files/fr/web/api/idbindex/name/index.html | 208 | ||||
-rw-r--r-- | files/fr/web/api/idbindex/objectstore/index.html | 167 | ||||
-rw-r--r-- | files/fr/web/api/idbindex/opencursor/index.html | 230 | ||||
-rw-r--r-- | files/fr/web/api/idbindex/openkeycursor/index.html | 228 | ||||
-rw-r--r-- | files/fr/web/api/idbindex/unique/index.html | 172 |
15 files changed, 2656 insertions, 0 deletions
diff --git a/files/fr/web/api/idbindex/count/index.html b/files/fr/web/api/idbindex/count/index.html new file mode 100644 index 0000000000..7571096b3e --- /dev/null +++ b/files/fr/web/api/idbindex/count/index.html @@ -0,0 +1,218 @@ +--- +title: IDBIndex.count() +slug: Web/API/IDBIndex/count +tags: + - API + - IDBIndex + - IndexedDB + - Méthode + - Reference +translation_of: Web/API/IDBIndex/count +--- +<div>{{APIRef("IndexedDB")}}</div> + +<p>La méthode <strong><code>count()</code></strong>, rattachée à l'interface {{domxref("IDBIndex")}}, renvoie un objet {{domxref("IDBRequest")}} et, dans un <em>thread</em> séparé, renvoie le nombre d'enregistrements contenu dans un intervalle de clé.</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">var <em>request</em> = <em>monIndex</em>.count(); +var <em>request</em> = <em>monIndex</em>.count(<em>cle</em>);</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>cle</code> {{optional_inline}}</dt> + <dd>La clé ou l'intervalle de clé qui définit les enregistrements qu'on souhaite compter.</dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>Un objet {{domxref("IDBRequest")}} sur lequel seront déclenchés les différents évènements relatifs à l'opération.</p> + +<h3 id="Exceptions">Exceptions</h3> + +<p>Cette méthode peut déclencher différents types d'exceptions :</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Exception</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>TransactionInactiveError</code></td> + <td>La transaction associée à cet index est inactive.</td> + </tr> + <tr> + <td><code>DataError</code></td> + <td> + <p>La clé ou l'intervalle de clé fourni possède une clé invalide.</p> + </td> + </tr> + <tr> + <td><code>InvalidStateError</code></td> + <td>L'index a été supprimé ou retiré.</td> + </tr> + </tbody> +</table> + +<h2 id="Exemples">Exemples</h2> + +<p>Dans l'exemple qui suit, on ouvre une transaction et un magasin d'objets puis on récupère l'index <code>lName</code> depuis une base de données de contacts. Ensuite, on ouvre un curseur simple sur cet index grâce à la méthode {{domxref("IDBIndex.openCursor")}} (ce qui fonctionne comme si on ouvrait un curseur sur le magasin d'objets avec {{domxref("IDBObjectStore.openCursor")}} sauf que les enregistrements sont ici triés selon l'index plutôt que selon la clé primaire).</p> + +<p><code>myIndex.count()</code> est alors utilisé afin de compter le nombre d'enregistrements dans l'index et le résultat de la requête est affiché dans la console au travers du gestionnaire d'évènements pour la réussite (<code>onsuccess</code>).</p> + +<p>Efin, on parcourt chaque enregistrement pour l'insérer dans un tableau HTML. Pour consulter un exemple fonctionnel complet, vous pouvez vous référer à notre dépôt <a href="https://github.com/mdn/IDBIndex-example">IDBIndex-example</a> (<a href="https://mdn.github.io/IDBIndex-example/">cf. la démonstration <em>live</em></a>).</p> + +<pre class="brush: js">function displayDataByIndex() { + tableEntry.innerHTML = ''; + var transaction = db.transaction(['contactsList'], 'readonly'); + var objectStore = transaction.objectStore('contactsList'); + + var myIndex = objectStore.index('lName'); + var countRequest = myIndex.count(); + countRequest.onsuccess = function() { + console.log(countRequest.result); + } + + myIndex.openCursor().onsuccess = function(event) { + var cursor = event.target.result; + if(cursor) { + var tableRow = document.createElement('tr'); + tableRow.innerHTML = '<td>' + cursor.value.id + '</td>' + + '<td>' + cursor.value.lName + '</td>' + + '<td>' + cursor.value.fName + '</td>' + + '<td>' + cursor.value.jTitle + '</td>' + + '<td>' + cursor.value.company + '</td>' + + '<td>' + cursor.value.eMail + '</td>' + + '<td>' + cursor.value.phone + '</td>' + + '<td>' + cursor.value.age + '</td>'; + tableEntry.appendChild(tableRow); + + cursor.continue(); + } else { + console.log('Éléments affichés.'); + } + }; +};</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<dl> +</dl> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('IndexedDB', '#widl-IDBIndex-count-IDBRequest-any-key', 'count()')}}</td> + <td>{{Spec2('IndexedDB')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("IndexedDB 2", "#dom-idbindex-count", "count()")}}</td> + <td>{{Spec2("IndexedDB 2")}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Support simple</td> + <td>23{{property_prefix("webkit")}}<br> + 24 (sans préfixe)</td> + <td>{{CompatVersionUnknown}}</td> + <td>10 {{property_prefix("moz")}}<br> + {{CompatGeckoDesktop("16.0")}}</td> + <td>10, partial</td> + <td>15</td> + <td>7.1</td> + </tr> + <tr> + <td>Disponible dans les <em>web workers</em></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("37.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Android</th> + <th>Webview Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome pour Android</th> + </tr> + <tr> + <td>Support simple</td> + <td>4.4</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("22.0")}}</td> + <td>10</td> + <td>22</td> + <td>8</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Disponible dans les <em>web workers</em></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("37.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Manipuler IndexedDB</a></li> + <li>Démarrer des transactions : {{domxref("IDBDatabase")}}</li> + <li>Manipuler des transactions : {{domxref("IDBTransaction")}}</li> + <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li> + <li>Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}</li> + <li>Manipuler des curseurs : {{domxref("IDBCursor")}}</li> + <li>Exemple de référence pour IndexedDB : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a></li> +</ul> diff --git a/files/fr/web/api/idbindex/get/index.html b/files/fr/web/api/idbindex/get/index.html new file mode 100644 index 0000000000..2dfbd523c7 --- /dev/null +++ b/files/fr/web/api/idbindex/get/index.html @@ -0,0 +1,190 @@ +--- +title: IDBIndex.get() +slug: Web/API/IDBIndex/get +translation_of: Web/API/IDBIndex/get +--- +<p>{{ APIRef("IndexedDB") }}</p> + +<div> +<p>La méthode <strong><code>get()</code></strong> de l'interface {{domxref("IDBIndex")}} fait une requête ({{domxref("IDBRequest")}}) pour renvoyer le premier enregistrement correspondant à la clé ou l'intervalle de clé {{domxref("IDBKeyRange","")}} du magasin d'objet suivant l'index.</p> +</div> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="brush: js">var request = myIndex.get(key);</pre> + +<h2 id="Paramètre">Paramètre</h2> + +<dl> + <dt><code>key</code></dt> + <dd>la clé ou l'intervalle de clé ({{domxref("IDBKeyRange")}}) de l'enregistrement dont on cherche la valeur.</dd> +</dl> + +<h2 id="Valeur_de_retour">Valeur de retour</h2> + +<dl> + <dt>Une requête ({{domxref("IDBRequest")}})</dt> + <dd>La propriété "result" ({{domxref("IDBRequest.result")}}) de cette requête renvoie en cas de succès le premier enregistrement correspondant à la clé ou à l'intervalle de clé. Le résultat contient l'enregistrement { key: la clé, value: un_clone_structuré_de_la_valeur }.</dd> +</dl> + +<h2 id="Exceptions">Exceptions</h2> + +<dl> + <dt><code>TransactionInactiveError</code></dt> + <dd>Cette exception ( {{domxref("DOMException")}}) est levée si la transaction ({{domxref("IDBTransaction")}}) dont dépend l'accès ({{domxref("IDBObjectStore")}}) au magasin d'objet de cet index est inactive.</dd> + <dt><code>DataError</code></dt> + <dd>Cette exception ({{domxref("DOMException")}}) est levée si la clé ou l'intervalle de clé ({{domxref("IDBKeyRange")}}) est invalide.</dd> + <dt><code>InvalidStateError</code></dt> + <dd>Cette exception ({{domxref("DOMException")}}) est levée si l'index à été supprimé.</dd> +</dl> + +<h2 id="Exemple">Exemple</h2> + +<p>Dans l'exemple suivant on ouvre une transaction puis un magasin d'objet et enfin l'index <code>lName</code>.</p> + +<p>Le code <code>myIndex.get('Bungle')</code> renvoie une requête qui cherche sur l'index un enregistrement dont la clé <code>lName</code> est <code>Bungle</code>. En cas de sucés le résultat de la requête qui contient l'enregistrement est affiché sur la console.</p> + +<p>Finalement, on itère sur tous les enregistrements pour en insérer les données dans un tableau HTML. En utilisant la méthode {{domxref("IDBIndex.openCursor")}} qui travaille de la même façon que la méthode {{domxref("IDBObjectStore.openCursor")}} de l'accès ({{domxref("IDBObjectStore")}}) au magasin d'objet sauf que les enregistrements sont renvoyés dans l'ordre de l'index et non celui du magasin d'objet.</p> + +<pre class="brush:js">function displayDataByIndex() { + tableEntry.innerHTML = ''; + + //ouvre un transaction + var transaction = db.transaction(['contactsList'], 'readonly'); + //accés au magasin d'objet + var objectStore = transaction.objectStore('contactsList'); + + //on récupère l'index + var myIndex = objectStore.index('lName'); + //requête de recherche + var getRequest = myIndex.get('Bungle'); + //en cas de succès + getRequest.onsuccess = function() { + console.log(getRequest.result); + } + + //un curseur qui itère sur l'index + myIndex.openCursor().onsuccess = function(event) { + var cursor = event.target.result; + if(cursor) { + var tableRow = document.createElement('tr'); + tableRow.innerHTML = '<td>' + cursor.value.id + '</td>' + + '<td>' + cursor.value.lName + '</td>' + + '<td>' + cursor.value.fName + '</td>' + + '<td>' + cursor.value.jTitle + '</td>' + + '<td>' + cursor.value.company + '</td>' + + '<td>' + cursor.value.eMail + '</td>' + + '<td>' + cursor.value.phone + '</td>' + + '<td>' + cursor.value.age + '</td>'; + tableEntry.appendChild(tableRow); + + cursor.continue(); + } else { + console.log('Tous les enregistrements ont été affichés.'); + } + }; +};</pre> + +<p class="note">Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p> + +<h2 id="Spécification">Spécification</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Ètat</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('IndexedDB', '#widl-IDBIndex-get-IDBRequest-any-key', 'get()')}}</td> + <td>{{Spec2('IndexedDB')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité avec les navigateurs</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Support simple</td> + <td>23{{property_prefix("webkit")}}<br> + 24</td> + <td>10 {{property_prefix("moz")}}<br> + {{CompatGeckoDesktop("16.0")}}</td> + <td>10, en partie</td> + <td>15</td> + <td>7.1</td> + </tr> + <tr> + <td>Disponible dans workers</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("37.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Support simple</td> + <td>4.4</td> + <td>{{CompatGeckoMobile("22.0")}}</td> + <td>1.0.1</td> + <td>10</td> + <td>22</td> + <td>8</td> + </tr> + <tr> + <td>Disponible dans workers</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("37.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("IndexedDB_API.Using_IndexedDB","Utiliser IndexedDB")}}</li> + <li>{{domxref("IDBDatabase","Débuter une connexion")}}</li> + <li>{{domxref("IDBTransaction","Utilisé les transactions")}}</li> + <li>{{domxref("IDBKeyRange","Définir l'intervalle des clés")}}</li> + <li>{{domxref("IDBObjectStore","Accès aux magasins d'objets")}}</li> + <li>{{domxref("IDBCursor","Utiliser les curseur")}}</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="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li> +</ul> diff --git a/files/fr/web/api/idbindex/getall/index.html b/files/fr/web/api/idbindex/getall/index.html new file mode 100644 index 0000000000..5099371f31 --- /dev/null +++ b/files/fr/web/api/idbindex/getall/index.html @@ -0,0 +1,101 @@ +--- +title: IDBIndex.getAll() +slug: Web/API/IDBIndex/getAll +tags: + - API + - IDBIndex + - IndexedDB + - Méthode + - Reference +translation_of: Web/API/IDBIndex/getAll +--- +<p>{{ APIRef("IndexedDB") }}</p> + +<div> +<p>La méthode <strong><code>getAll()</code></strong> de l'interface {{domxref("IDBIndex")}} fait une requête ({{domxref("IDBRequest")}}) qui renvoie un tableau ordonné suivant les clés, des clones structurés des enregistrements de l'index relié ({{domxref("IDBIndex")}}). On peut limiter le nombre d'enregistrements en les filtrant suivant leurs clés ou en paramétrant le compteur.</p> +</div> + +<p>On peut comparer cette méthode avec une recherche par curseur. Effectivement, il est plus intéressant si l'on veut accéder aux enregistrements un par un d'utiliser un {{domxref("IDBCursor","curseur")}}, les clones structurés des valeurs seront faits un par un. Mais si l'on veut un tableau des clones structurés des valeurs il vaut mieux utiliser <code>getAll()</code>, le moteur Gecko fera les clones structurés en une seule fois.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">var getAllKeysRequest = IDBIndex.getAll(); +var getAllKeysRequest = IDBIndex.getAll(query); +var getAllKeysRequest = IDBIndex.getAll(query, count);</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt>query {{optional_inline}}</dt> + <dd>Une clé ou un intervalle de clé ({{domxref("IDBKeyRange")}}) <strong>pour filtrer</strong>, seules les valeurs des enregistrements correspondant sont renvoyées. Par défaut toutes les clones structurés des enregistrements de l'index relié sont renvoyés.</dd> + <dt>count {{optional_inline}}</dt> + <dd>Le nombre d'enregistrement <strong>maximum renvoyés</strong>. Un nombre décimal sera tronqué. Zéro annule le compteur et toutes les valeurs sont retournées.</dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<dl> + <dt>{{domxref("IDBRequest")}}</dt> + <dd>La propriété {{domxref("IDBRequest.result","result")}} de cette requête renvoie le tableau des clones structurés des enregistrements en cas de succès.</dd> +</dl> + +<h3 id="Exceptions">Exceptions</h3> + +<dl> + <dt><code>TransactionInactiveError</code></dt> + <dd>Cette {{domxref("DOMException","exception")}} est levée si la transaction ({{domxref("IDBTransaction")}}) est inactive.</dd> + <dt><code>DataError</code></dt> + <dd>Cette exception ({{domxref("DOMException")}}) est levée si la clé ou l'intervalle de clé ({{domxref("IDBKeyRange")}}) est invalide.</dd> + <dt><code>InvalidStateError</code></dt> + <dd>Cette exception ({{domxref("DOMException")}}) est levée si l'index à été supprimé.</dd> + <dt><code>TypeError</code></dt> + <dd>Cette exception ({{domxref("DOMException")}}) est levée si le compteur n'est pas un nombre positif.</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: js">//on récupère l’accès à l'index +var myIndex = objectStore.index('index'); +//on fait une requête de recherche sur l'index +var getAllKeyRequest = myIndex.getAllKeys(); +//si la requête réussi +getAllKeysRequest.onsuccess = function() { + //on affiche le résultat sur la console + //~= [{key:'a',value:un_clone_structuré},{key:'2',value:un_clone_structuré},...] + console.log(getAllKeysRequest.result); +}</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('IndexedDB2', '#dom-idbindex-getall', 'getAll()')}}</td> + <td>{{Spec2('IndexedDB')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + + + +<p>{{Compat("api.IDBIndex.getAll")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("IndexedDB_API.Using_IndexedDB","Utiliser IndexedDB")}}</li> + <li>{{domxref("IDBDatabase","Débuter une connexion")}}</li> + <li>{{domxref("IDBTransaction","Utilisé les transactions")}}</li> + <li>{{domxref("IDBKeyRange","Définir l'intervalle des clés")}}</li> + <li>{{domxref("IDBObjectStore","Accès aux magasins d'objets")}}</li> + <li>{{domxref("IDBCursor","Utiliser les curseur")}}</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="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li> +</ul> diff --git a/files/fr/web/api/idbindex/getallkeys/index.html b/files/fr/web/api/idbindex/getallkeys/index.html new file mode 100644 index 0000000000..6495f23e44 --- /dev/null +++ b/files/fr/web/api/idbindex/getallkeys/index.html @@ -0,0 +1,104 @@ +--- +title: IDBIndex.getAllKeys() +slug: Web/API/IDBIndex/getAllKeys +tags: + - API + - IDBIndex + - IndexedDB + - Méthode + - Reference +translation_of: Web/API/IDBIndex/getAllKeys +--- +<div>{{APIRef("IndexedDB")}}</div> + +<p>La méthode <strong><code>getAllKeys()</code></strong>, rattachée à l'interface {{domxref("IDBIndex")}}, permet de récupérer les clés de tous les objets contenus dans l'index et de les enregistrer dans la propriété <code>result</code> de l'objet renvoyé par la méthode.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">var getAllKeysRequest = <em>IDBIndex</em>.getAllKeys(); +var getAllKeysRequest = <em>IDBIndex</em>.getAllKeys(<em>requete</em>); +var getAllKeysRequest = <em>IDBIndex</em>.getAllKeys(<em>requete</em>, <em>quantite</em>);</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>requete</code> {{optional_inline}}</dt> + <dd>Une clé ou un intervalle de clé ({{domxref("IDBKeyRange")}}) qui identifie les clés qu'on souhaite récupérer. Si cette valeur vaut {{jsxref("null")}} ou est absente, le navigateur utilisera un intervalle de clé sans limite.</dd> + <dt><code>quantite</code> {{optional_inline}}</dt> + <dd>Le nombre d'enregistrements qu'on souhaite obtenir. Si cette quantité est supérieure au nombre d'enregistrements récupérés par la requête, le navigateur ne récupèrera que le premier élément. Si elle est négative ou supérieure à <code>2<sup>32</sup>-1</code>, une exception {{jsxref("TypeError")}} sera levée.</dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>Un objet {{domxref("IDBRequest")}} sur lequel seront reçus les différents évènements rattachés à cette opération.</p> + +<h3 id="Exceptions">Exceptions</h3> + +<p>Cette méthode peut déclencher une des exceptions suivantes :</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Exception</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>TransactionInactiveError</code></td> + <td>La transaction pour cet index {{domxref("IDBIndex")}} est inactive.</td> + </tr> + <tr> + <td><code>InvalidStateError</code></td> + <td>L'index {{domxref("IDBIndex")}} a été supprimé ou déplacé.</td> + </tr> + <tr> + <td>{{jsxref("TypeError")}}</td> + <td>Le paramètre <code>quantite</code> n'est pas compris entre <code>0</code> et <code>2<sup>32</sup>-1</code></td> + </tr> + </tbody> +</table> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: js">var myIndex = objectStore.index('index'); +var getAllKeyRequest = myIndex.getAllKeys(); +getAllKeysRequest.onsuccess = function() { + console.log(getAllKeysRequest.result); +} +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('IndexedDB 2', '#dom-idbindex-getallkeys', 'getAll()')}}</td> + <td>{{Spec2('IndexedDB 2')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("api.IDBIndex.getAllKeys")}}</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> diff --git a/files/fr/web/api/idbindex/getkey/index.html b/files/fr/web/api/idbindex/getkey/index.html new file mode 100644 index 0000000000..610ca5d29c --- /dev/null +++ b/files/fr/web/api/idbindex/getkey/index.html @@ -0,0 +1,214 @@ +--- +title: IDBIndex.getKey() +slug: Web/API/IDBIndex/getKey +tags: + - API + - IDBIndex + - IndexedDB + - Méthode + - Reference +translation_of: Web/API/IDBIndex/getKey +--- +<div>{{APIRef("IndexedDB")}}</div> + +<p>La méthode <strong><code>getKey()</code></strong>, rattachée à l'interface {{domxref("IDBIndex")}}, renvoie un objet {{domxref("IDBRequest")}} et, dans un <em>thread</em> séparé, récupère la clé associée ou la clé primaire si l'argument passé à la fonction est un intervalle {{domxref("IDBKeyRange")}}.</p> + +<p>Si la méthode trouve une clé, ce sera alors la propriété <code>result</code> de la requête renvoyée. Seule la clé primaire de l'enregistrement est renvoyée (pour obtenir l'ensemble de l'enregistrement, on utilisera {{domxref("IDBIndex.get")}}).</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="brush: js">var myIndex = objectStore.index('index'); +var request = myIndex.getKey(key);</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>key</code> {{optional_inline}}</dt> + <dd>Une clé ou un intervalle {{domxref("IDBKeyRange")}} qui identifie l'enregistrement dont on souhaite obtenir la clé. Si la valeur vaut {{jsxref("null")}} ou si elle est absente, le navigateur utilisera un intervalle de clé sans limite.</dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>Un objet {{domxref("IDBRequest")}} qui recevra les différents évènements relatifs à l'opération qui est déclenchée.</p> + +<h3 id="Exceptions">Exceptions</h3> + +<p>Cette méthode peut déclencher une exception. Celle-ci peut avoir l'un des types suivants :</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Exception</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>TransactionInactiveError</td> + <td>La transaction rattachée à cet <code>IDBIndex</code> est inactive.</td> + </tr> + <tr> + <td><code>DataError</code></td> + <td> + <p>La clé ou l'intervalle de clés qui est fourni contient une clé invalide.</p> + </td> + </tr> + <tr> + <td><code>InvalidStateError</code></td> + <td>L'index a été supprimé ou déplacé.</td> + </tr> + </tbody> +</table> + +<h2 id="Exemples">Exemples</h2> + +<p>Dans l'exemple qui suit, on ouvre une transaction et un magasin d'objets. Ensuite on récupère l'index <code>lName</code> sur cette base de donnée. On ouvre alors un curseur sur l'index grâce à la méthode {{domxref("IDBIndex.openCursor")}} (cela fonctionne de la même façon que {{domxref("IDBObjectStore.openCursor")}} sauf que les enregistrements sont triés selon l'index et pas selon la clé primaire).</p> + +<p><code>myIndex.getKey('Bungle')</code> est ensuite utilisé afin d'obtenir la clé primaire de l'enregistrement pour lequel <code>lName</code> vaut <code>Bungle</code>. Le résultat de cette requête est imprimé dans la console lorsque la fonction de rappel (<em>callback</em>) de succès est déclenché.</p> + +<p>Enfin, on parcourt les enregistrements pour remplir un tableau HTML. Le dépôt <a href="https://github.com/mdn/IDBIndex-example">IDBIndex-example </a>contient un exemple complet (<a href="https://mdn.github.io/IDBIndex-example/">ainsi qu'une démonstration</a>).</p> + +<pre class="brush: js">function displayDataByIndex() { + tableEntry.innerHTML = ''; + var transaction = db.transaction(['contactsList'], 'readonly'); + var objectStore = transaction.objectStore('contactsList'); + var myIndex = objectStore.index('lName'); + var getKeyRequest = myIndex.getKey('Bungle'); + getKeyRequest.onsuccess = function() { + console.log(getKeyRequest.result); + } + + myIndex.openCursor().onsuccess = function(event) { + var cursor = event.target.result; + if(cursor) { + var tableRow = document.createElement('tr'); + tableRow.innerHTML = '<td>' + cursor.value.id + '</td>' + + '<td>' + cursor.value.lName + '</td>' + + '<td>' + cursor.value.fName + '</td>' + + '<td>' + cursor.value.jTitle + '</td>' + + '<td>' + cursor.value.company + '</td>' + + '<td>' + cursor.value.eMail + '</td>' + + '<td>' + cursor.value.phone + '</td>' + + '<td>' + cursor.value.age + '</td>'; + tableEntry.appendChild(tableRow); + + cursor.continue(); + } else { + console.log('Les éléments sont affichés.'); + } + }; +};</pre> + +<h2 id="Spécification">Spécification</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('IndexedDB', '#widl-IDBIndex-getKey-IDBRequest-any-key', 'getKey()')}}</td> + <td>{{Spec2('IndexedDB')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Support simple</td> + <td>23{{property_prefix("webkit")}}<br> + 24</td> + <td>{{CompatVersionUnknown}}</td> + <td>10 {{property_prefix("moz")}}<br> + {{CompatGeckoDesktop("16.0")}}</td> + <td>10, partial</td> + <td>15</td> + <td>7.1</td> + </tr> + <tr> + <td>Disponible dans les <em>web workers</em></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("37.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Android</th> + <th>Webview Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome pour Android</th> + </tr> + <tr> + <td>Support simple</td> + <td>4.4</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("22.0")}}</td> + <td>1.0.1</td> + <td>10</td> + <td>22</td> + <td>8</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Disponible dans les <em>web workers</em></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("37.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<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>L'exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">notifications de trucs à faire</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">voir la démonstration</a>)</li> +</ul> diff --git a/files/fr/web/api/idbindex/index.html b/files/fr/web/api/idbindex/index.html new file mode 100644 index 0000000000..cd228c60b7 --- /dev/null +++ b/files/fr/web/api/idbindex/index.html @@ -0,0 +1,278 @@ +--- +title: IDBIndex +slug: Web/API/IDBIndex +tags: + - API + - Database + - IDBIndex + - IndexedDB + - Interface + - Reference + - Storage + - TopicStub +translation_of: Web/API/IDBIndex +--- +<p>{{APIRef("IndexedDB")}}</p> + +<div> +<p>L'interface <strong><code>IDBIndex</code></strong>de l'{{domxref("IndexedDB_API","API IndexedDB")}} est un accès à un index d'un magasins d'objet. Un index permet de trier les enregistrements d'un magasin d'objet sur une autre clé que la clé primaire.</p> + +<p>Un index contient des enregistrements persistent. Chaque enregistrement est composé d'une clé ( la valeur du chemin de clé) et d'une valeur (la clé primaire de l'enregistrement dans le magasin d'objet). Les enregistrements de l'index se mettent automatiquement à jour lorsque un enregistrement du magasin d'objet est ajouté , mise à jour ou supprimé. Chaque enregistrement de l'index ne peut référer qu'a un enregistrement du magasin d'objet. Un magasin d'objet peut avoir plusieurs index et lorsque le magasin d'objet change tout les index sont mis à jour automatiquement.</p> + +<p>On peut retrouver les enregistrement sur une partie des clés, voir {{domxref("IDBKeyRange","intervalle de clé")}}.</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Méthodes">Méthodes</h2> + +<p>Hérite de: <a href="/en/DOM/EventTarget" title="en/DOM/EventTarget">EventTarget</a></p> + +<dl> + <dt>{{domxref("IDBIndex.count()")}}</dt> + <dd>Fait un {{domxref("IDBRequest","requête")}} sur l'index. La requête compte le nombre d'enregistrements dans cet index ou sur l'{{domxref("IDBKeyRange","intervalle de clé")}} passé en paramètre.</dd> + <dt>{{domxref("IDBIndex.get()")}}</dt> + <dd>Fait une {{domxref("IDBRequest","requête")}} pour renvoyer le premier enregistrement correspondant à la clé ou l'{{domxref("IDBKeyRange","")}} du magasin d'objet suivant l'index.</dd> + <dt>{{domxref("IDBIndex.getKey()")}}</dt> + <dd>Fait une {{domxref("IDBRequest","requête")}} pour renvoyer la clé primaire correspondant à la clé ou à l'{{domxref("IDBKeyRange","intervalle de clé")}} de l'index. Si une clé est trouvé le résultat de la requête contiendra seulement la clé primaire de l'enregistrement et non l'enregistrement comme le fait {{domxref("IDBIndex.get")}}.</dd> + <dt>{{domxref("IDBIndex.getAll()")}}</dt> + <dd>Fait une {{domxref("IDBRequest","requête")}} qui renvoie un tableau ordonné suivant les clés, des clones structurés des enregistrements de l'{{domxref("IDBIndex","index relié")}}. On peut limité le nombre d'enregistrements en les filtrants suivant leurs clés ou en paramétrant le compteur.</dd> + <dt>{{domxref("IDBIndex.getAllKeys()")}}</dt> + <dd>Ferrais une {{domxref("IDBRequest","requête")}} qui renverrait la liste de toutes les clés des enregistrements de l'index. On pourrait limiter le nombre d'enregistrements en les filtrants suivant leurs clés ou en paramétrant le compteur.</dd> + <dt>{{domxref("IDBIndex.openCursor()")}}</dt> + <dd>Fait une {{domxref("IDBRequest","requête")}} récursive suivant un {{domxref("IDBCursorWithValue","curseur avec valeur")}} qui itère l'index {{domxref("IDBObjectStore","relié")}} sur l'{{domxref("IDBKeyRange","intervalle de clé")}} spécifié.</dd> + <dt>{{domxref("IDBIndex.openKeyCursor()")}}</dt> + <dd>Fait une {{domxref("IDBRequest","requête")}} récursive suivant un {{domxref("IDBCursor","curseur")}} qui itère l'index {{domxref("IDBObjectStore","relié")}} sur l'{{domxref("IDBKeyRange","intervalle de clé")}} spécifié.</dd> +</dl> + +<h2 id="Propriétés">Propriétés</h2> + +<dl> + <dt>{{domxref("IDBIndex.isAutoLocale")}} {{readonlyInline}} {{ Non-Standard_inline() }}</dt> + <dd>Renvoie un {{domxref("Boolean","booléen")}} indiquant si la valeur de <code>locale</code> à été paramétré sur <code>auto</code> lors de la mise en place de l'index (voir les paramètres <code>{{domxref("IDBObjectStore.createIndex")}}</code>).</dd> + <dt>{{domxref("IDBIndex.locale")}} {{readonlyInline}} {{ Non-Standard_inline() }}</dt> + <dd>Renvoie la localisation de l'index (par exemple fr, ou <code>en-US</code>) <code>si la localisation à été spécifie lors de la mise en place de l'index</code> (voir les paramètres {{domxref("IDBObjectStore.createIndex")}}).</dd> + <dt>{{domxref("IDBIndex.name")}} {{readonlyInline}}</dt> + <dd>Renvoie le nom de l'index.</dd> + <dt>{{domxref("IDBIndex.objectStore")}} {{readonlyInline}}</dt> + <dd>Renvoie un {{domxref("IDBObjectStore","accès au magasin d'objet")}} que référence l'index.</dd> + <dt>{{domxref("IDBIndex.keyPath")}} {{readonlyInline}}</dt> + <dd>Renvoie le chemin de clé de l'index. Si l'index n'est pas <a href="https://developer.mozilla.org/fr/IndexedDB/Index#gloss_auto-populated" title="en/IndexedDB/Index#gloss auto-populated">automatiquement mise à jour</a> la propriété vaux <code>null</code>.</dd> + <dt>{{domxref("IDBIndex.multiEntry")}} {{readonlyInline}}</dt> + <dd>Renvoie un {{domxref("Boolean","booléen")}} qui indique comment l'index gère le chemin de clé si c'est un tableau.</dd> + <dt>{{domxref("IDBIndex.unique")}} {{readonlyInline}}</dt> + <dd>Renvoie un {{domxref("Boolean","booléen")}} qui indique l'index interdit la duplication d'enregistrement sur sa clé.</dd> +</dl> + +<h2 id="Exemple">Exemple</h2> + +<p>Dans l'exemple suivant on ouvre une transaction puis un magasin d'objet et enfin l'index <code>lName</code>.</p> + +<p>Finalement, On itère sur tous les enregistrements pour en insérer les données dans un tableau HTML. En utilisant la méthode {{domxref("IDBIndex.openCursor")}} qui travaille de la même façon que la méthode {{domxref("IDBObjectStore.openCursor")}} de l'{{domxref("IDBObjectStore","accès")}} au magasin d'objet sauf que les enregistrements sont renvoyés dans l'ordre de l'index et non celui du magasin d'objet.</p> + +<pre class="brush:js notranslate">function displayDataByIndex() { + tableEntry.innerHTML = ''; + + //ouvre un transaction + var transaction = db.transaction(['contactsList'], 'readonly'); + //accés au magasin d'objet + var objectStore = transaction.objectStore('contactsList'); + + //on récupère l'index + var myIndex = objectStore.index('lName'); + + //un curseur qui itère sur l'index + var request = myIndex.openCursor(); + request.onsuccess = function(event) { + var cursor = request.result; + if(cursor) { + var tableRow = document.createElement('tr'); + tableRow.innerHTML = '<td>' + cursor.value.id + '</td>' + + '<td>' + cursor.value.lName + '</td>' + + '<td>' + cursor.value.fName + '</td>' + + '<td>' + cursor.value.jTitle + '</td>' + + '<td>' + cursor.value.company + '</td>' + + '<td>' + cursor.value.eMail + '</td>' + + '<td>' + cursor.value.phone + '</td>' + + '<td>' + cursor.value.age + '</td>'; + tableEntry.appendChild(tableRow); + + cursor.continue(); + } else { + console.log('Tous les enregistrements ont été affichés.'); + } + }; +};</pre> + +<p class="note">Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p> + +<h2 id="Spécification">Spécification</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('IndexedDB', '#idl-def-IDBIndex', 'IDBIndex')}}</td> + <td>{{Spec2('IndexedDB')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité avec les navigateurs</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Support basique</td> + <td>{{CompatChrome(23.0)}}{{property_prefix("webkit")}}<br> + {{CompatChrome(24.0)}}</td> + <td>10 {{property_prefix("moz")}}<br> + {{CompatGeckoDesktop("16.0")}}</td> + <td>10, en partie</td> + <td>15</td> + <td>7.1</td> + </tr> + <tr> + <td><code>count()</code></td> + <td>{{CompatChrome(23.0)}}</td> + <td>{{ CompatGeckoDesktop("22.0") }}</td> + <td>10, en partie</td> + <td>15</td> + <td>7.1</td> + </tr> + <tr> + <td><code>getAll()</code> et <code>getAllKeys()</code></td> + <td>{{CompatChrome(48.0)}}</td> + <td>{{ CompatGeckoDesktop("24.0") }}<br> + behind <code>dom.indexedDB.experimental</code> pref</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td>Disponible dans workers</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("37.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>isAutoLocale</code> et <code>locale</code></td> + <td>{{ CompatNo() }}</td> + <td> + <p>{{CompatGeckoDesktop("43.0")}}<br> + behind <code>dom.indexedDB.experimental</code> pref</p> + </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>Fonctionnalité</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Support basique</td> + <td>4.4</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoMobile("22.0") }}</td> + <td>1.0.1</td> + <td>10</td> + <td>22</td> + <td>{{ CompatNo() }}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>count()</code></td> + <td>4.4</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoMobile("22.0") }}</td> + <td>1.0.1</td> + <td>10</td> + <td>22</td> + <td>{{ CompatNo() }}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>getAll()</code> et <code>getAllKeys()</code></td> + <td>{{ CompatNo() }}</td> + <td>{{CompatChrome(48.0)}}</td> + <td>{{ CompatGeckoMobile("24.0") }}<br> + avec <code>dom.indexedDB.experimental</code> activer</td> + <td>1.1 avec<br> + <code>dom.indexedDB.experimental</code> avtivé</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{CompatChrome(48.0)}}</td> + </tr> + <tr> + <td>Disponible dans workers</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("37.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>isAutoLocale</code> et <code>locale</code></td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo()}}</td> + <td>{{CompatGeckoMobile("43.0")}}<br> + avec <code>dom.indexedDB.experimental</code> activé</td> + <td>2.5<br> + avec <code>dom.indexedDB.experimental</code> activé</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("IndexedDB_API.Using_IndexedDB","Utiliser IndexedDB")}}</li> + <li>{{domxref("IDBDatabase","Débuter une connexion")}}</li> + <li>{{domxref("IDBTransaction","Utilisé les transactions")}}</li> + <li>{{domxref("IDBKeyRange","Définir l'intervalle des clés")}}</li> + <li>{{domxref("IDBObjectStore","Accès aux magasins d'objets")}}</li> + <li>{{domxref("IDBCursor","Utiliser les curseur")}}</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="http://mdn.github.io/to-do-notifications/">voir l'exemple en direct</a>.)</li> +</ul> +</div> diff --git a/files/fr/web/api/idbindex/isautolocale/index.html b/files/fr/web/api/idbindex/isautolocale/index.html new file mode 100644 index 0000000000..330dde93b9 --- /dev/null +++ b/files/fr/web/api/idbindex/isautolocale/index.html @@ -0,0 +1,81 @@ +--- +title: IDBIndex.isAutoLocale +slug: Web/API/IDBIndex/isAutoLocale +tags: + - API + - Experimental + - IDBIndex + - IndexedDB + - Propriété + - Reference +translation_of: Web/API/IDBIndex/isAutoLocale +--- +<div>{{APIRef("IndexedDB")}}{{SeeCompatTable}}</div> + +<p>La propriété en lecture seule <strong><code>isAutoLocale</code></strong>, rattachée à l'interface {{domxref("IDBIndex")}}, est un booléen qui indique si la valeur <code>locale</code> de l'index vaut <code>auto</code> (cf. <a href="/fr/docs/Web/API/IDBObjectStore/createIndex#Paramètres">les paramètres optionnels de <code>createIndex()</code></a>).</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">var monIndex = objectStore.index('index'); +console.log(monIndex.isAutoLocale);</pre> + +<h3 id="Valeur">Valeur</h3> + +<p>Un booléen.</p> + +<h2 id="Exemples">Exemples</h2> + +<p>Dans l'exemple suivant, on ouvre une transaction et un magasin d'objet puis on récupère l'index <code>lName</code> depuis une base de données de contact. Ensuite, on ouvre un curseur simple sur l'index grâce à la méthode {{domxref("IDBIndex.openCursor")}} — cela fonctionne comme si on avait directement ouvert un curseur sur un magasin d'objet avec {{domxref("IDBObjectStore.openCursor")}} mais ici les enregistrements sont triés selon l'index et pas selon la clé primaire.</p> + +<p>La valeur <code>isAutoLocale</code> est affichée dans la console.</p> + +<pre class="brush:js">function displayDataByIndex() { + tableEntry.innerHTML = ''; + var transaction = db.transaction(['contactsList'], 'readonly'); + var objectStore = transaction.objectStore('contactsList'); + + var myIndex = objectStore.index('lName'); + console.log(myIndex.isAutoLocale); + + myIndex.openCursor().onsuccess = function(event) { + var cursor = event.target.result; + if(cursor) { + var tableRow = document.createElement('tr'); + tableRow.innerHTML = '<td>' + cursor.value.id + '</td>' + + '<td>' + cursor.value.lName + '</td>' + + '<td>' + cursor.value.fName + '</td>' + + '<td>' + cursor.value.jTitle + '</td>' + + '<td>' + cursor.value.company + '</td>' + + '<td>' + cursor.value.eMail + '</td>' + + '<td>' + cursor.value.phone + '</td>' + + '<td>' + cursor.value.age + '</td>'; + tableEntry.appendChild(tableRow); + + cursor.continue(); + } else { + console.log('Les éléments ont été affichés.'); + } + }; +};</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<p>Actuellement, cette propriété ne fait partie d'aucune spécification.</p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("api.IDBIndex.isAutoLocale")}}</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> diff --git a/files/fr/web/api/idbindex/keypath/index.html b/files/fr/web/api/idbindex/keypath/index.html new file mode 100644 index 0000000000..e2d289cfd0 --- /dev/null +++ b/files/fr/web/api/idbindex/keypath/index.html @@ -0,0 +1,165 @@ +--- +title: IDBIndex.keyPath +slug: Web/API/IDBIndex/keyPath +translation_of: Web/API/IDBIndex/keyPath +--- +<p>{{ APIRef("IndexedDB") }}</p> + +<div> +<p>La propriété <strong><code>keyPath</code></strong> de l'interface {{domxref("IDBIndex")}} renvoie le <a href="/fr/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB#gloss_keypath" title="en/IndexedDB#gloss key path">chemin de clé</a> de l'index. Si l'index n'est pas <a href="https://developer.mozilla.org/fr/IndexedDB/Index#gloss_auto-populated" title="en/IndexedDB/Index#gloss auto-populated">automatiquement mise à jour</a> la propriété vaux <code>null</code>.</p> + +<p>{{AvailableInWorkers}}</p> +</div> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="brush: js">var keyPath = myIndex.keyPath</pre> + +<h2 id="Valeur">Valeur</h2> + +<p>Tous types de valeur pouvant être utilisés comme chemin de clé.</p> + +<h2 id="Exemple">Exemple</h2> + +<p>Dans l'exemple suivant on ouvre une transaction puis un magasin d'objet et enfin l'index <code>lName</code>.</p> + +<p>Le chemin de clé de l'index est affiché sur la console (ici: <code>lName</code>).</p> + +<p>Finalement, On itère sur tous les enregistrements pour en insérer les données dans un tableau HTML. En utilisant la méthode {{domxref("IDBIndex.openCursor")}} qui travaille de la même façon que la méthode {{domxref("IDBObjectStore.openCursor")}} de l'{{domxref("IDBObjectStore","accès")}} au magasin d'objet sauf que les enregistrements sont renvoyés dans l'ordre de l'index et non celui du magasin d'objet.</p> + +<pre class="brush:js">function displayDataByIndex() { + tableEntry.innerHTML = ''; + + //ouvre un transaction + var transaction = db.transaction(['contactsList'], 'readonly'); + //accés au magasin d'objet + var objectStore = transaction.objectStore('contactsList'); + + //on récupère l'index + var myIndex = objectStore.index('lName'); + //on affiche le chemin de clé de l'index sur la console + console.log(myIndex.keyPath); + + //un curseur qui itère sur l'index + myIndex.openCursor().onsuccess = function(event) { + var cursor = event.target.result; + if(cursor) { + var tableRow = document.createElement('tr'); + tableRow.innerHTML = '<td>' + cursor.value.id + '</td>' + + '<td>' + cursor.value.lName + '</td>' + + '<td>' + cursor.value.fName + '</td>' + + '<td>' + cursor.value.jTitle + '</td>' + + '<td>' + cursor.value.company + '</td>' + + '<td>' + cursor.value.eMail + '</td>' + + '<td>' + cursor.value.phone + '</td>' + + '<td>' + cursor.value.age + '</td>'; + tableEntry.appendChild(tableRow); + + cursor.continue(); + } else { + console.log('Tous les enregistrements ont été affichés.'); + } + }; +};</pre> + +<p class="note">Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p> + +<h2 id="Spécification">Spécification</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('IndexedDB', '#widl-IDBIndex-keyPath', 'keyPath')}}</td> + <td>{{Spec2('IndexedDB')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité avec les navigateurs</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Support basique</td> + <td>23{{property_prefix("webkit")}}<br> + 24</td> + <td>10 {{property_prefix("moz")}}<br> + {{CompatGeckoDesktop("16.0")}}</td> + <td>10, en partie</td> + <td>15</td> + <td>7.1</td> + </tr> + <tr> + <td>Disponible dans workers</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("37.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Support basique</td> + <td>4.4</td> + <td>{{CompatGeckoMobile("22.0")}}</td> + <td>1.0.1</td> + <td>10</td> + <td>22</td> + <td>8</td> + </tr> + <tr> + <td>Disponible dans workers</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("37.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("IndexedDB_API.Using_IndexedDB","Utiliser IndexedDB")}}</li> + <li>{{domxref("IDBDatabase","Débuter une connexion")}}</li> + <li>{{domxref("IDBTransaction","Utilisé les transactions")}}</li> + <li>{{domxref("IDBKeyRange","Définir l'intervalle des clés")}}</li> + <li>{{domxref("IDBObjectStore","Accès aux magasins d'objets")}}</li> + <li>{{domxref("IDBCursor","Utiliser les curseur")}}</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="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li> +</ul> diff --git a/files/fr/web/api/idbindex/locale/index.html b/files/fr/web/api/idbindex/locale/index.html new file mode 100644 index 0000000000..722e8e547d --- /dev/null +++ b/files/fr/web/api/idbindex/locale/index.html @@ -0,0 +1,133 @@ +--- +title: IDBIndex.locale +slug: Web/API/IDBIndex/locale +translation_of: Web/API/IDBIndex/locale +--- +<div>{{APIRef("IndexedDB")}}{{SeeCompatTable}}</div> + +<p>La propriété <strong><code>locale</code></strong> de l'interface {{domxref("IDBIndex")}} renvoie la localisation de l'index (par exemple fr, ou <code>en-US</code>) <code>si la localisation à été spécifie lors de la mise en place de l'index</code> (voir les paramètres {{domxref("IDBObjectStore.createIndex")}}).</p> + +<p>{{note("Cette propriété renvoie la localisation utilisé par l'index. En d'autres termes, elle ne renverras jamais 'auto'.")}}</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="brush: js">var indexLocalisation = myIndex.locale;</pre> + +<h2 id="Valeur">Valeur</h2> + +<p>Une {{domxref("DOMString","chaîne de caractère")}} représentant la localisation courante de l'index.</p> + +<h2 id="Exemple">Exemple</h2> + +<p>Dans l'exemple suivant on ouvre une transaction puis un magasin d'objet et enfin l'index <code>lName</code>.</p> + +<p>La valeur de la propriété <code>Locale</code> est affichée sur la console.</p> + +<p>Finalement, On itère sur tous les enregistrements pour en insérer les données dans un tableau HTML. En utilisant la méthode {{domxref("IDBIndex.openCursor")}} qui travaille de la même façon que la méthode {{domxref("IDBObjectStore.openCursor")}} de l'{{domxref("IDBObjectStore","accès")}} au magasin d'objet sauf que les enregistrements sont renvoyés dans l'ordre de l'index et non celui du magasin d'objet.</p> + +<pre class="brush:js">function displayDataByIndex() { + tableEntry.innerHTML = ''; + + //ouvre un transaction + var transaction = db.transaction(['contactsList'], 'readonly'); + //accés au magasin d'objet + var objectStore = transaction.objectStore('contactsList'); + + //on récupère l'index + var myIndex = objectStore.index('lName'); + //on affiche la propriété locale sur la console + console.log(myIndex.locale); + + //un curseur qui itère sur l'index + myIndex.openCursor().onsuccess = function(event) { + var cursor = event.target.result; + if(cursor) { + var tableRow = document.createElement('tr'); + tableRow.innerHTML = '<td>' + cursor.value.id + '</td>' + + '<td>' + cursor.value.lName + '</td>' + + '<td>' + cursor.value.fName + '</td>' + + '<td>' + cursor.value.jTitle + '</td>' + + '<td>' + cursor.value.company + '</td>' + + '<td>' + cursor.value.eMail + '</td>' + + '<td>' + cursor.value.phone + '</td>' + + '<td>' + cursor.value.age + '</td>'; + tableEntry.appendChild(tableRow); + + cursor.continue(); + } else { + console.log('Tous les enregistrements ont été affichés.'); + } + }; +};</pre> + +<p class="note">Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p> + +<h2 id="Spécification">Spécification</h2> + +<p>Ne fait actuellement partie d'aucune spécification.</p> + +<h2 id="Compatibilité_avec_les_navigateurs">Compatibilité avec les navigateurs</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Support basique</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("43.0")}}<sup>[1]</sup></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>Fonctionnalité</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Support basique</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("43.0")}}<sup>[1]</sup></td> + <td>2.5<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Pour accédé à cette fonctionnalité il faut activé <code>dom.indexedDB.experimental</code> dans <code>about:config</code>.</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("IndexedDB_API.Using_IndexedDB","Utiliser IndexedDB")}}</li> + <li>{{domxref("IDBDatabase","Débuter une connexion")}}</li> + <li>{{domxref("IDBTransaction","Utilisé les transactions")}}</li> + <li>{{domxref("IDBKeyRange","Définir l'intervalle des clés")}}</li> + <li>{{domxref("IDBObjectStore","Accès aux magasins d'objets")}}</li> + <li>{{domxref("IDBCursor","Utiliser les curseur")}}</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="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li> +</ul> diff --git a/files/fr/web/api/idbindex/multientry/index.html b/files/fr/web/api/idbindex/multientry/index.html new file mode 100644 index 0000000000..75ab4b0a93 --- /dev/null +++ b/files/fr/web/api/idbindex/multientry/index.html @@ -0,0 +1,167 @@ +--- +title: IDBIndex.multiEntry +slug: Web/API/IDBIndex/multiEntry +tags: + - API + - IDBIndex + - IndexedDB + - Propriété + - Reference +translation_of: Web/API/IDBIndex/multiEntry +--- +<div>{{APIRef("IndexedDB")}}</div> + +<p>La propriété <strong><code>multiEntry</code></strong>, rattachée à l'interface {{domxref("IDBIndex")}}, est un booléen qui indique le comportement de l'index lorsque le résultat de l'évaluation d'un chemin de clé renvoie un tableau.</p> + +<p>Ce comportement est paramétré au moment où l'index est créé avec la méthode {{domxref("IDBObjectStore.createIndex")}}. Cette méthode permet d'utiliser un paramètre facultatif <code>options</code> pour définir la propriété <code>multiEntry</code> avec <code>true</code>/<code>false</code>.</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">var monIndex = objectStore.index('index'); +console.log(monIndex.multiEntry);</pre> + +<h3 id="Valeur">Valeur</h3> + +<p>Un booléen. S'il vaut <code>true</code>, cela signifie qu'il y a autant d'enregistrement que de valeurs dans le tableau renvoyé lors de l'évaluation du chemin (les clés des enregistrements sont les valeurs du tableau). S'il vaut <code>false</code>, cela signifie qu'il n'y aura qu'un seul enregistrement ajouté et que la clé sera le tableau.</p> + +<h2 id="Exemples">Exemples</h2> + +<p>Dans l'exemple qui suit, on ouvre une transaction sur un magasin d'objets et on récupère l'index <code>lName</code> depuis la base de données des contacts. Ensuite, on ouvre un curseur simple sur l'index grâce à la méthode {{domxref("IDBIndex.openCursor")}} (cela fonctionne comme si on avait directement ouvert un curseur sur le magasin d'objets avec {{domxref("IDBObjectStore.openCursor")}} mais les enregistrements sont ici renvoyés en étant triés selon l'index et non selon la clé primaire.</p> + +<p>La propriété <code>multiEntry</code> est affichée dans la console. Dans cet exemple, elle a la valeur <code>false</code>.</p> + +<p>Enfin, on parcourt chacun des enregistrements pour insérer les données dans un tableau HTML. Pour consulter un exemple complet, vous pouvez vous référer à <a href="https://github.com/mdn/IDBIndex-example">notre dépôt IDBIndex-example</a> (<a href="https://mdn.github.io/IDBIndex-example/">voir également la démo <em>live</em></a>).</p> + +<pre class="brush: js">function displayDataByIndex() { + tableEntry.innerHTML = ''; + var transaction = db.transaction(['contactsList'], 'readonly'); + var objectStore = transaction.objectStore('contactsList'); + + var myIndex = objectStore.index('lName'); + console.log(myIndex.multiEntry); + + myIndex.openCursor().onsuccess = function(event) { + var cursor = event.target.result; + if(cursor) { + var tableRow = document.createElement('tr'); + tableRow.innerHTML = '<td>' + cursor.value.id + '</td>' + + '<td>' + cursor.value.lName + '</td>' + + '<td>' + cursor.value.fName + '</td>' + + '<td>' + cursor.value.jTitle + '</td>' + + '<td>' + cursor.value.company + '</td>' + + '<td>' + cursor.value.eMail + '</td>' + + '<td>' + cursor.value.phone + '</td>' + + '<td>' + cursor.value.age + '</td>'; + tableEntry.appendChild(tableRow); + + cursor.continue(); + } else { + console.log('Les éléments ont été affichés.'); + } + }; +};</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('IndexedDB', '#widl-IDBIndex-multiEntry', 'multiEntry')}}</td> + <td>{{Spec2('IndexedDB')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Support simple</td> + <td>23{{property_prefix("webkit")}}<br> + 24</td> + <td>10 {{property_prefix("moz")}}<br> + {{CompatGeckoDesktop("16.0")}}</td> + <td>10</td> + <td>15</td> + <td>7.1</td> + </tr> + <tr> + <td>Disponible dans les <em>web workers</em></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("37.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Android</th> + <th>Webview Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome pour Android</th> + </tr> + <tr> + <td>Support simple</td> + <td>4.4</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("22.0")}}</td> + <td>10</td> + <td>22</td> + <td>8</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Disponible dans les <em>web workers</em></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("37.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<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> diff --git a/files/fr/web/api/idbindex/name/index.html b/files/fr/web/api/idbindex/name/index.html new file mode 100644 index 0000000000..006d141ffa --- /dev/null +++ b/files/fr/web/api/idbindex/name/index.html @@ -0,0 +1,208 @@ +--- +title: IDBIndex.name +slug: Web/API/IDBIndex/name +tags: + - API + - IDBIndex + - IndexedDB + - Propriété + - Reference +translation_of: Web/API/IDBIndex/name +--- +<div>{{APIRef("IndexedDB")}}</div> + +<p>La propriété <strong><code>name</code></strong>, rattachée à l'interface {{domxref("IDBIndex")}}, contient une chaîne de caractères qui permet de désigner l'index courant.</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">var <em>indexName</em> = <em>IDBIndex</em>.name; +<em>IDBIndex</em>.name = <em>indexName</em>;</pre> + +<h3 id="Valeur">Valeur</h3> + +<p>Une chaîne de caractères qui fournit le nom à l'index.</p> + +<h3 id="Exceptions">Exceptions</h3> + +<p>Différentes exceptions peuvent être déclenchées lorsqu'on souhaite modifier le nom d'un index.</p> + +<dl> + <dt><code>InvalidStateError</code></dt> + <dd>L'index ou le magasin d'objets a été supprimé ou la transaction courante n'est pas une transaction de montée de niveau. Le renommage des index est uniquement possible lors des transactions de montée de niveau (c'est-à-dire quand le mode de la transaction est <code>"versionchange"</code>).</dd> + <dt><code>TransactionInactiveError</code></dt> + <dd>La transaction courante n'est pas active.</dd> + <dt><code>ConstraintError</code></dt> + <dd>Il existe déjà un index avec ce nom.</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<p>Dans l'exemple qui suit, on ouvre une transaction sur un magasin d'objets pour lequel on récupère l'index <code>lName</code>. Ensuite, on ouvre un curseur sur cet index avec la méthode {{domxref("IDBIndex.openCursor()")}} (celle-ci fonctionne comme la méthode {{domxref("IDBObjectStore.openCursor", "openCursor()")}} qui s'utilise sur les magasins d'objets mais ici, les enregistrements sont triés selon l'index et pas selon la clé primaire).</p> + +<p>Le nom de l'index est affiché dans la console grâce à la propriété (ici, le nom sera <code>"lName"</code>).</p> + +<p>Enfin, on parcourt chacun des enregistrements et on ajoute les données dans un tableau HTML.</p> + +<pre class="brush: js">function displayDataByIndex() { + tableEntry.innerHTML = ''; + var transaction = db.transaction(['contactsList'], 'readonly'); + var objectStore = transaction.objectStore('contactsList'); + + var myIndex = objectStore.index('lName'); + console.log(myIndex.name); + + myIndex.openCursor().onsuccess = function(event) { + var cursor = event.target.result; + if(cursor) { + var tableRow = document.createElement('tr'); + tableRow.innerHTML = '<td>' + cursor.value.id + '</td>' + + '<td>' + cursor.value.lName + '</td>' + + '<td>' + cursor.value.fName + '</td>' + + '<td>' + cursor.value.jTitle + '</td>' + + '<td>' + cursor.value.company + '</td>' + + '<td>' + cursor.value.eMail + '</td>' + + '<td>' + cursor.value.phone + '</td>' + + '<td>' + cursor.value.age + '</td>'; + tableEntry.appendChild(tableRow); + + cursor.continue(); + } else { + console.log('Les éléments sont affichés.'); + } + }; +};</pre> + +<div class="note"> +<p><strong>Note :</strong> pour un exemple fonctionnel complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">application To-do</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple</a>).</p> +</div> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('IndexedDB', '#widl-IDBIndex-name', 'name')}}</td> + <td>{{Spec2('IndexedDB')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Support simple</td> + <td>23{{property_prefix("webkit")}}<br> + 24</td> + <td>{{CompatVersionUnknown}}</td> + <td>10 {{property_prefix("moz")}}<br> + {{CompatGeckoDesktop("16.0")}}</td> + <td>10</td> + <td>15</td> + <td>7.1</td> + </tr> + <tr> + <td>Disponible dans les <em>web workers</em></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("37.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Possibilité de renommer avec le mutateur lié à <code>name</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop(49)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Android</th> + <th>Webview Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome pour Android</th> + </tr> + <tr> + <td>Support simple</td> + <td>4.4</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("22.0")}}</td> + <td>10</td> + <td>22</td> + <td>8</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Disponible dans les <em>web workers</em></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("37.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Possibilité de renommer avec le mutateur lié à <code>name</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(49)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<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> diff --git a/files/fr/web/api/idbindex/objectstore/index.html b/files/fr/web/api/idbindex/objectstore/index.html new file mode 100644 index 0000000000..6f9a8f95f0 --- /dev/null +++ b/files/fr/web/api/idbindex/objectstore/index.html @@ -0,0 +1,167 @@ +--- +title: IDBIndex.objectStore +slug: Web/API/IDBIndex/objectStore +translation_of: Web/API/IDBIndex/objectStore +--- +<p>{{ APIRef("IndexedDB") }}</p> + +<div> +<p>La propriètè <strong><code>objectStore</code></strong> de l'interface {{domxref("IDBIndex")}} renvoie un accès au magasin d'objet que référence l'index.</p> + +<p>{{AvailableInWorkers}}</p> +</div> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="brush: js" style="font-size: 14px;">var indexObjectStore = myIndex.objectStore;</pre> + +<h2 id="Valeur">Valeur</h2> + +<p>Un {{ domxref("IDBObjectStore","accès au magasin d'objet") }}.</p> + +<h2 id="Example">Example</h2> + +<p>Dans l'exemple suivant on ouvre une transaction puis un magasin d'objet et enfin l'index <code>lName</code>.</p> + +<p>Le magasin d'objet référencé par l'index est afficher sur la console, quelque chose ressemblant à:</p> + +<pre>IDBObjectStore { name: "contactsList", keyPath: "id", indexNames: DOMStringList[7], transaction: IDBTransaction, autoIncrement: false }</pre> + +<p>Finalement, On itère sur tous les enregistrements pour en insérer les données dans un tableau HTML. En utilisant la méthode {{domxref("IDBIndex.openCursor")}} qui travaille de la même façon que la méthode {{domxref("IDBObjectStore.openCursor")}} de l'{{domxref("IDBObjectStore","accès")}} au magasin d'objet sauf que les enregistrements sont renvoyés dans l'ordre de l'index et non celui du magasin d'objet.</p> + +<pre class="brush:js">function displayDataByIndex() { + tableEntry.innerHTML = ''; + + //ouvre un transaction + var transaction = db.transaction(['contactsList'], 'readonly'); + //accés au magasin d'objet + var objectStore = transaction.objectStore('contactsList'); + + //on récupère l'index + var myIndex = objectStore.index('lName'); + //on affiche le magasin d'objet référencé locale sur la console + console.log(myIndex.objectStore); + + //un curseur qui itère sur l'index + myIndex.openCursor().onsuccess = function(event) { + var cursor = event.target.result; + if(cursor) { + var tableRow = document.createElement('tr'); + tableRow.innerHTML = '<td>' + cursor.value.id + '</td>' + + '<td>' + cursor.value.lName + '</td>' + + '<td>' + cursor.value.fName + '</td>' + + '<td>' + cursor.value.jTitle + '</td>' + + '<td>' + cursor.value.company + '</td>' + + '<td>' + cursor.value.eMail + '</td>' + + '<td>' + cursor.value.phone + '</td>' + + '<td>' + cursor.value.age + '</td>'; + tableEntry.appendChild(tableRow); + + cursor.continue(); + } else { + console.log('Tous les enregistrements ont été affichés.'); + } + }; +};</pre> + +<p class="note">Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p> + +<h2 id="Spécification">Spécification</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('IndexedDB', '#widl-IDBIndex-objectStore', 'objectStore')}}</td> + <td>{{Spec2('IndexedDB')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité avec les navigateurs</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Support basique</td> + <td>23{{property_prefix("webkit")}}<br> + 24</td> + <td>10 {{property_prefix("moz")}}<br> + {{CompatGeckoDesktop("16.0")}}</td> + <td>10, en partie</td> + <td>15</td> + <td>7.1</td> + </tr> + <tr> + <td>Disponible dans workers</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("37.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Support basique</td> + <td>4.4</td> + <td>{{CompatGeckoMobile("22.0")}}</td> + <td>1.0.1</td> + <td>10</td> + <td>22</td> + <td>8</td> + </tr> + <tr> + <td>Disponible dans workers</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("37.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("IndexedDB_API.Using_IndexedDB","Utiliser IndexedDB")}}</li> + <li>{{domxref("IDBDatabase","Débuter une connexion")}}</li> + <li>{{domxref("IDBTransaction","Utilisé les transactions")}}</li> + <li>{{domxref("IDBKeyRange","Définir l'intervalle des clés")}}</li> + <li>{{domxref("IDBObjectStore","Accès aux magasins d'objets")}}</li> + <li>{{domxref("IDBCursor","Utiliser les curseur")}}</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="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li> +</ul> diff --git a/files/fr/web/api/idbindex/opencursor/index.html b/files/fr/web/api/idbindex/opencursor/index.html new file mode 100644 index 0000000000..71bace93a3 --- /dev/null +++ b/files/fr/web/api/idbindex/opencursor/index.html @@ -0,0 +1,230 @@ +--- +title: IDBIndex.openCursor() +slug: Web/API/IDBIndex/openCursor +tags: + - API + - IDBIndex + - IndexedDB + - Méthode + - Reference + - openCursor +translation_of: Web/API/IDBIndex/openCursor +--- +<div>{{APIRef("IndexedDB")}}</div> + +<p>La méthode <strong><code>openCursor()</code></strong> de l'interface {{domxref("IDBIndex")}} renvoie un objet {{domxref("IDBRequest")}} et, dans un <em>thread</em> séparé, crée <a href="/fr/docs/Web/API/IDBCursor">un curseur</a> sur l'intervalle de clé fourni en argument.</p> + +<p>La méthode la positionne le curseur de façon approprié, selon la direction indiquée :</p> + +<ul> + <li>Si aucun intervalle de clé n'est spécifié ou qu'il vaut {{jsxref("null")}}, l'intervalle résultant contiendra l'ensemble des enregistrements</li> + <li>L'évènement <code>success</code> est toujours déclenché : + <ul> + <li>Si un enregistrement est trouvé la propriété <code>result</code> de l'évènement contient le nouvel objet {{domxref("IDBCursor")}} et la valeur (<code>value</code>) de ce curseur est un clône de la valeur référencée</li> + <li>Si aucun enregistrement n'est trouvé la propriété <code>result</code> de l'évènement vaudra <code>null</code>.</li> + </ul> + </li> +</ul> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">var request = myIndex.openCursor(keyRange,direction);</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>keyRange</code> {{optional_inline}}</dt> + <dd>L'intervalle de clé ({{domxref("IDBKeyRange")}}) sur lequel se déplace le curseur. Si aucun argument n'est passé, la valeur par défaut sera un intervalle qui englobe tous les enregistrements du magasin d'objets.</dd> + <dt><code>direction</code> {{optional_inline}}</dt> + <dd>La direction dans laquelle se déplace le curseur (la propriété <code>direction</code> de l'objet {{domxref("IDBCursor.direction")}}). La valeur par défaut est <code>"next"</code>.</dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>Un objet {{domxref("IDBRequest")}} sur lequel les évènements associés à l'opération seront déclenchés.</p> + +<h3 id="Exceptions">Exceptions</h3> + +<p>Cette méthode peut déclencher une {{domxref("DOMException")}} dont le type peut être l'un des suivant :</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Type d'exception</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>TransactionInactiveError</td> + <td>La transaction pour cet index est inactive.</td> + </tr> + <tr> + <td><code>TypeError</code></td> + <td>La valeur du paramètre pour la direction est invalide.</td> + </tr> + <tr> + <td>DataError</td> + <td> + <p>La clé ou l'intervalle de clé fourni contient une clé invalide.</p> + </td> + </tr> + <tr> + <td><code>InvalidStateError</code></td> + <td>L'index a été supprimé ou déplacé.</td> + </tr> + </tbody> +</table> + +<h2 id="Exemple">Exemple</h2> + +<p>Dans l'exemple suivant, on ouvre une transaction puis un magasin d'objet et enfin l'index <code>lName</code>.</p> + +<p>Ensuite, on parcourt les enregistrements pour insérer les données dans un tableau HTML. En utilisant la méthode {{domxref("IDBIndex.openCursor")}} qui travaille de la même façon que la méthode {{domxref("IDBObjectStore.openCursor")}} de l'{{domxref("IDBObjectStore","accès")}} au magasin d'objet sauf que les enregistrements sont renvoyés dans l'ordre de l'index et non celui du magasin d'objet.</p> + +<pre class="brush:js">function displayDataByIndex() { + tableEntry.innerHTML = ''; + + //ouvre un transaction + var transaction = db.transaction(['contactsList'], 'readonly'); + //accés au magasin d'objet + var objectStore = transaction.objectStore('contactsList'); + + //on récupère l'index + var myIndex = objectStore.index('lName'); + + //un curseur qui itère sur l'index + var request = myIndex.openCursor(); + request.onsuccess = function(event) { + var cursor = request.result; + if(cursor) { + var tableRow = document.createElement('tr'); + tableRow.innerHTML = '<td>' + cursor.value.id + '</td>' + + '<td>' + cursor.value.lName + '</td>' + + '<td>' + cursor.value.fName + '</td>' + + '<td>' + cursor.value.jTitle + '</td>' + + '<td>' + cursor.value.company + '</td>' + + '<td>' + cursor.value.eMail + '</td>' + + '<td>' + cursor.value.phone + '</td>' + + '<td>' + cursor.value.age + '</td>'; + tableEntry.appendChild(tableRow); + + cursor.continue(); + } else { + console.log('Tous les enregistrements ont été affichés.'); + } + }; +};</pre> + +<p class="note"><strong>Note :</strong> pour un exemple fonctionnel complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">application To-do</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple</a>).</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('IndexedDB', '#widl-IDBIndex-openCursor-IDBRequest-any-range-IDBCursorDirection-direction', 'openCursor()')}}</td> + <td>{{Spec2('IndexedDB')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Support simple</td> + <td>23{{property_prefix("webkit")}}<br> + 24</td> + <td>{{CompatVersionUnknown}}</td> + <td>10 {{property_prefix("moz")}}<br> + {{CompatGeckoDesktop("16.0")}}</td> + <td>10, partial</td> + <td>15</td> + <td>7.1</td> + </tr> + <tr> + <td>Disponible dans les <em>web workers</em></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("37.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Android</th> + <th>Webview Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome pour Android</th> + </tr> + <tr> + <td>Support simple</td> + <td>4.4</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("22.0")}}</td> + <td>10</td> + <td>22</td> + <td>8</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Disponible dans les <em>web workers</em></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("37.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<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> diff --git a/files/fr/web/api/idbindex/openkeycursor/index.html b/files/fr/web/api/idbindex/openkeycursor/index.html new file mode 100644 index 0000000000..09f7003c12 --- /dev/null +++ b/files/fr/web/api/idbindex/openkeycursor/index.html @@ -0,0 +1,228 @@ +--- +title: IDBIndex.openKeyCursor() +slug: Web/API/IDBIndex/openKeyCursor +tags: + - API + - IDBIndex + - IndexedDB + - Méthode + - Reference + - openKeyCursor +translation_of: Web/API/IDBIndex/openKeyCursor +--- +<div>{{APIRef("IndexedDB")}}</div> + +<p>La méthode <strong><code>openKeyCursor()</code></strong> de {{domxref("IDBIndex")}} renvoie un objet {{domxref("IDBRequest")}} et, dans un <em>thread</em> séparé, crée un curseur sur l'intervalle de clé passé en argument pour l'index courant.</p> + +<p>Cette méthode positionne le curseur sur la clé appropriée, dans la direction indiquée :</p> + +<ul> + <li>si l'intervalle de clé n'est pas défini ou s'il est nul, l'intervalle englobera l'ensemble des clés</li> + <li>si au moins une clé correspond à l'intervalle de clés, un évènement <code>success</code> est déclenché pour la requête qui est renvoyée. La propriété <code>result</code> de cet évènement contiendra un objet {{domxref("IDBCursor")}} dont la propriété <code>value</code> correspond à l'enregistrement qui a été traduit.</li> + <li>Si aucun intervalle ne correspond à l'intervalle indiqué, un évènement <code>error</code> est déclenché pour la requête.</li> +</ul> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">var monIndex = objectStore.index("index"); +var request = monIndex.openKeyCursor(keyRange,direction);</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>keyRange</code> {{optional_inline}}</dt> + <dd>L'{{domxref("IDBKeyRange","intervalle de clé")}} sur lequel se déplace le curseur. On peut passer un clé seule qui sera alors considéré comme une {{domxref("IDBKeyRange.only","intervalle seule")}}. Par défaut le curseur se déplace sur l'ensemble des clés de l'index.</dd> + <dt><code>direction</code> {{optional_inline}}</dt> + <dd>La {{domxref("IDBCursor.direction","direction")}} du {{domxref("IDBCursor","curseur")}} qui défini le sens d'itération. par défaut "next".</dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p>Un objet {{domxref("IDBRequest")}} sur lequel on peut écouter les évènements associés à l'opération lancée par la méthode.</p> + +<h3 id="Exceptions">Exceptions</h3> + +<p>Cette méthode peut lever une exception :</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Type d'exception</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>TransactionInactiveError</td> + <td>La transaction pour cet index {{domxref("IDBIndex")}} est inactive.</td> + </tr> + <tr> + <td><code>TypeError</code></td> + <td>La valeur du paramètre pour la direction est invalide.</td> + </tr> + <tr> + <td><code>DataError</code></td> + <td> + <p>La clé ou l'intervalle de clé fourni contient une clé invalide.</p> + </td> + </tr> + <tr> + <td><code>InvalidStateError</code></td> + <td>L'index {{domxref("IDBIndex")}} a été supprimé ou déplacé.</td> + </tr> + </tbody> +</table> + +<h2 id="Exemple">Exemple</h2> + +<p>Dans l'exemple suivant on ouvre une transaction puis un magasin d'objet et enfin l'index <code>lName</code>.</p> + +<p>Ensuite, on itère sur l'ensemble des enregistrements pour en insérer leur clé dans un tableau HTML. En utilisant la méthode {{domxref("IDBIndex.openKeyCursor")}} qui travaille de la même façon que la méthode {{domxref("IDBObjectStore.openKeyCursor")}} de l'{{domxref("IDBObjectStore","accès")}} au magasin d'objet sauf que les enregistrements sont renvoyés dans l'ordre de l'index et non celui du magasin d'objet.</p> + +<pre class="brush:js">function displayDataByIndex() { + tableEntry.innerHTML = ''; + + //ouvre un transaction + var transaction = db.transaction(['contactsList'], 'readonly'); + //accés au magasin d'objet + var objectStore = transaction.objectStore('contactsList'); + + //on récupère l'index + var myIndex = objectStore.index('lName'); + + //un curseur qui itère sur l'index + var request = myIndex.openCursor(); + request.onsuccess = function(event) { + var cursor = request.result; + if(cursor) { + + + // cursor.key la clé de l'enregistrement à la position du curseur + // il n'y as pas de cursor.value contrairement à openCursor() + + var tableRow = document.createElement('tr'); + tableRow.innerHTML = '<td>' + cursor.key + '</td>' + tableEntry.appendChild(tableRow); + + //on relance la requête pour la position suivante du curseur + cursor.continue(); + } else { + console.log('Toutes les clé ont été affichés.'); + } + }; +};</pre> + +<p class="note"><strong>Note :</strong> pour un exemple fonctionnel complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">application To-do</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple</a>).</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('IndexedDB', '#widl-IDBIndex-openKeyCursor-IDBRequest-any-range-IDBCursorDirection-direction', 'openKeyCursor()')}}</td> + <td>{{Spec2('IndexedDB')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Support simple</td> + <td>23{{property_prefix("webkit")}}<br> + 24</td> + <td>{{CompatVersionUnknown}}</td> + <td>10 {{property_prefix("moz")}}<br> + {{CompatGeckoDesktop("16.0")}}</td> + <td>10, partial</td> + <td>15</td> + <td>7.1</td> + </tr> + <tr> + <td>Disponible pour les <em>web workers</em></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("37.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</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>Webview Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome pour Android</th> + </tr> + <tr> + <td>Support simple</td> + <td>4.4</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("22.0")}}</td> + <td>1.0.1</td> + <td>10</td> + <td>22</td> + <td>8</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Disponible pour les <em>web workers</em></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("37.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<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> +</ul> diff --git a/files/fr/web/api/idbindex/unique/index.html b/files/fr/web/api/idbindex/unique/index.html new file mode 100644 index 0000000000..a10b64189e --- /dev/null +++ b/files/fr/web/api/idbindex/unique/index.html @@ -0,0 +1,172 @@ +--- +title: IDBIndex.unique +slug: Web/API/IDBIndex/unique +tags: + - API + - IDBIndex + - IndexedDB + - Propriété + - Reference +translation_of: Web/API/IDBIndex/unique +--- +<div>{{APIRef("IndexedDB")}}</div> + +<p>La propriété <strong><code>unique</code></strong>, rattachée à l'interface <code>IDBIndex</code>, est un booléen qui indique si l'index utilisé permet d'avoir des clés dupliquées.</p> + +<p>Cette caractéristique est décidée lors de la création de l'index, avec la méthode {{domxref("IDBObjectStore.createIndex")}}. Cette méthode prend un paramètre optionnel, <code>unique</code>, qui, s'il vaut <code>true</code>, indique que l'index ne permettra pas d'avoir de clés dupliquées.</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">var myIndex = objectStore.index('index');</pre> + +<h3 id="Valeur">Valeur</h3> + +<p>Un booléen qui vaut <code>true</code> si l'index permet d'avoir des valeurs dupliquées pour une même clé ou <code>false</code> s'il n'est pas possible d'avoir de clés dupliquées.</p> + +<h2 id="Exemples">Exemples</h2> + +<p>Dans l'exemple suivant, on ouvre une transaction en lecture sur un magasin d'objets puis on récupère l'index <code>lName</code>. On ouvre alors un curseur sur l'index grâce à {{domxref("IDBIndex.openCursor")}} (cela fonctionne de façon analogue à l'ouverture d'un curseur sur le magasin d'objets avec {{domxref("IDBObjectStore.openCursor")}} sauf qu'ici, les enregistrements sont triés selon l'index et pas selon la clé primaire.</p> + +<p>On affiche le caractère unique des clé dans la console (ici, on voit que la propriété vaut <code>false</code>).</p> + +<p>Enfin, on parcourt chaque enregistrement et on insère les données dans le tableau HTML (pour voir un exemple complet, consulter <a href="https://github.com/mdn/IDBIndex-example">notre dépôt IDBIndex-example</a> (<a href="https://mdn.github.io/IDBIndex-example/">voir la démonstration <em>live</em></a>).</p> + +<pre class="brush: js">function displayDataByIndex() { + tableEntry.innerHTML = ''; + var transaction = db.transaction(['contactsList'], 'readonly'); + var objectStore = transaction.objectStore('contactsList'); + + var myIndex = objectStore.index('lName'); + console.log(myIndex.unique); + + myIndex.openCursor().onsuccess = function(event) { + var cursor = event.target.result; + if(cursor) { + var tableRow = document.createElement('tr'); + tableRow.innerHTML = '<td>' + cursor.value.id + '</td>' + + '<td>' + cursor.value.lName + '</td>' + + '<td>' + cursor.value.fName + '</td>' + + '<td>' + cursor.value.jTitle + '</td>' + + '<td>' + cursor.value.company + '</td>' + + '<td>' + cursor.value.eMail + '</td>' + + '<td>' + cursor.value.phone + '</td>' + + '<td>' + cursor.value.age + '</td>'; + tableEntry.appendChild(tableRow); + + cursor.continue(); + } else { + console.log('Les éléments sont affichés.'); + } + }; +};</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('IndexedDB', '#widl-IDBIndex-unique', 'unique')}}</td> + <td>{{Spec2('IndexedDB')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Support simple</td> + <td>23{{property_prefix("webkit")}}<br> + 24</td> + <td>{{CompatVersionUnknown}}</td> + <td>10 {{property_prefix("moz")}}<br> + {{CompatGeckoDesktop("16.0")}}</td> + <td>10, partial</td> + <td>15</td> + <td>7.1</td> + </tr> + <tr> + <td>Disponible dans les <em>web workers</em></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("37.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Android</th> + <th>Webview Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome pour Android</th> + </tr> + <tr> + <td>Support simple</td> + <td>4.4</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("22.0")}}</td> + <td>10</td> + <td>22</td> + <td>8</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Disponible dans les <em>web workers</em></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("37.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<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> |