Afficher et modifier les données IndexedDB

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 bien les outils de développement. Si ce n'est pas le cas, consultez la section Premiers pas. Nous partons également du principe que vous connaissez IndexedDB. Si ce n'est pas le cas, reportez-vous à la section Utiliser IndexedDB.

Afficher les données IndexedDB

  1. Cliquez sur l'onglet Application pour ouvrir le panneau Application. Développez le menu IndexedDB pour voir les bases de données disponibles.

    Menu IndexedDB

    Figure 1 : Le menu IndexedDB

    • Icône Base de données 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.
    • Icône Magasin d'objets notes est un magasin d'objets.
    • title et body sont des index.
  1. Cliquez sur une base de données pour afficher son origine et son numéro de version.

    La base de données "notes"

    Figure 2 : La base de données notes

  2. Cliquez sur un magasin d'objets pour afficher ses paires clé-valeur.

    Le magasin d'objets "notes"

    Image 3. Le magasin d'objets notes

    • Nombre total d'entrées correspond au nombre total de paires clé-valeur dans le magasin d'objets.
    • Key generator value (Valeur du générateur de clés) est la prochaine clé disponible. Ce champ n'est affiché que lors de l'utilisation de générateurs de clés.
  3. Cliquez sur une cellule de la colonne Valeur pour développer la valeur correspondante.

    Afficher une valeur IndexedDB

    Figure 4. Afficher une valeur IndexedDB

  4. Cliquez sur un index, tel que title ou body (voir la Figure 6 ci-dessous) pour trier le magasin d'objets en fonction des valeurs de cet index.

    Trier un magasin d'objets par un index

    Figure 5. Un 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) 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.

Afficher une base de données

Figure 6. Afficher une base de données

Modifier les données IndexedDB

Les clés et valeurs indexées d'une base de données ne sont pas modifiables depuis le 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 à l'aide d'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 de code, le résultat est consigné dans la console. Vous pouvez utiliser un extrait pour exécuter du code JavaScript qui modifie une base de données IndexedDB.

Utiliser un extrait pour interagir avec IndexedDB

Figure 7 : Utiliser un extrait pour interagir avec IndexedDB

Supprimer les données IndexedDB

Supprimer une paire clé-valeur IndexedDB

  1. Affichez un magasin d'objets IndexedDB.
  2. Cliquez sur la paire clé-valeur que vous souhaitez supprimer. Les outils de développement le mettent en surbrillance en bleu pour indiquer qu'ils sont sélectionnés.

    Sélection d'une paire clé-valeur en vue de la supprimer

    Figure 8 : Sélection d'une paire clé-valeur en vue de la supprimer

  3. Appuyez sur la touche Supprimer ou cliquez sur Supprimer la sélection Supprimer la sélection.

    Apparence du magasin d'objets après la suppression de la paire clé-valeur

    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

  1. Affichez un magasin d'objets IndexedDB.

    Afficher un magasin d'objets

    Figure 10 : Afficher un magasin d'objets

  2. Cliquez sur Effacer le magasin d'objets Effacer le magasin d'objets.

Supprimer une base de données IndexedDB

  1. Affichez la base de données IndexedDB que vous souhaitez supprimer.
  2. Cliquez sur Supprimer la base de données.

    Bouton "Supprimer la base de données"

    Figure 11 : Le bouton Supprimer la base de données

Supprimer tout le stockage IndexedDB

  1. Ouvrez le volet Vider l'espace de stockage.
  2. Assurez-vous que la case IndexedDB est cochée.
  3. Cliquez sur Effacer les données des sites.

    Volet "Vider l'espace de stockage"

    Figure 12. Volet Effacer les données