Wyświetlanie i zmienianie danych IndexedDB

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.

    Menu IndexedDB

    Rysunek 1 Menu IndexedDB

    • Ikona bazy danych 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.
    • Ikona magazynu obiektów notes to magazyn obiektów.
    • titlebody to indeksy.
  1. Kliknij bazę danych, aby zobaczyć jej pochodzenie i numer wersji.

    Baza danych „notes”

    Rysunek 2. baza danych notes,

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

    Magazyn obiektów „notes”

    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ść.

    Wyświetlanie wartości IndexedDB

    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 Rysunku 6 poniżej.

    Sortowanie repozytorium obiektów według indeksu

    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ż Odśwież. Aby odświeżyć wszystkie dane, otwórz bazę danych i kliknij Odśwież bazę danych.

Wyświetlanie bazy 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.

Interakcje z IndexedDB za pomocą fragmentu kodu

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.

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

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

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

    Wygląd obiektu w magazynie po usunięciu pary klucz-wartość

    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

    Wyświetlanie magazynu obiektów

    Rysunek 10. Wyświetlanie magazynu obiektów

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

Usuwanie bazy danych IndexedDB

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

    Przycisk „Usuń bazę danych”

    Rysunek 11. przycisk Usuń bazę danych.

Usuń wszystkie dane z IndexedDB

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

    Panel „Wyczyść pamięć”

    Rysunek 12. Panel Wyczyść pamięć