Ce guide vous explique comment utiliser les Outils pour les développeurs Chrome pour afficher et modifier les données IndexedDB. Nous partons du principe que vous connaissez les outils de développement. Si ce n'est pas le cas, consultez Premiers pas. Nous partons également du principe que vous connaissez bien IndexedDB. Si ce n'est pas le cas, reportez-vous à la section Utiliser IndexedDB.
Afficher les données IndexedDB
Cliquez sur l'onglet Application pour ouvrir le panneau Application. Développez le menu IndexedDB pour afficher les bases de données disponibles.
Figure 1 : Menu IndexedDB
notes : https://mdn.github.io représente une base de données, où notes est le nom de la base de données et https://mdn.github.io est l'origine qui peut accéder à la base de données.
notes est un magasin d'objets.- title et body sont des index.
Cliquez sur une base de données pour afficher son origine et son numéro de version.
Figure 2 : La base de données notes
Cliquez sur un magasin d'objets pour afficher ses paires clé-valeur.
Image 3. Le magasin d'objets notes
- Le total d'entrées correspond au nombre total de paires clé/valeur dans le magasin d'objets.
- La valeur du générateur de clés est la prochaine clé disponible. Ce champ ne s'affiche que lorsque vous utilisez des générateurs de clés.
Cliquez sur une cellule de la colonne Valeur pour développer cette valeur.
Figure 4. Afficher une valeur IndexedDB
Cliquez sur un index, tel que title (titre) ou body (corps) dans la figure 6 ci-dessous, pour trier le magasin d'objets en fonction de ses valeurs.
Figure 5. Magasin d'objets trié par ordre alphabétique en fonction de sa clé title
Actualiser les données IndexedDB
Les valeurs IndexedDB du panneau Application ne sont pas mises à jour en temps réel. Cliquez sur Refresh (Actualiser) 
lorsque vous consultez un magasin d'objets pour actualiser ses données, ou affichez une base de données et cliquez sur Refresh database (Actualiser la base de données) pour actualiser toutes les données.
Figure 6. Afficher une base de données
Modifier les données IndexedDB
Les clés et les valeurs IndexedDB ne peuvent pas être modifiées à partir du panneau Application. Étant donné que les outils de développement ont accès au contexte de la page, vous pouvez y exécuter du code JavaScript qui modifie les données IndexedDB.
Modifier les données IndexedDB avec des extraits
Les extraits permettent de stocker et d'exécuter des blocs de code JavaScript dans les outils de développement. Lorsque vous exécutez un extrait, le résultat est enregistré dans la console. Vous pouvez utiliser un extrait pour exécuter un code JavaScript qui modifie une base de données IndexedDB.
Figure 7 : Utiliser un extrait pour interagir avec IndexedDB
Supprimer les données IndexedDB
Supprimer une paire clé-valeur IndexedDB
- Affichez un magasin d'objets IndexedDB.
Cliquez sur la paire clé-valeur que vous souhaitez supprimer. Les outils de développement le mettent en surbrillance en bleu pour indiquer qu'il est sélectionné.
Figure 8 : La sélection d'une paire clé-valeur pour la supprimer
Appuyez sur la touche Supprimer ou cliquez sur Supprimer la sélection
.
Figure 9. Apparence du magasin d'objets après la suppression de la paire clé-valeur
Supprimer toutes les paires clé-valeur d'un magasin d'objets
Affichez un magasin d'objets IndexedDB.
Figure 10 : Afficher un magasin d'objets
Cliquez sur Clear object store (Effacer le magasin d'objets)
.
Supprimer une base de données IndexedDB
- Affichez la base de données IndexedDB que vous souhaitez supprimer.
Cliquez sur Supprimer la base de données.
Figure 11 : Bouton Supprimer la base de données
Supprimer tout l'espace de stockage IndexedDB
- Ouvrez le volet Effacer les données.
- Assurez-vous que la case IndexedDB est cochée.
Cliquez sur Effacer les données des sites.
Figure 12. Volet Vider l'espace de stockage