Exibir e alterar dados IndexedDB

Para exibir e alterar dados IndexedDB , use a ferramenta Aplicativo .

Exibir dados IndexedDB

1. Abra uma página da Web que usa IndexedDB em uma nova janela ou guia. Você pode usar o aplicativo de demonstração PWAmp.

2. Para abrir o DevTools, clique com o botão direito do mouse na página da Web e selecione Inspecionar. Ou pressione Ctrl+Shift+I (Windows, Linux) ou Command+Option+I (macOS). O DevTools é aberto.

3. No DevTools, na Barra de Atividades, selecione a guia Aplicativo . Se essa guia não estiver visível, clique no botão Mais ferramentas ().

   O painel Manifesto geralmente é aberto por padrão:

   

4. Na barra lateral, em Armazenamento, expanda o menu IndexedDB para ver quais bancos de dados estão disponíveis:

   

   • () keyval-store representa um banco de dados.

   • () keyval é um repositório de objetos no banco de dados.

5. Selecione o keyval-store banco de dados para ver sua origem, número de versão e outras informações sobre o banco de dados:

   

6. Clique no keyval armazenamento de objetos para ver os pares de chave-valor:

   

   Observação: Os dados do IndexedDB não são atualizados em tempo real. Se você vir dados desatualizados exibidos em um repositório de objetos, atualize a visualização do repositório de objetos. Consulte Atualizar dados IndexedDB.

7. Clique em uma célula na coluna Valor para expandir o valor:

   

Atualizar dados IndexedDB

Os valores IndexedDB na ferramenta Aplicativo não são atualizados em tempo real.

• Para atualizar os dados, exiba uma loja de objetos e clique no botão Atualizar ().

• Para atualizar todos os dados em um banco de dados IndexedDB, exiba um banco de dados e clique em Atualizar banco de dados:

  

Editar dados IndexedDB

As chaves e os valores IndexedDB não são editáveis na ferramenta Aplicativo . No entanto, como o DevTools tem acesso ao contexto da página, você pode executar o código JavaScript no DevTools para editar os dados armazenados em um banco de dados IndexedDB.

Editar dados IndexedDB usando a ferramenta Console

1. No DevTools, na Barra de Atividades, selecione a guia Console .

2. Na ferramenta Console , execute o código JavaScript para editar os dados IndexedDB. Por exemplo, para adicionar um novo valor ao keyval repositório de objetos, execute o seguinte código:

   let connection = indexedDB.open("keyval-store", 1);
   
   connection.onsuccess = e => {
     const database = e.target.result;
     const transaction = database.transaction("keyval", "readwrite");
     const objectStore = transaction.objectStore("keyval");
     const request = objectStore.add({foo: "bar"}, "new-key");
     request.onsuccess = e => {
       console.log(e.target.result);
     }
   }
   

Editar dados IndexedDB usando snippets

Os snippets são uma maneira de armazenar e executar o código JavaScript repetidamente no DevTools. Se você precisar editar dados do IndexedDB com frequência, armazene-os em um novo trecho e execute-o. Para saber mais, consulte Executar trechos de JavaScript em qualquer página da Web.

Excluir dados IndexedDB

Você pode excluir qualquer um dos seguintes:

• Um par chave-valor IndexedDB.
• Todos os pares de chave-valor em um repositório de objetos.
• Um banco de dados IndexedDB.
• Todo o armazenamento IndexedDB.

Essas opções são descritas abaixo.

Excluir um par de chave-valor IndexedDB

1. Exiba um repositório de objetos IndexedDB.

2. Clique no par chave-valor que você deseja excluir. O DevTools realça o par chave-valor para indicar que ele está selecionado:

   

3. Pressione Deleteou clique no botão Excluir selecionados ():

   

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

1. Exiba um repositório de objetos IndexedDB.

2. Clique no botão Limpar armazenamento de objetos ().

   

Excluir um banco de dados IndexedDB

1. Exiba o banco de dados IndexedDB que você deseja excluir.

2. Clique em Excluir banco de dados.

   

Excluir todo o armazenamento IndexedDB

1. Na barra lateral da ferramenta Aplicativo , clique em Armazenamento.

2. Role para baixo até as caixas de seleção Armazenamento e verifique se a caixa de seleção IndexedDB está marcada.

3. Clique no botão Limpar dados do site .

   

Confira também

• IndexedDB: demonstração getAllRecords()

Este trabalho está licenciado sob uma Licença Creative Commons Atribuição 4.0 Internacional.