Afficher et modifier le stockage de session

Pour afficher, modifier et supprimer les paires clé-valeur sessionStorage , utilisez l’outil Application .

Afficher les valeurs et clés sessionStockage

Pour afficher les sessionStorage paires clé-valeur d’un domaine :

1. Dans DevTools, cliquez sur l’onglet Application pour ouvrir l’outil Application . Le panneau Manifeste s’affiche par défaut :

   

2. Dans la section Stockage à gauche, développez Stockage de session :

   

3. Dans le stockage de session sur la gauche, sélectionnez un domaine. Les paires clé-valeur du domaine sont répertoriées dans le coin supérieur droit :

   

4. Sélectionnez une ligne de la table clé-valeur. La valeur de la clé sélectionnée s’affiche sous la table clé-valeur :

   

Créer une nouvelle paire clé-valeur sessionStorage

Pour ajouter une nouvelle paire clé/valeur pour le stockage de session :

1. Dans DevTools, dans l’outil Application , dans la section Stockage à gauche, développez Stockage de session, puis sélectionnez un domaine. Pour plus d’informations, consultez Afficher les valeurs et clés de stockage de session ci-dessus.

2. Dans la table Clé/Valeur à droite, double-cliquez sur une ligne clé/valeur vide pour passer en mode édition.

3. Dans le champ Clé de la ligne, entrez une clé.

4. Dans le champ Valeur de la ligne, entrez une valeur pour la clé.

5. Appuyez sur Entrée ou cliquez sur une zone vide. La valeur est ensuite également affichée sous la table clé/valeur :

   

Modifier les valeurs ou clés sessionStorage

Pour modifier une paire clé/valeur pour le stockage de session :

1. Dans DevTools, dans l’outil Application , dans la section Stockage à gauche, développez Stockage de session, puis sélectionnez un domaine. Pour plus d’informations, consultez Afficher les valeurs et clés de stockage de session ci-dessus.

2. Dans la table Clé/Valeur à droite, double-cliquez sur une cellule de la colonne Clé ou Valeur pour modifier cette clé ou cette valeur :

   

Supprimer les paires clé-valeur sessionStorage

Pour supprimer une paire clé/valeur pour le stockage de session :

1. Dans DevTools, dans l’outil Application , dans la section Stockage à gauche, développez Stockage de session, puis sélectionnez un domaine. Pour plus d’informations, consultez Afficher les valeurs et clés de stockage de session ci-dessus.

2. Dans la table Clé/Valeur à droite, sélectionnez une paire clé-valeur pour la mettre en surbrillance.

3. Appuyez sur Deleteou cliquez sur le bouton Supprimer la sélection (), ou cliquez avec le bouton droit sur la ligne, puis sélectionnez Supprimer.

Supprimer toutes les paires clé-valeur sessionStorage pour un domaine

Pour supprimer toutes les paires clé/valeur pour le stockage de session d’un domaine :

1. Dans DevTools, dans l’outil Application , dans la section Stockage à gauche, développez Stockage de session, puis sélectionnez un domaine. Pour plus d’informations, consultez Afficher les valeurs et clés de stockage de session ci-dessus.

2. Cliquez sur le bouton Effacer tout ().

Interagir avec sessionStorage à partir de la console

Vous pouvez exécuter des expressions et des instructions JavaScript dans la console, et la console a accès aux contextes JavaScript de la page, y compris pour sessionStorage.

Pour interagir avec sessionStorage à l’aide de la console :

1. Dans DevTools, sélectionnez l’outil Console . Par exemple, appuyez sur Échap pour afficher le panneau Affichage rapide , qui inclut toujours un onglet Console .

2. Si vous souhaitez accéder sessionStorage aux paires clé-valeur d’un domaine autre que la page que vous utilisez, utilisez le menu contextuel JavaScript pour modifier le contexte JavaScript de la console :

   

   Dans ce scénario, plusieurs domaines seraient répertoriés en haut.

3. Entrez des sessionStorage expressions JavaScript dans la console :

   

   La capture d’écran ci-dessus montre les expressions JavaScript suivantes et la sortie résultante :

   > sessionStorage.key(0)
   <· 'my-key-01'
   > sessionStorage.key(1)
   <· 'my-key-02'
   > sessionStorage.setItem("my-key-01", "efgh-5678")
   <· undefined
   > sessionStorage.getItem("my-key-01")
   <· 'efgh-5678'
   

   Lorsque vous entrez des expressions d’affectation JavaScript à l’aide de la console, la table des paires clé/valeur est mise à jour.

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

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