Ver e mudar dados do IndexedDB

Kayce Basques

Este guia mostra como usar o Chrome DevTools para conferir e mudar dados do IndexedDB. Ele pressupõe que você esteja familiarizado com o DevTools. Caso contrário, consulte Primeiros passos. Também pressupomos que você tenha familiaridade com o IndexedDB. Caso contrário, consulte Como usar o IndexedDB.

Conferir dados da IndexedDB

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

   

   Figura 1. Menu IndexedDB

   • notes: https://mdn.github.io representa um banco de dados, em que notes é o nome do banco de dados e https://mdn.github.io é a origem que pode acessar o banco de dados.
   • notes é um armazenamento de objetos.
   • title e body são índices.

Observação: limitação conhecida os bancos de dados de terceiros não são visíveis. Por exemplo, se você usar um <iframe> para incorporar um anúncio na sua página e a rede de publicidade usar o IndexedDB, os dados IndexedDB da rede de publicidade não vão ficar visíveis. Consulte o problema 943770.

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 objeto para conferir os pares de chave-valor.

   Atenção: os dados do IndexedDB não são atualizados em tempo real. Consulte Atualizar dados do IndexedDB.

   

   Figura 3. O repositório de objetos notes

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

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

   

   Figura 4. Como conferir um valor do IndexedDB

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

   

   Figura 5. Um repositório de objetos classificado alfabeticamente de acordo com a chave title

Atualizar dados do IndexedDB

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

Figura 6. Como consultar um banco de dados

Editar dados do IndexedDB

As chaves e os valores do IndexedDB não podem ser editados no painel Application. No entanto, como o DevTools tem acesso ao contexto da página, é possível executar um código JavaScript no DevTools que edita 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 um 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. Conferir uma loja de objetos IndexedDB.

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

   

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

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

   

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

Excluir todos os pares de chave-valor em um repositório de objetos

1. Conferir uma loja de objetos IndexedDB.

   

   Figura 10. Como visualizar um repositório de objetos

2. Clique em Limpar armazenamento de objetos .

Excluir um banco de dados IndexedDB

1. Acesse 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á ativada.

3. Clique em Limpar dados do site.

   

   Figura 12. Painel Limpar armazenamento