Melihat dan mengubah data IndexedDB

Kayce Basques

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

Melihat data IndexedDB

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

    Menu IndexedDB

    Gambar 1. Menu IndexedDB

    • Ikon database notes - https://mdn.github.io mewakili database, dengan notes adalah nama database dan https://mdn.github.io adalah origin yang dapat mengakses database.
    • Ikon Object Store notes adalah object store.
    • title dan body adalah indeks.

  1. Klik database untuk melihat asal dan nomor versinya.

    Database 'notes'

    Gambar 2. Database notes

  2. Klik object store untuk melihat pasangan nilai kuncinya.

    Penyimpanan objek 'catatan'

    Gambar 3. Penyimpanan objek notes

    • Total entri adalah jumlah total pasangan nilai kunci di object store.
    • Nilai pembuat kunci adalah kunci berikutnya yang tersedia. Kolom ini hanya ditampilkan saat menggunakan generator kunci.

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

    Melihat nilai IndexedDB

    Gambar 4. Melihat nilai IndexedDB

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

    Mengurutkan penyimpanan objek menurut indeks

    Gambar 5. Object store yang diurutkan menurut abjad sesuai dengan kunci title-nya

Memuat ulang data IndexedDB

Nilai IndexedDB di panel Aplikasi tidak diperbarui secara real-time. Klik Refresh Muat ulang saat melihat object store untuk memuat ulang datanya, atau lihat database dan klik Refresh database untuk memuat ulang semua data.

Melihat database

Gambar 6. Melihat database

Mengedit data IndexedDB

Kunci dan nilai IndexedDB tidak dapat diedit dari panel Aplikasi. 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 Snippet, hasilnya akan dicatat 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

Menghapus data IndexedDB

Menghapus pasangan nilai kunci IndexedDB

  1. Melihat penyimpanan objek IndexedDB.

  2. Klik pasangan nilai kunci yang ingin dihapus. DevTools menandainya dengan warna biru untuk menunjukkan bahwa elemen tersebut 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.

    Tampilan object store setelah pasangan nilai kunci dihapus

    Gambar 9. Tampilan object store setelah pasangan nilai kunci dihapus

Menghapus semua pasangan nilai kunci di object store

  1. Melihat penyimpanan objek IndexedDB.

    Melihat penyimpanan objek

    Gambar 10. Melihat penyimpanan objek

  2. Klik Hapus penyimpanan objek Menghapus penyimpanan objek.

Menghapus database IndexedDB

  1. Lihat database IndexedDB yang ingin Anda hapus.

  2. Klik Hapus database.

    Tombol 'Delete database'

    Gambar 11. Tombol Hapus database

Menghapus semua penyimpanan IndexedDB

  1. Buka panel Hapus penyimpanan.
  2. Pastikan kotak centang IndexedDB diaktifkan.

  3. Klik Hapus data situs.

    Panel 'Hapus penyimpanan'

    Gambar 12. Panel Hapus penyimpanan