Como visualizar ou editar o localStorage

259

Criei uma extensão do Chrome e estou usando o localStorage para armazenar dados.

Estou acessando localStorage através de "background_page".

Funciona bem, mas como posso visualizar manualmente seus valores? No Firefox, você pode usar o Firebug.

Alguém tem alguma sugestão?

google-chrome local-storage

— Joe Doe
fonte

270

É simples. Basta acessar as ferramentas do desenvolvedor pressionando e F12, em seguida, vá para a guia Aplicativo . Na seção Armazenamento , expanda Armazenamento Local . Depois disso, você verá todo o armazenamento local do seu navegador lá.

— Giorgi Gzirishvili
fonte

33

No Chrome versão 60, você não pode modificar ou adicionar novos itens, você terá que fazê-lo através do console elocalStorage.setItem('key', 'value')

— Jim Aho

9

Na versão 65 do Chrome, você pode modificar e adicionar novos itens manualmente. Clique duas vezes abaixo do último par de valores-chave na lista de valores-chave em Aplicativo> Armazenamento Local para adicionar um novo valor.

— 21118 Rose Perrone

169

Simplesmente abra as Ferramentas do desenvolvedor pressionando F12.

Clique na guia Aplicativo (anteriormente Recursos) e você verá o conteúdo do localStorage. A partir daí, você pode adicionar / editar / excluir as entradas de chave / valor manualmente.

guia recursos localStorage

No OS X, as teclas são: ⌥+ ⌘+i

Outra combinação: Ctrl+ Shift+i

EDIT: No Chrome 56, fica assim:

insira a descrição da imagem aqui

— Simone
fonte

4

Sim, já tentei isso, mas localStorage está vazio. Talvez porque eu carreguei a extensão descompactada?

— 21812 Joe Doe

Isso pode ajudá-lo: stackoverflow.com/questions/3598669/…

— Simone

3

Simone, eu sei como definir e ler localStorage com JS, mas eu preciso editar manualmente / excluí-lo

— Joe Doe

Não é necessário fazer isso com o JS, é possível adicionar / editar / excluir entradas da interface do usuário

— Simone

17

Atualmente, estou usando a versão 52.0.2743.82 m do chrome. Nesta versão mais recente do chrome, a partir de agora, você pode ver os valores de armazenamento local iniciando "Ferramentas do desenvolvedor" e depois examinando a guia "Aplicativo".

— Luke P. Issac
fonte

15

Você pode acessar chrome: // chrome / extensions e haverá um link para sua página de plano de fundo que, depois que você iniciar, poderá usar as Ferramentas de Desenvolvimento para ver o material localStorage.

— Ryan S
fonte

Obrigado por resposta @ Ryan S, mas localStorage está vazio eu defini-lo como estelocalStorage['xy'] = JSON.stringify(xy);

— Joe Doe

2

No console do cromo que você pode fazer localStorage.setItem('xy', JSON.stringify(xy))e que irá definir o item em localStorage

— Ryan S

2

do chrome: // chrome-urls / e, em seguida, armazenamento local

— khaled_webdev

2

Ou eu não entendo o que as pessoas aqui estão tentando fazer, e não é o que estou fazendo, e / ou as ferramentas de desenvolvedor do Chrome mudaram e estão quebradas a esse respeito.

O script de conteúdo da minha extensão armazena dados como este:

chrome.storage.local.set(packet);

Quando visualizo a guia Aplicativo da página de plano de fundo da extensão e expanda Armazenamento> Armazenamento local, vejo minha extensão listada, mas clicar nela não mostra dados.

A única solução que encontrei é executar isso no console da página em segundo plano:

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

É semelhante à maneira como a extensão a lê (exceto passar nulo para obter todas as chaves em vez de um nome de chave para obter exatamente o que eu quero) e funciona bem, é apenas estranho digitar todas as vezes. Também é estranho que existam todas essas respostas aqui que não funcionam para mim.

Estou usando o Chrome 73.0.3683.103 (Compilação Oficial) (64 bits) no Windows 10. A extensão ainda está descompactada, se for relevante, mas é o momento mais provável em que você deseja fazer isso, ou seja, em desenvolvimento.

— enigment
fonte