Ver e mudar dados do IndexedDB

Kayce Basques

Neste guia, mostramos como usar o Chrome DevTools para visualizar e mudar dados do IndexedDB. Ele pressupõe que você já conhece o DevTools. Caso contrário, consulte Primeiras etapas. Também pressupõe que você esteja 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. 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 repositório 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 os pares de chave-valor dele.

   

   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.
   • 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 abrir esse valor.

   

   Figura 4. Como visualizar 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 em ordem alfabética de acordo com a chave 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 repositório de objetos para atualizar os dados dele ou acesse 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 podem ser editados no painel Aplicativo. No entanto, como o DevTools tem acesso ao contexto da página, é possível executar 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. Acessar um repositório de objetos do IndexedDB.

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

   

   Figura 8. Selecionar um par de chave-valor para excluir

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

   

   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. Acessar um repositório de objetos do IndexedDB.

   

   Figura 10. Como visualizar um repositório de objetos

2. Clique em Limpar repositório de objetos .

Excluir um banco de dados IndexedDB

1. Abra 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 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. O painel Limpar armazenamento