Ver e alterar os dados do IndexedDB

Para ver e alterar os dados do IndexedDB , utilize a ferramenta Aplicação .

Ver dados do IndexedDB

1. Abra uma página Web que utilize IndexedDB numa nova janela ou separador. Pode utilizar a aplicação de demonstração PWAmp.

2. Para abrir o DevTools, clique com o botão direito do rato na página Web e, em seguida, selecione Inspecionar. Em alternativa, prima Ctrl+Shift+I (Windows, Linux) ou Comando+Opção+I (macOS). O DevTools é aberto.

3. Em DevTools, na Barra de Atividade, selecione o separador Aplicação . Se esse separador não estiver visível, clique no botão Mais ferramentas ().

   Normalmente , o painel Manifesto é aberto por predefinição:

   

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

   

   • () keyval-store representa uma base de dados.

   • () keyval é um arquivo de objetos na base de dados.

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

   

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

   

   Nota: Os dados do IndexedDB não são atualizados em tempo real. Se vir dados desatualizados apresentados num arquivo de objetos, atualize a vista de arquivo de objetos. Veja Atualizar dados do IndexedDB.

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

   

Atualizar dados do IndexedDB

Os valores de IndexedDB na ferramenta Aplicação não são atualizados em tempo real.

• Para atualizar os dados, veja um arquivo de objetos e, em seguida, clique no botão Atualizar ().

• Para atualizar todos os dados numa base de dados IndexedDB, veja uma base de dados e, em seguida, clique em Atualizar base de dados:

  

Editar dados do IndexedDB

As chaves e os valores de IndexedDB não são editáveis a partir da ferramenta Aplicação . No entanto, uma vez que o DevTools tem acesso ao contexto da página, pode executar código JavaScript em DevTools para editar os dados armazenados numa base de dados IndexedDB.

Editar dados do IndexedDB com a ferramenta Consola

1. Em DevTools, na Barra de Atividade, selecione o separador Consola .

2. Na ferramenta Consola , execute o código JavaScript para editar os dados do IndexedDB. Por exemplo, para adicionar um novo valor ao keyval arquivo 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 do IndexedDB com fragmentos

Os fragmentos são uma forma de armazenar e executar código JavaScript repetidamente, em DevTools. Se precisar de editar dados do IndexedDB com frequência, armazene-os num novo fragmento e, em seguida, execute o fragmento. Para saber mais, veja Executar fragmentos de JavaScript em qualquer página Web.

Eliminar dados do IndexedDB

Pode eliminar qualquer uma das seguintes opções:

• Um par chave-valor IndexedDB.
• Todos os pares chave-valor num arquivo de objetos.
• Uma base de dados IndexedDB.
• Todo o armazenamento IndexedDB.

Estas opções estão descritas abaixo.

Eliminar um par chave-valor de IndexedDB

1. Ver um arquivo de objetos da IndexedDB.

2. Clique no par chave-valor que pretende eliminar. DevTools realça o par chave-valor para indicar que está selecionado:

   

3. Prima Deleteou clique no botão Eliminar selecionado ():

   

Eliminar todos os pares chave-valor num arquivo de objetos

1. Ver um arquivo de objetos da IndexedDB.

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

   

Eliminar uma base de dados IndexedDB

1. Veja a base de dados IndexedDB que pretende eliminar.

2. Clique em Eliminar base de dados.

   

Eliminar todo o armazenamento do IndexedDB

1. Na barra lateral da ferramenta Aplicação , clique em Armazenamento.

2. Desloque-se para baixo até às caixas de verificação Armazenamento e certifique-se de que a caixa de verificação IndexedDB está selecionada.

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

   

Observação

Partes desta página são modificações baseadas no trabalho criado e partilhado pela Google e utilizado de acordo com os termos descritos na Licença Internacional Creative Commons Attribution 4.0. A página original é encontrada aqui e é da autoria de Kayce Bascos.

Este trabalho é licenciado ao abrigo de uma Licença Internacional creative Commons Attribution 4.0.