Bekijk en wijzig IndexedDB-gegevens

Kayce Basques

Deze handleiding laat zien hoe u Chrome DevTools gebruikt om IndexedDB- gegevens te bekijken en te wijzigen. Er wordt van uitgegaan dat u bekend bent met DevTools. Als dit niet het geval is, raadpleegt u Aan de slag . Er wordt ook van uitgegaan dat u bekend bent met IndexedDB. Als dit niet het geval is, raadpleegt u IndexedDB gebruiken .

Bekijk IndexedDB-gegevens

1. Klik op het tabblad Applicatie om het paneel Applicatie te openen. Vouw het IndexedDB- menu uit om te zien welke databases beschikbaar zijn.

   

   Figuur 1 . Het IndexedDB -menu

   • notes - https://mdn.github.io vertegenwoordigt een database, waarbij notes de naam van de database is en https://mdn.github.io de oorsprong is die toegang heeft tot de database.
   • notes is een objectopslag.
   • titel en body zijn indexen .

Opmerking: bekende beperking Databases van derden zijn niet zichtbaar. Als u bijvoorbeeld een <iframe> gebruikt om een ​​advertentie op uw pagina in te sluiten en uw advertentienetwerk gebruikmaakt van IndexedDB, zijn de IndexedDB-gegevens van uw advertentienetwerk niet zichtbaar. Zie nummer 943770 .

1. Klik op een database om de oorsprong en het versienummer ervan te zien.

   

   Figuur 2 . De notitiedatabase

2. Klik op een objectarchief om de sleutel-waardeparen ervan te bekijken.

   Let op: IndexedDB-gegevens worden niet in realtime bijgewerkt. Zie IndexedDB-gegevens vernieuwen .

   

   Figuur 3 . De notitie -objectopslag

   • Het totale aantal vermeldingen is het totale aantal sleutel-waardeparen in het objectarchief.
   • De sleutelgeneratorwaarde is de volgende beschikbare sleutel. Dit veld wordt alleen weergegeven bij gebruik van sleutelgeneratoren .

3. Klik op een cel in de kolom Waarde om die waarde uit te vouwen.

   

   Figuur 4 . Een IndexedDB-waarde bekijken

4. Klik op een index, zoals titel of hoofdtekst in Afbeelding 6 hieronder, om de objectopslag te sorteren op basis van de waarden van die index.

   

   Figuur 5 . Een objectopslag die alfabetisch is gesorteerd op basis van de titelsleutel

Vernieuw IndexedDB-gegevens

IndexedDB-waarden in het toepassingspaneel worden niet in realtime bijgewerkt. Klik op Vernieuwen wanneer u een objectarchief bekijkt om de gegevens ervan te vernieuwen, of bekijk een database en klik op Database vernieuwen om alle gegevens te vernieuwen.

Figuur 6 . Een database bekijken

Bewerk geïndexeerdeDB-gegevens

IndexedDB-sleutels en -waarden kunnen niet worden bewerkt vanuit het toepassingspaneel . Omdat DevTools echter toegang heeft tot paginacontext, kunt u binnen DevTools JavaScript-code uitvoeren die IndexedDB-gegevens bewerkt.

Bewerk geïndexeerdeDB-gegevens met fragmenten

Fragmenten zijn een manier om blokken JavaScript-code op te slaan en uit te voeren binnen DevTools. Wanneer u een fragment uitvoert, wordt het resultaat vastgelegd in de console . U kunt een fragment gebruiken om JavaScript-code uit te voeren waarmee een IndexedDB-database wordt bewerkt.

Figuur 7 . Een fragment gebruiken voor interactie met IndexedDB

Verwijder IndexedDB-gegevens

Verwijder een IndexedDB-sleutelwaardepaar

1. Bekijk een IndexedDB-objectarchief .

2. Klik op het sleutel/waarde-paar dat u wilt verwijderen. DevTools markeert het blauw om aan te geven dat het is geselecteerd.

   

   Figuur 8 . Een sleutel-waardepaar selecteren om het te verwijderen

3. Druk op de Delete- toets of klik op Selectie verwijderen .

   

   Figuur 9 . Hoe de objectopslag eruitziet nadat het sleutel-waardepaar is verwijderd

Verwijder alle sleutel-waardeparen in een objectarchief

1. Bekijk een IndexedDB-objectarchief .

   

   Figuur 10 . Een objectarchief bekijken

2. Klik op Objectarchief wissen .

Verwijder een IndexedDB-database

1. Bekijk de IndexedDB-database die u wilt verwijderen.

2. Klik op Database verwijderen .

   

   Figuur 11 . De knop Database verwijderen

Verwijder alle IndexedDB-opslag

1. Open het deelvenster Opslag wissen .
2. Zorg ervoor dat het selectievakje IndexedDB is ingeschakeld.

3. Klik op Sitegegevens wissen .

   

   Figuur 12 . Het duidelijke opslagpaneel