Z tego przewodnika dowiesz się, jak wyświetlać i zmieniać dane IndexedDB za pomocą Narzędzi deweloperskich w Chrome. Zakładamy, że znacie Narzędzia deweloperskie. Jeśli nie, przeczytaj artykuł Pierwsze kroki. Zakładamy też, że znacie IndexedDB. Jeśli tak nie jest, zapoznaj się z artykułem Korzystanie z IndexedDB.
Wyświetlanie danych IndexedDB
Kliknij kartę Application (Aplikacja), aby otworzyć panel Application (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, w której notes to nazwa bazy danych, a https://mdn.github.io to źródło, które ma do niej dostęp.
- Notatki to magazyn obiektów.
- Parametry title i body to indeksy.
Kliknij bazę danych, aby wyświetlić jej źródło i numer wersji.
Rysunek 2. Baza danych notes
Kliknij bazę obiektów, aby wyświetlić jej 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 wtedy, gdy korzystasz z generatorów kluczy.
Kliknij komórkę w kolumnie Wartość, aby ją rozwinąć.
Rysunek 4. Wyświetlanie wartości IndexedDB
Kliknij indeks, taki jak title lub body na Rys. 6 poniżej, aby posortować magazyn obiektów według wartości tego indeksu.
Rysunek 5. Magazyn obiektów posortowany alfabetycznie według klucza title
Odśwież dane IndexedDB
Wartości IndexedDB w panelu Aplikacja nie są aktualizowane w czasie rzeczywistym. Kliknij Odśwież podczas wyświetlania magazynu obiektów, aby odświeżyć jego dane, lub wyświetl bazę danych i kliknij Odśwież bazę danych, aby odświeżyć wszystkie dane.
Rysunek 6. Wyświetlanie bazy danych
Edytuj dane IndexedDB
Kluczy i wartości IndexedDB nie można edytować w panelu Aplikacja. Ponieważ Narzędzia deweloperskie mają dostęp do kontekstu strony, możesz jednak uruchomić w nich kod JavaScript, który edytuje dane IndexedDB.
Edytowanie danych IndexedDB za pomocą fragmentów
Fragmenty umożliwiają przechowywanie i uruchamianie bloków kodu JavaScript w Narzędziach deweloperskich. Gdy uruchomisz fragment kodu, wynik zostanie zarejestrowany w konsoli. Fragmentu możesz użyć do uruchomienia kodu JavaScript edytowującego bazę danych IndexedDB.
Rysunek 7. Korzystanie z fragmentu kodu do interakcji z bazą IndexedDB
Usuń dane IndexedDB
Usuwanie pary klucz-wartość IndexedDB
- Wyświetl magazyn obiektów IndexedDB.
Kliknij parę klucz-wartość, którą chcesz usunąć. Narzędzia deweloperskie podświetlają go na niebiesko, co wskazuje, że jest wybrana.
Rysunek 8. Wybór pary klucz-wartość w celu jej usunięcia
Naciśnij klawisz Delete lub kliknij Usuń zaznaczone .
Rysunek 9. Jak magazyn obiektów wygląda po usunięciu pary klucz-wartość
Usuń wszystkie pary klucz-wartość w magazynie obiektów
Wyświetl magazyn obiektów IndexedDB.
Rysunek 10. Wyświetlanie magazynu obiektów
Kliknij Wyczyść magazyn obiektów .
Usuwanie bazy danych IndexedDB
- Wyświetl bazę danych IndexedDB, którą chcesz usunąć.
Kliknij Usuń bazę danych.
Rysunek 11. Przycisk Usuń bazę danych
Usuń całą pamięć masową IndexedDB
- Otwórz panel Wyczyść pamięć wewnętrzną.
- Upewnij się, że pole wyboru IndexedDB jest zaznaczone.
Kliknij Wyczyść dane witryn.
Rysunek 12. Okienko Wyczyść miejsce na dane.