Visualizzare e modificare i dati IndexedDB

Questa guida mostra come utilizzare Chrome DevTools per visualizzare e modificare i dati di IndexedDB. Presuppone che tu conosca DevTools. In caso contrario, consulta la sezione Inizia. Inoltre, presuppone che tu conosca indexedDB. In caso contrario, consulta la sezione Utilizzo di IndexedDB.

Visualizza dati IndexedDB

1. Fai clic sulla scheda Applicazione per aprire il riquadro Applicazione. Espandi il menu IndexedDB per vedere quali database sono disponibili.

   

   Figura 1. Il menu IndexedDB

   • notes - https://mdn.github.io rappresenta un database in cui notes è il nome del database e https://mdn.github.io è l'origine che può accedere al database.
   • notes è un archivio di oggetti.
   • title e body sono indici.

1. Fai clic su un database per visualizzarne l'origine e il numero di versione.

   

   Figura 2. Il database di notes

2. Fai clic su un archivio di oggetti per visualizzare le relative coppie chiave-valore.

   

   Figura 3. Archivio di oggetti notes

   • Voci totali indica il numero totale di coppie chiave-valore nell'archivio di oggetti.
   • Il valore del generatore di chiavi è la successiva chiave disponibile. Questo campo viene visualizzato solo quando si utilizzano generatori di chiavi.

3. Fai clic su una cella della colonna Valore per espandere il valore selezionato.

   

   Figura 4. Visualizzazione di un valore IndexedDB

4. Fai clic su un indice, ad esempio title o body nella Figura 6 di seguito, per ordinare l'archivio di oggetti in base ai valori dell'indice.

   

   Figura 5. Un archivio di oggetti in ordine alfabetico in base alla relativa chiave title.

Aggiorna dati IndexedDB

I valori IndexedDB nel riquadro Applicazione non vengono aggiornati in tempo reale. Fai clic su Aggiorna durante la visualizzazione di un archivio di oggetti per aggiornarne i dati oppure visualizza un database e fai clic su Aggiorna database per aggiornare tutti i dati.

Figura 6. Visualizzazione di un database

Modifica dati IndexedDB

Le chiavi e i valori IndexedDB non sono modificabili dal riquadro Applicazione. Poiché DevTools ha accesso al contesto della pagina, all'interno di DevTools puoi eseguire codice JavaScript che modifica i dati IndexedDB.

Modifica i dati IndexedDB con snippet

Gli snippet sono un modo per archiviare ed eseguire blocchi di codice JavaScript in DevTools. Quando esegui uno snippet, il risultato viene registrato nella console. Puoi utilizzare uno snippet per eseguire codice JavaScript che modifica un database IndexedDB.

Figura 7. Utilizzo di uno snippet per interagire con IndexedDB

Elimina dati IndexedDB

Elimina una coppia chiave-valore IndexedDB

1. Visualizza un archivio di oggetti IndexedDB.

2. Fai clic sulla coppia chiave-valore da eliminare. DevTools lo evidenzia in blu per indicare che è selezionato.

   

   Figura 8. Selezionare una coppia chiave-valore per eliminarla

3. Premi il tasto Canc o fai clic su Elimina selezionati .

   

   Figura 9. Come si presenta l'archivio di oggetti dopo l'eliminazione della coppia chiave-valore

Elimina tutte le coppie chiave-valore in un archivio di oggetti

1. Visualizza un archivio di oggetti IndexedDB.

   

   Figura 10. Visualizzazione di un archivio di oggetti

2. Fai clic su Cancella archivio oggetti .

Elimina un database IndexedDB

1. Visualizza il database IndexedDB che vuoi eliminare.

2. Fai clic su Elimina database.

   

   Figura 11. Il pulsante Elimina database

Elimina tutto l'archiviazione IndexedDB

1. Apri il riquadro Cancella dati archiviati.
2. Assicurati che la casella di controllo IndexedDB sia attivata.

3. Fai clic su Cancella dati dei siti.

   

   Figura 12. Il riquadro Cancella dati archiviati