Questa guida mostra come utilizzare Chrome DevTools per visualizzare e modificare i dati IndexedDB. Si presuppone che tu abbia familiarità con DevTools. In caso contrario, consulta la sezione Come iniziare. Inoltre, presuppone che tu abbia familiarità con IndexedDB. In caso contrario, consulta la sezione Utilizzo di IndexedDB.
Visualizza dati IndexedDB
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, dove notes è il nome del database e https://mdn.github.io è l'origine che può accedere al database.
note è un archivio di oggetti.- title e body sono indici.
Fai clic su un database per visualizzarne l'origine e il numero di versione.
Figura 2. Il database notes
Fai clic su un archivio di oggetti per visualizzare le relative coppie chiave-valore.
Figura 3. Archiviazione di oggetti notes
- Voci totali indica il numero totale di coppie chiave-valore nell'archivio di oggetti.
- Valore del generatore di chiavi è la successiva chiave disponibile. Questo campo viene visualizzato solo quando si utilizzano i generatori di chiavi.
Fai clic su una cella nella colonna Valore per espandere il valore.
Figura 4. Visualizzazione di un valore IndexedDB
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
aggiornare 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, puoi eseguire il codice JavaScript all'interno di DevTools per modificare i dati IndexedDB.
Modifica 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 il 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
- Visualizza un archivio di oggetti IndexedDB.
Fai clic sulla coppia chiave-valore che vuoi eliminare. DevTools lo evidenzia in blu per indicare che è selezionato.
Figura 8. Selezionare una coppia chiave-valore per eliminarla
Premi il tasto Canc o fai clic su Elimina selezionati
.
Figura 9. Modalità di gestione dell'archivio di oggetti dopo l'eliminazione della coppia chiave-valore
Eliminazione di tutte le coppie chiave-valore in un archivio di oggetti
Visualizza un archivio di oggetti IndexedDB.
Figura 10. Visualizzazione di un archivio di oggetti
Fai clic su Cancella archivio oggetti
.
Elimina un database IndexedDB
- Visualizza il database IndexedDB che vuoi eliminare.
Fai clic su Elimina database.
Figura 11. Pulsante Elimina database
Elimina tutto lo spazio di archiviazione IndexedDB
- Apri il riquadro Cancella dati archiviati.
- Assicurati che la casella di controllo IndexedDB sia abilitata.
Fai clic su Cancella i dati dei siti.
Figura 12. Riquadro Cancella dati archiviati