Ver e mudar dados do IndexedDB

Kayce Basques

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

Ver dados do IndexedDB

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

   

   Figura 1. O menu do IndexedDB

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

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

   

   Figura 2. O banco de dados notes

2. Clique em um repositório de objetos para ver seus pares de chave-valor.

   

   Figura 3. Armazenamento de objetos notes

   • Total de entradas é o número total de pares de chave-valor no armazenamento de objetos.
   • 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 exibir um valor 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 armazenamento de objetos classificado em ordem alfabética de acordo com a chave de title

Atualizar dados do IndexedDB

Os valores do IndexedDB no painel Aplicativo não são atualizados em tempo real. Clique em Atualizar ao visualizar um armazenamento de objetos para atualizar os dados ou consulte um banco de dados e clique em Atualizar banco de dados 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 o código JavaScript no DevTools que edita os dados do IndexedDB.

Editar dados do IndexedDB com snippets

Os snippets são uma forma 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 um código JavaScript que edita um banco de dados do IndexedDB.

Figura 7. Como usar um snippet para interagir com IndexedDB

Excluir dados do IndexedDB

Excluir um par de chave-valor IndexedDB

1. Veja um armazenamento de objetos IndexedDB.

2. Clique no par de chave-valor que você quer excluir. O DevTools destaca-a em azul para indicar que ela foi selecionada.

   

   Figura 8. Seleção de um par de chave-valor para excluí-lo

3. Pressione a tecla Delete ou clique em Delete Selected .

   

   Figura 9. Como o armazenamento de objetos fica depois que o par de chave-valor é excluído

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

1. Veja um armazenamento de objetos IndexedDB.

   

   Figura 10. Como visualizar um armazenamento de objetos

2. Clique em Clear object store .

Excluir um banco de dados IndexedDB

1. Veja o banco de dados do 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 IndexedDB

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

3. Clique em Limpar dados do site.

   

   Figura 12. Painel Limpar armazenamento