Wyświetlanie i zmienianie danych IndexedDB

Kayce Basques

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

1. 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.

1. Kliknij bazę danych, aby wyświetlić jej źródło i numer wersji.

   

   Rysunek 2. Baza danych notes

2. 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.

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

   

   Rysunek 4. Wyświetlanie wartości IndexedDB

4. 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

1. Wyświetl magazyn obiektów IndexedDB.

2. 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

3. 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

1. Wyświetl magazyn obiektów IndexedDB.

   

   Rysunek 10. Wyświetlanie magazynu obiektów

2. Kliknij Wyczyść magazyn obiektów .

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

Usuń całą pamięć masową IndexedDB

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

3. Kliknij Wyczyść dane witryn.

   

   Rysunek 12. Okienko Wyczyść miejsce na dane.