Afficher et modifier les données IndexedDB

Article
11/07/2024

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

Afficher les données IndexedDB

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.
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.
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 ().

Le volet Manifeste s’ouvre généralement par défaut :
Dans la barre latérale, sous Stockage, développez le menu IndexedDB pour voir les bases de données disponibles :
- () keyval-store représente une base de données.
- () keyval est un magasin d’objets dans la base de données.
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 :
Cliquez sur le keyval magasin d’objets pour afficher les paires clé-valeur :

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.
Cliquez sur une cellule dans la colonne Valeur pour développer la valeur :

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 ().
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 :

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

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

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

Afficher un magasin d’objets IndexedDB.
Cliquez sur la paire clé-valeur à supprimer. DevTools met en surbrillance la paire clé-valeur pour indiquer qu’elle est sélectionnée :
Appuyez sur Deleteou cliquez sur le bouton Supprimer sélectionné () :

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

Afficher un magasin d’objets IndexedDB.
Cliquez sur le bouton 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.

Supprimer tout le stockage IndexedDB

Dans la barre latérale de l’outil Application , cliquez sur Stockage.
Faites défiler jusqu’aux cases Stockage et vérifiez que la case IndexedDB est cochée .
Cliquez sur 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 originale se trouve ici et est créée par Kayce Basques.

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

Partage via