Ver e mudar dados do IndexedDB

Este guia mostra como usar o Chrome DevTools para visualizar e mudar os dados do IndexedDB. Ele pressupõe que você tenha familiaridade com o DevTools. Caso contrário, consulte Começar. Ele também pressupõe que você tenha familiaridade com o IndexedDB. Caso contrário, consulte Como usar o IndexedDB.

Ver dados de IndexedDB

1. Clique na guia Aplicativo para abrir o painel Aplicativo. Expanda o menu IndexedDB para ver quais bancos de dados estão disponíveis.

   

   Figura 1. O menu IndexedDB

   • notes - https://mdn.github.io (link em inglês) representa um banco de dados, em que notes é o nome dele e https://mdn.github.io é a origem que pode acessá-lo.
   • As notas são um armazenamento de objetos.
   • title e body são índices.

1. Clique em um banco de dados para ver a origem e o número da versão.

   

   Figura 2. O banco de dados notes

2. Clique em um armazenamento de objetos para ver seus pares de chave-valor.

   

   Figura 3. Armazenamento de objetos notes

   • O total de entradas é o número total de pares de chave-valor no armazenamento de objetos.
   • O valor do gerador de chaves é a próxima chave disponível. Esse campo só é mostrado ao usar geradores de chaves.

3. Clique em uma célula na coluna Valor para expandir esse valor.

   

   Figura 4. Como visualizar um valor de IndexedDB

4. Clique em um índice, como title ou body na Figura 6 abaixo, para classificar o armazenamento de objetos de acordo com os valores desse índice.

   

   Figura 5. Um repositório de objetos que é classificado em ordem alfabética de acordo com a chave de title.

Atualizar dados de IndexedDB

Os valores do IndexedDB no painel Application não são atualizados em tempo real. Clique em Refresh ao visualizar um repositório de objetos para atualizar os dados ou em um banco de dados e clique em Refresh database para atualizar todos os dados.

Figura 6. Como visualizar um banco de dados

Editar dados do IndexedDB

As chaves e os valores do IndexedDB não são editáveis no painel Application. No entanto, como o DevTools tem acesso ao contexto da página, é possível executar um código JavaScript nele que edite os dados do IndexedDB.

Editar dados do IndexedDB com snippets

Os snippets são uma maneira de armazenar e executar blocos de código JavaScript no DevTools. Quando você executa um snippet, o resultado é registrado no Console. Você pode usar um snippet para executar o código JavaScript que edita um banco de dados IndexedDB.

Figura 7. Como usar um snippet para interagir com o IndexedDB

Excluir dados do IndexedDB

Excluir um par de chave-valor do IndexedDB

1. Visualize um armazenamento de objetos IndexedDB.

2. Clique no par de chave-valor que você quer excluir. O DevTools destaca em azul para indicar que está selecionado.

   

   Figura 8. Selecionar um par de chave-valor para excluí-lo.

3. Pressione a tecla Delete ou clique em Excluir itens selecionados .

   

   Figura 9. Como o armazenamento de objetos fica após a exclusão do par de chave-valor

Excluir todos os pares de chave-valor em um armazenamento de objetos

1. Visualize um armazenamento de objetos IndexedDB.

   

   Figura 10. Como visualizar um armazenamento de objetos

2. Clique em Clear objeto store .

Excluir um banco de dados IndexedDB

1. Visualize o banco de dados IndexedDB que você quer excluir.

2. Clique em Excluir banco de dados.

   

   Figura 11. O botão Excluir banco de dados

Excluir todo o armazenamento do IndexedDB

1. Abra o painel Limpar armazenamento.
2. Verifique se a caixa de seleção IndexedDB está marcada.

3. Clique em Limpar dados do site.

   

   Figura 12. Painel Limpar armazenamento