Melihat dan mengubah data IndexedDB

Kayce Basques

Panduan ini menunjukkan cara menggunakan Chrome DevTools untuk melihat dan mengubah data IndexedDB. Alat ini mengasumsikan bahwa Anda sudah terbiasa menggunakan DevTools. Jika belum, lihat Memulai. Referensi ini juga mengasumsikan bahwa Anda sudah familier dengan IndexedDB. Jika tidak, lihat Menggunakan Mediation.

Lihat data IndexedDB

  1. Klik tab Application untuk membuka panel Application. Luaskan menu IndexedDB untuk melihat database mana yang tersedia.

    Menu IndexedDB

    Gambar 1. Menu IndexedDB

    • Ikon database catatan - https://mdn.github.io mewakili database, dengan catatan adalah nama database dan https://mdn.github.io adalah asal yang dapat mengakses database.
    • notes Ikon Object Store adalah penyimpanan objek.
    • title dan body adalah indeks.

  1. Klik database untuk melihat origin dan nomor versinya.

    Database 'catatan'

    Gambar 2. Database notes

  2. Klik penyimpanan objek untuk melihat pasangan nilai kuncinya.

    Penyimpanan objek 'notes'

    Gambar 3. Penyimpanan objek notes

    • Total entri adalah jumlah total key-value pair di penyimpanan objek.
    • Nilai generator kunci adalah kunci yang tersedia berikutnya. Kolom ini hanya ditampilkan saat menggunakan key generator.

  3. Klik sel di kolom Nilai untuk meluaskan nilai tersebut.

    Melihat nilai IndexedDB

    Gambar 4. Melihat nilai IndexedDB

  4. Klik indeks, seperti title atau body pada Gambar 6 di bawah, untuk mengurutkan penyimpanan objek sesuai dengan nilai indeks tersebut.

    Mengurutkan penyimpanan objek berdasarkan indeks

    Gambar 5. Penyimpanan objek yang diurutkan menurut abjad berdasarkan kunci title-nya

Muat ulang data IndexedDB

Nilai AlarmManager di panel Application tidak diperbarui secara real time. Klik Refresh Muat ulang saat melihat penyimpanan objek untuk memperbarui datanya, atau melihat database dan klik Refresh database untuk memuat ulang semua data.

Melihat database

Gambar 6. Melihat database

Edit data IndexedDB

Kunci dan nilai Responden tidak dapat diedit dari panel Application. Namun, karena DevTools memiliki akses ke konteks halaman, Anda dapat menjalankan kode JavaScript dalam DevTools yang mengedit data IndexedDB.

Mengedit data IndexedDB dengan Cuplikan

Cuplikan adalah cara untuk menyimpan dan menjalankan blok kode JavaScript dalam DevTools. Saat Anda menjalankan Cuplikan, hasilnya akan dicatat dalam log ke Konsol. Anda dapat menggunakan Cuplikan untuk menjalankan kode JavaScript yang mengedit database IndexedDB.

Menggunakan Cuplikan untuk berinteraksi dengan IndexedDB

Gambar 7. Menggunakan Cuplikan untuk berinteraksi dengan IndexedDB

Hapus data IndexedDB

Menghapus pasangan nilai kunci IndexedDB

  1. Melihat penyimpanan objek IndexedDB.

  2. Klik pasangan nilai kunci yang ingin Anda hapus. DevTools menyorotnya dengan warna biru untuk menunjukkan bahwa itu dipilih.

    Memilih pasangan nilai kunci untuk menghapusnya

    Gambar 8. Memilih pasangan nilai kunci untuk menghapusnya

  3. Tekan tombol Delete atau klik Delete Selected Hapus yang Dipilih.

    Cara penyimpanan objek terlihat setelah pasangan nilai kunci dihapus

    Gambar 9. Cara penyimpanan objek terlihat setelah pasangan nilai kunci dihapus

Menghapus semua key-value pair di penyimpanan objek

  1. Melihat penyimpanan objek IndexedDB.

    Melihat penyimpanan objek

    Gambar 10. Melihat penyimpanan objek

  2. Klik Hapus penyimpanan objek Hapus penyimpanan objek.

Menghapus database IndexedDB

  1. Lihat database tensorflow yang ingin Anda hapus.

  2. Klik Delete database.

    Tombol 'Delete database'

    Gambar 11. Tombol Delete database

Hapus semua penyimpanan IndexedDB

  1. Buka panel Clear storage.
  2. Pastikan kotak centang IndexedDB diaktifkan.

  3. Klik Hapus data situs.

    Panel 'Hapus penyimpanan'

    Gambar 12. Panel Clear storage