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
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.
Kliknij bazę danych, aby zobaczyć jej pochodzenie i numer wersji.
Rysunek 2. baza danych notes,
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.
Kliknij komórkę w kolumnie Wartość, aby rozwinąć tę wartość.
Rysunek 4 Wyświetlanie wartości IndexedDB
Aby posortować magazyn obiektów według wartości tego indeksu, kliknij indeks, np. title lub body na Rysunku 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
- Wyświetlanie magazynu obiektów IndexedDB
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
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
Wyświetlanie magazynu obiektów IndexedDB
Rysunek 10. Wyświetlanie magazynu obiektów
Kliknij Wyczyść pamięć obiektową
.
Usuwanie bazy danych IndexedDB
- Wyświetl bazę danych IndexedDB, którą chcesz usunąć.
Kliknij Usuń bazę danych.
Rysunek 11. przycisk Usuń bazę danych.
Usuń wszystkie dane z IndexedDB
- Otwórz panel Wyczyść pamięć.
- Upewnij się, że pole wyboru IndexedDB jest zaznaczone.
Kliknij Wyczyść dane witryn.
Rysunek 12. Panel Wyczyść pamięć