Comment afficher ou modifier localStorage

259

J'ai créé une extension Chrome et j'utilise localStorage pour stocker des données.

J'accède à localStorage via "background_page".

Cela fonctionne bien, mais comment puis-je afficher manuellement ses valeurs? Dans Firefox, vous pouvez utiliser Firebug.

Quelqu'un a des suggestions?

google-chrome local-storage Joe Doe
la source

Réponses:

270

C'est simple. Accédez simplement aux outils de développement en appuyant sur F12, puis accédez à l' onglet Application . Dans la section Stockage , développez Stockage local . Après cela, vous y verrez tout le stockage local de votre navigateur.

Giorgi Gzirishvili
la source
33
Dans Chrome version 60, vous ne pouvez pas modifier ou ajouter de nouveaux éléments, vous devrez le faire via la console etlocalStorage.setItem('key', 'value')
Jim Aho
9
Dans Chrome version 65, vous pouvez modifier et ajouter manuellement de nouveaux éléments. Double-cliquez sous la dernière paire valeur-clé dans la liste de valeurs-clés dans Application> Stockage local pour ajouter une nouvelle valeur.
Rose Perrone
169

Ouvrez simplement les outils de développement en appuyant sur F12.

Cliquez sur l' onglet Application (anciennement Ressources) et vous verrez le contenu de localStorage. De là, vous pouvez ajouter / modifier / supprimer manuellement les entrées de clé / valeur.

onglet des ressources de stockage local

Sous OS X, les clés sont: ⌥+ ⌘+i

Une autre combinaison: Ctrl+ Shift+i

EDIT: Dans Chrome 56, cela ressemble à ceci:

entrez la description de l'image ici

Simone
la source
4
Yep a déjà essayé cela mais localStorage est vide. Peut-être parce que j'ai chargé l'extension décompressée?
Joe Doe
Cela peut vous aider: stackoverflow.com/questions/3598669/…
Simone
3
Simone, je sais comment configurer et lire localStorage avec JS, mais je dois le modifier / supprimer manuellement
Joe Doe
Pas besoin de le faire avec JS, il est possible d'ajouter / éditer / supprimer des entrées de l'interface utilisateur
Simone
17

J'utilise actuellement la version 52.0.2743.82 m de chrome. Dans cette dernière version de Chrome à partir de maintenant, vous pouvez voir les valeurs de stockage local en lançant "Developer Tools" puis en regardant dans l'onglet "Application".

Luke P. Issac
la source
15

Vous pouvez aller à chrome: // chrome / extensions et il y aura un lien vers votre page d'arrière-plan qui, une fois que vous lancez, vous pouvez utiliser les outils de développement pour voir les choses localStorage.

Ryan S
la source
Merci pour la réponse @Ryan S mais localStorage est vide Je l'ai défini comme cecilocalStorage['xy'] = JSON.stringify(xy);
Joe Doe
2
Dans la console chrome, vous pouvez le faire localStorage.setItem('xy', JSON.stringify(xy))et cela définira l'élément dans localStorage
Ryan S
2
faire chrome: // chrome-urls /, puis stockage local
khaled_webdev
2

Soit je ne comprends pas ce que les gens essaient de faire ici, et ce n'est pas ce que je fais, et / ou les outils de développement Chrome ont changé et sont cassés à cet égard.

Le script de contenu de mon extension stocke des données comme ceci:

chrome.storage.local.set(packet);

Lorsque je consulte l'onglet Application de la page d'arrière-plan de l'extension et que je développe Stockage> Stockage local, je vois mon extension répertoriée, mais en cliquant dessus, aucune donnée ne s'affiche.

La seule solution que j'ai trouvée est d'exécuter ceci dans la console de la page d'arrière-plan:

chrome.storage.local.get(null, function(data) {console.log(data);})

C'est similaire à la façon dont l'extension le lit (sauf en passant null pour obtenir toutes les clés au lieu d'un nom de clé pour obtenir uniquement celui que je veux) et cela fonctionne bien, c'est juste gênant de le taper à chaque fois. C'est aussi bizarre qu'il y ait toutes ces réponses ici qui ne fonctionnent pas pour moi.

J'utilise Chrome 73.0.3683.103 (version officielle) (64 bits) sur Windows 10. L'extension est toujours décompressée, si cela est pertinent, mais c'est le moment le plus probable pour lequel vous voudriez le faire, c'est-à-dire en développement.

énigme
la source