Questa guida mostra come utilizzare Chrome DevTools per visualizzare e modificare i dati di IndexedDB. È stato assunto che tu abbia familiarità con DevTools. In caso contrario, consulta la Guida introduttiva. Si presume inoltre che tu abbia familiarità con IndexedDB. In caso contrario, consulta la sezione Utilizzare IndexedDB.
Visualizzare i dati di IndexedDB
Fai clic sulla scheda Richiesta per aprire il riquadro Richiesta. 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.
notes è un
object store.- 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 object store per visualizzarne le coppie chiave-valore.
Figura 3. L'archivio di oggetti notes
- Voci totali indica il numero totale di coppie chiave-valore nell'object store.
- Valore del generatore della chiave è la chiave successiva disponibile. Questo campo viene visualizzato solo quando utilizzi 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'object store in base ai valori dell'indice.
Figura 5. Un archivio di oggetti ordinato in ordine alfabetico in base alla chiave title
Aggiornare i dati di IndexedDB
I valori IndexedDB nel riquadro Applicazione non vengono aggiornati in tempo reale. Fai clic su Aggiorna
quando visualizzi un datastore 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
Modificare i dati di IndexedDB
Le chiavi e i valori IndexedDB non sono modificabili dal riquadro Applicazione. Tuttavia, poiché DevTools ha accesso al contesto della pagina, puoi eseguire in DevTools codice JavaScript che modifica i dati di IndexedDB.
Modificare i dati di IndexedDB con gli snippet
Gli snippet sono un modo per memorizzare ed eseguire blocchi di codice JavaScript in DevTools. Quando esegui un frammento, il risultato viene registrato nella console. Puoi utilizzare uno snippet per eseguire codice JavaScript che modifica un database IndexedDB.
Figura 7. Utilizzare uno snippet per interagire con IndexedDB
Eliminare i dati di IndexedDB
Eliminare 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 elementi selezionati
.
Figura 9. Aspetto dell'object store dopo l'eliminazione della coppia chiave-valore
Eliminare tutte le coppie chiave-valore in un object store
Visualizza un archivio di oggetti IndexedDB.
Figura 10. Visualizzazione di un archivio di oggetti
Fai clic su Svuota archivio oggetti
.
Eliminare un database IndexedDB
- Visualizza il database IndexedDB che vuoi eliminare.
Fai clic su Elimina database.
Figura 11. Il pulsante Elimina database
Eliminare tutto lo spazio di archiviazione IndexedDB
- Apri il riquadro Cancella spazio di archiviazione.
- Assicurati che la casella di controllo IndexedDB sia attivata.
Fai clic su Cancella dati dei siti.
Figura 12. Riquadro Cancella dati archiviati