Ver e editar o armazenamento local

Kayce Basques
Kayce Basques
Sofia Emelianova
Sofia Emelianova

Neste guia, mostramos como usar o Chrome DevTools para ver, editar e excluir pares de chave-valor de localStorage. O armazenamento local salva dados em várias sessões do navegador.

Ver chaves e valores de localStorage

  1. Abra o DevTools no site que você quer inspecionar.

  2. Acesse Aplicativo > Armazenamento e abra Armazenamento local. Clique em um domínio para ver os pares de chave-valor dele.

    Os pares de chave-valor de youtube.com.

  3. Para visualizar o valor abaixo da tabela, selecione um par.

    Visualização do valor da chave selecionada.

Para atualizar manualmente os pares de chave-valor, clique em Atualizar. Atualizar na barra de ações na parte de cima.

Filtrar pares de chave-valor

Para encontrar rapidamente um par de chave-valor, digite na caixa de filtro na parte de cima uma string que a chave ou o valor contenha.

Filtrar pares de chave-valor que não contêm a string "has".

Criar um novo par de chave-valor localStorage

  1. Confira os pares de chave-valor localStorage do domínio. Por exemplo, nesta página de demonstração.
  2. Clique duas vezes na parte vazia da tabela. O DevTools cria uma nova linha e foca o cursor na coluna Chave.
  3. Insira um novo par de chave-valor.

Editar chaves ou valores de localStorage

  1. Confira os pares de chave-valor localStorage de um domínio. Por exemplo, nesta página de demonstração.
  2. Clique duas vezes em uma célula na coluna Chave ou Valor para editar essa chave ou valor.
  3. Atualize a página para aplicar.

Excluir localStorage par de chave-valor

  1. Confira os pares de chave-valor localStorage de um domínio. Por exemplo, nesta página de demonstração.
  2. Clique em um par de chave-valor para selecioná-lo.
  3. Clique em Excluir. Excluir na barra de ações na parte de cima para remover o par selecionado. Excluir o par de chave-valor selecionado.
  4. Se preferir, clique em Limpar tudo. Limpar tudo para remover todos os pares.

Interagir com o localStorage no console

Como é possível executar JavaScript no Console e como o Console tem acesso aos contextos de JavaScript da página, é possível interagir com localStorage no Console.

  1. No DevTools, abra o Console.
  2. Se você quiser acessar os pares de chave-valor localStorage de um domínio diferente da página em que está, selecione o contexto JavaScript necessário no menu suspenso de contexto na barra de ações na parte de cima.
  3. Execute as expressões localStorage no Console, da mesma forma que faria no JavaScript.

Como interagir com o `localStorage` no Console