Bekijk en wijzig IndexedDB-gegevens

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.

    Het IndexedDB-menu

    Figuur 1 . Het IndexedDB -menu

    • Databasepictogram 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.
    • Pictogram Objectwinkel notes is een objectopslag.
    • titel en body zijn indexen .
  1. Klik op een database om de oorsprong en het versienummer ervan te zien.

    De 'notities'-database

    Figuur 2 . De notitiedatabase

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

    De objectopslag 'notities'

    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.

    Een IndexedDB-waarde bekijken

    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.

    Een objectarchief sorteren op een 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 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.

Een database bekijken

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.

Een fragment gebruiken voor interactie met IndexedDB

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.

    Een sleutel-waardepaar selecteren om het te verwijderen

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

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

    Hoe de objectopslag eruitziet nadat het sleutel-waardepaar is verwijderd

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

Verwijder alle sleutel-waardeparen in een objectarchief

  1. Bekijk een IndexedDB-objectarchief .

    Een objectarchief bekijken

    Figuur 10 . Een objectarchief bekijken

  2. Klik op Objectarchief wissen Duidelijke objectopslag .

Verwijder een IndexedDB-database

  1. Bekijk de IndexedDB-database die u wilt verwijderen.
  2. Klik op Database verwijderen .

    De knop '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 .

    Het venster 'Opslag wissen'

    Figuur 12 . Het duidelijke opslagpaneel