recursal/MDN huggingface dataset:
IDBIndex.getAllKeys()
=====================

La méthode **`getAllKeys()`**, rattachée à l'interface `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é `result` de l'objet renvoyé par la méthode.

Syntaxe
-------


```js
var getAllKeysRequest = IDBIndex.getAllKeys();
var getAllKeysRequest = IDBIndex.getAllKeys(requete);
var getAllKeysRequest = IDBIndex.getAllKeys(requete, quantite);
```

### Paramètres

`requete` Facultatif

Une clé ou un intervalle de clé (`IDBKeyRange`) qui identifie les clés qu'on souhaite récupérer. Si cette valeur vaut `null` ou est absente, le navigateur utilisera un intervalle de clé sans limite.

`quantite` Facultatif

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 à `2^32-1`, une exception `TypeError` sera levée.

### Valeur de retour

Un objet `IDBRequest` sur lequel seront reçus les différents évènements rattachés à cette opération.

### Exceptions

Cette méthode peut déclencher une des exceptions suivantes :

| Exception | Description |
| --- | --- |
| `TransactionInactiveError` | La transaction pour cet index `IDBIndex` est inactive. |
| `InvalidStateError` | L'index `IDBIndex` a été supprimé ou déplacé. |
| `TypeError` | Le paramètre `quantite` n'est pas compris entre `0` et `2^32-1` |

Exemples
--------


```js
var myIndex = objectStore.index("index");
var getAllKeyRequest = myIndex.getAllKeys();
getAllKeysRequest.onsuccess = function () {
  console.log(getAllKeysRequest.result);
};
```

Spécifications
--------------

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbindex-getallkeys① |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Utiliser IndexedDB
* Initier une connexion : `IDBDatabase`
* Utiliser les transactions : `IDBTransaction`
* Définir un intervalle de clés : `IDBKeyRange`
* Récupérer et modifier les données : `IDBObjectStore`
* Utiliser les curseurs `IDBCursor`
* Exemple de référence : To-do Notifications (exemple *live*).
IDBIndex.objectStore
====================

La propriètè **`objectStore`** de l'interface `IDBIndex` renvoie un accès au magasin d'objet que référence l'index.

**Note:** Cette fonctionnalité est disponible via les Web Workers

Syntaxe
-------


```js
var indexObjectStore = myIndex.objectStore;
```

Valeur
------

Un `accès au magasin d'objet`.

Example
-------

Dans l'exemple suivant on ouvre une transaction puis un magasin d'objet et enfin l'index `lName`.

Le magasin d'objet référencé par l'index est afficher sur la console, quelque chose ressemblant à:


```js
IDBObjectStore { name: "contactsList", keyPath: "id", indexNames: DOMStringList[7], transaction: IDBTransaction, autoIncrement: false }
```


Finalement, On itère sur tous les enregistrements pour en insérer les données dans un tableau HTML. En utilisant la méthode `IDBIndex.openCursor` qui travaille de la même façon que la méthode `IDBObjectStore.openCursor` de l'`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.


```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.");
    }
  };
}
```


**Note :** Pour un exemple de travail complet, voir notre To-do Notifications app (view example live).

Spécifications
--------------

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbindex-objectstore① |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* `Utiliser IndexedDB`
* `Débuter une connexion`
* `Utilisé les transactions`
* `Définir l'intervalle des clés`
* `Accès aux magasins d'objets`
* `Utiliser les curseur`
* Exemple de référence: To-do Notifications (view example live.)
IDBIndex.unique
===============

La propriété **`unique`**, rattachée à l'interface `IDBIndex`, est un booléen qui indique si l'index utilisé permet d'avoir des clés dupliquées.

Cette caractéristique est décidée lors de la création de l'index, avec la méthode `IDBObjectStore.createIndex`. Cette méthode prend un paramètre optionnel, `unique`, qui, s'il vaut `true`, indique que l'index ne permettra pas d'avoir de clés dupliquées.

**Note:** Cette fonctionnalité est disponible via les Web Workers

Syntaxe
-------


```js
var myIndex = objectStore.index("index");
```

### Valeur

Un booléen qui vaut `true` si l'index permet d'avoir des valeurs dupliquées pour une même clé ou `false` s'il n'est pas possible d'avoir de clés dupliquées.

Exemples
--------

