Visualizzare e modificare i dati IndexedDB

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

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

    Il menu IndexedDB

    Figura 1. Il menu IndexedDB

    • icona Database 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.
    • Icona dell'archivio oggetti notes è un object store.
    • title e body sono indici.
  1. Fai clic su un database per visualizzarne l'origine e il numero di versione.

    Il database "notes"

    Figura 2. Il database notes

  2. Fai clic su un object store per visualizzarne le coppie chiave-valore.

    L'archivio di oggetti "notes"

    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.
  3. Fai clic su una cella nella colonna Valore per espandere il valore.

    Visualizzazione di un valore IndexedDB

    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'object store in base ai valori dell'indice.

    Ordinamento di un object store in base a un 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 Aggiorna quando visualizzi un datastore per aggiornarne i dati oppure visualizza un database e fai clic su Aggiorna database per aggiornare tutti i dati.

Visualizzazione di un database

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.

Utilizzare uno snippet per interagire con IndexedDB

Figura 7. Utilizzare uno snippet per interagire con IndexedDB

Eliminare i dati di IndexedDB

Eliminare una coppia chiave-valore IndexedDB

  1. Visualizza un archivio di oggetti IndexedDB.
  2. Fai clic sulla coppia chiave-valore che vuoi eliminare. DevTools lo evidenzia in blu per indicare che è selezionato.

    Selezionare una coppia chiave-valore per eliminarla

    Figura 8. Selezionare una coppia chiave-valore per eliminarla

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

    Aspetto dell'object store dopo l'eliminazione della coppia chiave-valore

    Figura 9. Aspetto dell'object store dopo l'eliminazione della coppia chiave-valore

Eliminare tutte le coppie chiave-valore in un object store

  1. Visualizza un archivio di oggetti IndexedDB.

    Visualizzazione di un archivio di oggetti

    Figura 10. Visualizzazione di un archivio di oggetti

  2. Fai clic su Svuota archivio oggetti Svuotare l'archivio di oggetti.

Eliminare un database IndexedDB

  1. Visualizza il database IndexedDB che vuoi eliminare.
  2. Fai clic su Elimina database.

    Il pulsante "Elimina database"

    Figura 11. Il pulsante Elimina database

Eliminare tutto lo spazio di archiviazione IndexedDB

  1. Apri il riquadro Cancella spazio di archiviazione.
  2. Assicurati che la casella di controllo IndexedDB sia attivata.
  3. Fai clic su Cancella dati dei siti.

    Riquadro "Cancella dati archiviati"

    Figura 12. Riquadro Cancella dati archiviati