Wyświetlanie i zmienianie danych IndexedDB

Kayce Basques

Twitter GitHub Usterka

Z tego przewodnika dowiesz się, jak za pomocą Narzędzi deweloperskich w Chrome wyświetlać i zmieniać dane IndexedDB. Zakładamy, że zna Pan/Pani Narzędzia deweloperskie. Jeśli nie, zobacz 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

   • uwagi – https://mdn.github.io reprezentuje bazę danych, gdzie notes to nazwa bazy danych, a https://mdn.github.io to źródło, z którego można uzyskać dostęp do bazy danych.
   • notes to magazyn obiektów.
   • Argumenty title i body to indeksy.

Uwaga: znane ograniczenie bazy danych innych firm nie są widoczne. Jeśli na przykład używasz elementu <iframe> do umieszczenia reklamy na stronie, a Twoja sieć reklamowa korzysta z IndexedDB, dane IndexedDB sieci reklamowej nie będą widoczne. Zobacz problem nr 943770.

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

   

   Rysunek 2. Baza danych notes

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

   Uwaga: dane IndexedDB nie są aktualizowane w czasie rzeczywistym. Zobacz Odświeżanie danych IndexedDB.

   

   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. Kliknij indeks, np. 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. Aby odświeżyć dane, kliknij Odśwież podczas wyświetlania magazynu obiektów, aby odświeżyć 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ż jednak narzędzia deweloperskie mają dostęp do kontekstu strony, możesz uruchomić w nich kod JavaScript, który edytuje dane IndexedDB.

Edytuj dane IndexedDB za pomocą fragmentów

Fragmenty to sposób na przechowywanie i uruchamianie bloków kodu JavaScript w Narzędziach deweloperskich. Gdy uruchomisz fragment kodu, wynik zostanie zarejestrowany w konsoli. Za pomocą fragmentu kodu możesz uruchomić kod JavaScript, który edytuje bazę danych IndexedDB.

Rysunek 7. Interakcja z IndexedDB za pomocą fragmentu kodu

Usuwanie danych IndexedDB

Usuń parę klucz-wartość IndexedDB

1. Wyświetl magazyn obiektów IndexedDB

2. Kliknij parę klucz-wartość, którą chcesz usunąć. DevTools podświetla na niebiesko, sygnalizując, że jest wybrana.

   

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

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

   

   Rysunek 9. Jak wygląda magazyn obiektów po usunięciu pary klucz-wartość

Usuń wszystkie pary klucz-wartość z magazynu 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ęć 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ść pamięć wewnętrzną.