Dans l'exemple suivant, on ouvre une transaction en lecture sur un magasin d'objets puis on récupère l'index `lName`. On ouvre alors un curseur sur l'index grâce à `IDBIndex.openCursor` (cela fonctionne de façon analogue à l'ouverture d'un curseur sur le magasin d'objets avec `IDBObjectStore.openCursor` sauf qu'ici, les enregistrements sont triés selon l'index et pas selon la clé primaire.

On affiche le caractère unique des clé dans la console (ici, on voit que la propriété vaut `false`).

Enfin, on parcourt chaque enregistrement et on insère les données dans le tableau HTML (pour voir un exemple complet, consulter notre dépôt IDBIndex-example (voir la démonstration *live*).


```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.");
    }
  };
}
```

Spécifications
--------------

| Specification |
| --- |
| Indexed Database API 3.0 # dom-idbindex-unique |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Utiliser IndexedDB
* Initier une connexion : `IDBDatabase`
* Utiliser les transactions : `IDBTransaction`
* Définir un intervalle de clés : `IDBKeyRange`
* Récupérer et modifier les données : `IDBObjectStore`
* Utiliser les curseurs `IDBCursor`
* Exemple de référence : To-do Notifications (exemple *live*).
IDBIndex.locale
===============

**Expérimental:** **Cette fonction est expérimentale**  
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.  
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

La propriété en lecture seule **`locale`**, rattachée à l'interface `IDBIndex`, fournit la locale de l'index (par exemple `en-US`, ou `pl`) si une valeur `locale` a été fournie lors sa création (voir le paramètre d'options pour `createIndex()`). On notera que cette propriété renvoie toujours la locale courante utilisée par l'index. Autrement dit, elle ne renvoie jamais `"auto"`.

Valeur
------

Une chaîne de caractères.

Exemples
--------

Dans l'exemple qui suit, on ouvre une transaction et un magasin d'objets puis on récupère l'index `lName` d'une base de données de contacts. On utilise ensuite un curseur sur l'index en utilisant `IDBIndex.openCursor`, ce qui est similaire à l'ouverture d'un curseur directement sur un objet `ObjectStore` avec `IDBObjectStore.openCursor`, mais qui permet de trier les enregistrements renvoyés selon l'index et pas selon la clé primaire.

La valeur `locale` est affichée dans la console.


```js
function displayDataByIndex() {
  tableEntry.innerHTML = "";
  const transaction = db.transaction(["contactsList"], "readonly");
  const objectStore = transaction.objectStore("contactsList");

  const monIndex = objectStore.index("lName");
  console.log(monIndex.locale);

  monIndex.openCursor().onsuccess = function (event) {
    const cursor = event.target.result;
    if (cursor) {
      const 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 résultats ont été affichés.");
    }
  };
}
```

Spécifications
--------------

Cette propriété ne fait partie d'aucune spécification.

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Utiliser l'API IndexedDB
* Initier des transactions : `IDBDatabase`
* Utiliser des transactions : `IDBTransaction`
* Définir un intervalle de clés : `IDBKeyRange`
* Récupérer et modifier les données : `IDBObjectStore`
* Utiliser les curseurs : `IDBCursor`
* Exemples : Notifications d'une liste de tâches (voir l'exemple qui fonctionne)
IDBIndex.isAutoLocale
=====================

**Expérimental:** **Cette fonction est expérimentale**  
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.  
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

La propriété en lecture seule **`isAutoLocale`**, rattachée à l'interface `IDBIndex`, est un booléen qui indique si la valeur `locale` de l'index vaut `auto` (cf. les paramètres optionnels de `createIndex()`).

Syntaxe
-------


```js
var monIndex = objectStore.index("index");
console.log(monIndex.isAutoLocale);
```

### Valeur

Un booléen.

Exemples
--------

Dans l'exemple suivant, on ouvre une transaction et un magasin d'objet puis on récupère l'index `lName` depuis une base de données de contact. Ensuite, on ouvre un curseur simple sur l'index grâce à la méthode `IDBIndex.openCursor` — cela fonctionne comme si on avait directement ouvert un curseur sur un magasin d'objet avec `IDBObjectStore.openCursor` mais ici les enregistrements sont triés selon l'index et pas selon la clé primaire.

La valeur `isAutoLocale` est affichée dans la console.


```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.");
    }
  };
}
```

Spécifications
--------------

Actuellement, cette propriété ne fait partie d'aucune spécification.

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Utiliser IndexedDB
* Initier une connexion : `IDBDatabase`
* Utiliser les transactions : `IDBTransaction`
* Définir un intervalle de clés : `IDBKeyRange`
* Récupérer et modifier les données : `IDBObjectStore`
* Utiliser les curseurs `IDBCursor`
* Exemple de référence : To-do Notifications (exemple *live*).
IDBIndex.keyPath
================

La propriété **`keyPath`** de l'interface `IDBIndex` renvoie le chemin de clé de l'index. Si l'index n'est pas automatiquement mise à jour la propriété vaux `null`.

**Note:** Cette fonctionnalité est disponible via les Web Workers

Syntaxe
-------


```js
var keyPath = myIndex.keyPath;
```

Valeur
------

Tous types de valeur pouvant être utilisés comme chemin de clé.

Exemple
-------

Dans l'exemple suivant on ouvre une transaction puis un magasin d'objet et enfin l'index `lName`.

Le chemin de clé de l'index est affiché sur la console (ici: `lName`).

Finalement, On itère sur tous les enregistrements pour en insérer les données dans un tableau HTML. En utilisant la méthode `IDBIndex.openCursor` qui travaille de la même façon que la méthode `IDBObjectStore.openCursor` de l'`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.


```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.");
    }
  };
}
```


**Note :** Pour un exemple de travail complet, voir notre To-do Notifications app (view example live).

Spécifications
--------------

| Specification |
| --- |
| Indexed Database API 3.0 # dom-idbindex-keypath |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* `Utiliser IndexedDB`
* `Débuter une connexion`
* `Utilisé les transactions`
* `Définir l'intervalle des clés`
* `Accès aux magasins d'objets`
* `Utiliser les curseur`
* Exemple de référence: To-do Notifications (view example live.)
TextMetrics.width
=================

La propriété en lecture seule **TextMetrics.width** contient en pixels CSS la largeur d'avance du texte (la largeur de la boîte de ligne).

Syntaxe
-------


```js
readonly metrics.width;
```

Exemples
--------

Étant donné cet élément `<canvas>` :


```html
<canvas id="canevas"></canvas>
```


vous pouvez obtenir un objet `TextMetrics` en utilisant le code suivant :


```js
var canvas = document.getElementById("canevas");
var ctx = canvas.getContext("2d");

var texte = ctx.measureText("foo"); // objet TextMetrics
texte.width; // 16;
```

Spécifications
--------------

| Specification |
| --- |
| HTML Standard # dom-textmetrics-width-dev |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* `TextMetrics`
PasswordCredential
==================

**Non standard:** Cette fonctionnalité n'est ni standard, ni en voie de standardisation. Ne l'utilisez pas pour des sites accessibles sur le Web : elle ne fonctionnera pas pour tout utilisateur. Il peut également y avoir d'importantes incompatibilités entre les implémentations et son comportement peut être modifié dans le futur.

Le constructeur **`PasswordCredential`** permet de créer un nouvel objet `PasswordCredential`.

Pour les navigateurs qui prennent en charge cette fonctionnalité, une instance de cette classe peut être utilisée comme propriété `credential` pour l'objet `init` qui sera l'argument pour un appel à `fetch`.

Syntaxe
-------


```js
var mesCredentials = new PasswordCredential(passwordCredentialData);
var mesCredentials = new PasswordCredential(HTMLFormElement);
```

### Paramètres

Le constructeur peut prendre l'une de ces deux valeurs en argument.

`passwordCredentialData`

Un dictionnaire `PasswordCredentialData` avec les champs suivants :

* `iconURL` Facultatif : l'URL de l'image pour l'avatar de l'utilisateur.
* `id` : l'identifiant de l'utilisateur qui se connecte.
* `name` Facultatif : le nom de l'utilisateur qui se connecte.
* `password` : le mot de passe de l'utilisateur qui se connecte.

`htmlFormElement`

Une référence à un objet `HTMLFormElement` contenant les champs de saisis appropriés. Le formulaire correspondant devrait contenir au moins un champ `id` et un champ `password`. Le formulaire peut aussi demander un jeton CSRF.

Exemples
--------

Dans cet exemple, nous verrons comment définir un formulaire et capturer les données saisies pour créer un objet `PasswordCredential`.

### HTML


```html
<form id="form" method="post">
  <input type="text" name="id" autocomplete="username" />
  <input type="password" name="password" autocomplete="current-password" />
  <input type="hidden" name="csrf\_token" value="\*\*\*\*\*" />
</form>
```

### JavaScript

Dans le script, on pourra faire référence à ce formulaire et l'utiliser pour créer un objet `PasswordCredential` afin de le stocker dans le système de mots de passe de l'agent utilisateur.


```js
var form = document.querySelector("#form");
var creds = new PasswordCredential(form);
// Stocker les informations d'authentification
navigator.credentials.store(creds).then(function (creds) {
  // Faire quelque chose avec les informations d'authentification si besoin
});
```

Spécifications
--------------

| Specification |
| --- |
| Credential Management Level 1 # dom-passwordcredential-passwordcredential |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
PasswordCredential.name
=======================

**Expérimental:** **Cette fonction est expérimentale**  
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.  
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

La propriété **`name`** est accessible en lecture seule et est rattachée à l'interface `PasswordCredential`. C'est une chaîne de caractères `USVSTring` qui contient un nom public, compréhensible pour un humain et qui est destiné à être affiché dans un sélecteur de fournisseur d'authentification.

Syntaxe
-------


```js
name = passwordCredential.name;
```

### Valeur

A `USVString` containing a name.

Spécifications
--------------

| Specification |
| --- |
| Credential Management Level 1 # dom-credentialuserdata-name |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
PasswordCredential.password
===========================

**Expérimental:** **Cette fonction est expérimentale**  
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.  
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

La propriété **`password`** est une propriété accessible en lecture seule rattachée à l'interface `PasswordCredential` et fournit une chaîne de caractères `USVString` contenant le mot de passe lié aux informations d'authentification.

Syntaxe
-------


```js
password = passwordCredential.password;
```

### Valeur

Une chaîne de caractères `USVString` contenant le mot de passe.

Spécifications
--------------

| Specification |
| --- |
| Credential Management Level 1 # dom-passwordcredential-password |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.