Afficher et modifier les données IndexedDB

  • Article

Pour afficher et modifier les données IndexedDB , utilisez l’outil Application .

Afficher les données IndexedDB

  1. Ouvrez une page web qui utilise IndexedDB dans une nouvelle fenêtre ou un nouvel onglet. Vous pouvez utiliser l’application de démonstration PWAmp.

  2. Pour ouvrir DevTools, cliquez avec le bouton droit sur la page web, puis sélectionnez Inspecter. Vous pouvez également appuyer sur Ctrl+Maj+I (Windows, Linux) ou Cmd+Option+I (macOS). DevTools s’ouvre.

  3. Dans DevTools, dans la barre d’activité, sélectionnez l’onglet Application . Si cet onglet n’est pas visible, cliquez sur le bouton Autres outils (icône Autres outils).

    Le volet Manifeste s’ouvre généralement par défaut :

    Volet Manifeste de l’outil Application

  4. Dans la barre latérale, sous Stockage, développez le menu IndexedDB pour voir les bases de données disponibles :

    Menu IndexedDB

    • (Icône de base de données) keyval-store représente une base de données.

    • (Icône magasin d’objets) keyval est un magasin d’objets dans la base de données.

  5. Sélectionnez la keyval-store base de données pour afficher son origine, son numéro de version et d’autres informations sur la base de données :

    Informations sur la base de données keyval-store, dans l’outil Application

  6. Cliquez sur le keyval magasin d’objets pour afficher les paires clé-valeur :

    Magasin d’objets notes

    Note: Les données IndexedDB ne sont pas mises à jour en temps réel. Si vous voyez des données obsolètes affichées dans un magasin d’objets, actualisez la vue du magasin d’objets. Consultez Actualiser les données IndexedDB.

  7. Cliquez sur une cellule dans la colonne Valeur pour développer la valeur :

    Afficher une valeur IndexedDB

Actualiser les données IndexedDB

Les valeurs IndexedDB de l’outil Application ne sont pas mises à jour en temps réel.

  • Pour actualiser les données, affichez un magasin d’objets, puis cliquez sur le bouton Actualiser (actualiser).

  • Pour actualiser toutes les données d’une base de données IndexedDB, affichez une base de données, puis cliquez sur Actualiser la base de données :

    Vue de base de données, avec le bouton Actualiser

Modifier les données IndexedDB

Les clés et les valeurs IndexedDB ne sont pas modifiables à partir de l’outil Application . Toutefois, étant donné que DevTools a accès au contexte de page, vous pouvez exécuter du code JavaScript dans DevTools pour modifier les données stockées dans une base de données IndexedDB.

Modifier les données IndexedDB à l’aide de l’outil Console

  1. Dans DevTools, dans la barre d’activité, sélectionnez l’onglet Console .

  2. Dans l’outil Console , exécutez du code JavaScript pour modifier les données IndexedDB. Par exemple, pour ajouter une nouvelle valeur au magasin d’objets keyval , exécutez le code suivant :

    let connection = indexedDB.open("keyval-store", 1);

connection.onsuccess = e => {
  const database = e.target.result;
  const transaction = database.transaction("keyval", "readwrite");
  const objectStore = transaction.objectStore("keyval");
  const request = objectStore.add({foo: "bar"}, "new-key");
  request.onsuccess = e => {
    console.log(e.target.result);
  }
}

Modifier les données IndexedDB à l’aide d’extraits de code

Les extraits de code sont un moyen de stocker et d’exécuter du code JavaScript à plusieurs reprises, dans DevTools. Si vous avez besoin de modifier souvent les données IndexedDB, stockez-les dans un nouvel extrait de code, puis exécutez l’extrait de code. Pour plus d’informations, consultez Exécuter des extraits de code JavaScript sur n’importe quelle page web.

Utilisation d’un extrait de code pour interagir avec IndexedDB

Supprimer les données IndexedDB

Vous pouvez supprimer l’un des éléments suivants :

  • Paire clé-valeur IndexedDB.
  • Toutes les paires clé-valeur dans un magasin d’objets.
  • Une base de données IndexedDB.
  • Tout le stockage IndexedDB.

Ces options sont décrites ci-dessous.

Supprimer une paire clé-valeur IndexedDB

  1. Afficher un magasin d’objets IndexedDB.

  2. Cliquez sur la paire clé-valeur à supprimer. DevTools met en surbrillance la paire clé-valeur pour indiquer qu’elle est sélectionnée :

    Un élément de paire clé-valeur est sélectionné dans la vue du magasin d’objets

  3. Appuyez sur Deleteou cliquez sur le bouton Supprimer sélectionné (icône Supprimer sélectionné) :

    Bouton Supprimer la valeur de clé dans la barre d’outils de l’affichage du magasin d’objets

Supprimer toutes les paires clé-valeur dans un magasin d’objets

  1. Afficher un magasin d’objets IndexedDB.

  2. Cliquez sur le bouton Effacer le magasin d’objets (Effacer le magasin d’objets).

    Bouton Effacer le magasin d’objets dans la barre d’outils de l’affichage du 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

Supprimer tout le stockage IndexedDB

  1. Dans la barre latérale de l’outil Application , cliquez sur Stockage.

  2. Faites défiler jusqu’aux cases Stockage et vérifiez que la case IndexedDB est cochée .

  3. Cliquez sur le bouton Effacer les données du site .

    Le volet Stockage, montrant les différentes cases à cocher de stockage et le bouton Effacer les données du site

Remarque

Les parties de cette page sont des modifications basées sur le travail créé et partagé par Google et utilisées conformément aux termes décrits dans la licence internationale Creative Commons Attribution 4.0. La page d’origine se trouve ici et est créée par Kayce Basques (Rédacteur technique, Chrome DevTools & Lighthouse).

Licence Creative Commons Cette œuvre est concédée sous licence creative commons attribution 4.0 international.