Wyświetlanie i zmienianie danych IndexedDB

Kayce Basques

Ten przewodnik pokazuje, jak za pomocą Narzędzi deweloperskich w Chrome wyświetlać i zmieniać dane IndexedDB. Zakładamy, że znasz Narzędzia deweloperskie. Jeśli nie, zapoznaj się z artykułem Pierwsze kroki. Zakładamy też, że znasz IndexedDB. Jeśli tak nie jest, zapoznaj się z artykułem Korzystanie z IndexedDB.

Wyświetlanie danych IndexedDB

1. Kliknij kartę Aplikacja, aby otworzyć panel Aplikacja. Rozwiń menu IndexedDB, aby zobaczyć, które bazy danych są dostępne.

   

   Rysunek 1. Menu IndexedDB

   • notes - https://mdn.github.io to baza danych, gdzie notes to nazwa bazy danych, a https://mdn.github.io to źródło, które ma dostęp do bazy danych.
   • notes to magazyn obiektów.
   • title i body to indeksy.

1. Kliknij bazę danych, aby zobaczyć jej pochodzenie i numer wersji.

   

   Rysunek 2. Baza danych notes

2. Kliknij magazyn obiektów, aby wyświetlić jego pary klucz-wartość.

   

   Rysunek 3. Magazyn obiektów notes

   • Łączna liczba wpisów to łączna liczba par klucz-wartość w magazynie obiektów.
   • Wartość generatora kluczy to następny dostępny klucz. To pole jest widoczne tylko podczas korzystania z generatorów kluczy.

3. Kliknij komórkę w kolumnie Wartość, aby rozwinąć tę wartość.

   

   Rysunek 4. Wyświetlanie wartości IndexedDB

4. Aby posortować magazyn obiektów według wartości tego indeksu, kliknij indeks, np. title lub body na rys. 6 poniżej.

   

   Rysunek 5. magazyn obiektów posortowany alfabetycznie według klucza title;

Odświeżanie danych IndexedDB

Wartości IndexedDB w panelu Aplikacja nie są aktualizowane w czasie rzeczywistym. Aby odświeżyć dane w magazynie obiektów, kliknij Odśwież . Aby odświeżyć wszystkie dane, otwórz bazę danych i kliknij Odśwież bazę danych.

Rysunek 6. Wyświetlanie bazy danych

Edytowanie danych IndexedDB

Kluczy i wartości IndexedDB nie można edytować w panelu Aplikacja. Narzędzia deweloperskie mają jednak dostęp do kontekstu strony, więc możesz w nich uruchamiać kod JavaScript, który modyfikuje dane IndexedDB.

Edytowanie danych IndexedDB za pomocą fragmentów

Fragmenty kodu to sposób przechowywania i uruchamiania bloków kodu JavaScript w Narzędziach deweloperskich. Gdy uruchomisz fragment kodu, wynik zostanie zapisany w Konsoli. Za pomocą fragmentu kodu możesz uruchomić kod JavaScriptu, który edytuje bazę danych IndexedDB.

Rysunek 7. Interakcje z IndexedDB za pomocą fragmentu kodu

Usuwanie danych IndexedDB

Usuwanie pary klucz-wartość z IndexedDB

1. Wyświetlanie magazynu obiektów IndexedDB

2. Kliknij parę klucz-wartość, którą chcesz usunąć. DevTools wyróżnia go na niebiesko, aby wskazać, że jest wybrany.

   

   Rysunek 8. Wybieranie pary klucz-wartość w celu jej usunięcia

3. Naciśnij klawisz Delete lub kliknij Usuń zaznaczone .

   

   Rysunek 9. Wygląd obiektu po usunięciu pary klucz-wartość

Usuwanie wszystkich par klucz-wartość w magazynie obiektów

1. Wyświetlanie magazynu obiektów IndexedDB

   

   Rysunek 10. Wyświetlanie magazynu obiektów

2. Kliknij Wyczyść pamięć obiektową .

Usuwanie bazy danych IndexedDB

1. Wyświetl bazę danych IndexedDB, którą chcesz usunąć.

2. Kliknij Usuń bazę danych.

   

   Rysunek 11. Przycisk Usuń bazę danych

Usuwanie wszystkich danych z IndexedDB

1. Otwórz panel Wyczyść pamięć.
2. Upewnij się, że pole wyboru IndexedDB jest zaznaczone.

3. Kliknij Wyczyść dane witryn.

   

   Rysunek 12. Panel Wyczyść pamięć