Panduan ini menunjukkan cara menggunakan Chrome DevTools untuk melihat dan mengubah data IndexedDB. Anda sudah familier dengan DevTools. Jika belum, lihat Memulai. Bagian ini juga mengasumsikan bahwa Anda sudah familier dengan IndexedDB. Jika tidak, lihat Menggunakan IndexedDB.
Melihat data IndexedDB
Klik tab Application untuk membuka panel Application. Luaskan menu IndexedDB untuk melihat database yang tersedia.
Gambar 1. Menu IndexedDB
- catatan - https://mdn.github.io mewakili database, dengan notes adalah nama database dan https://mdn.github.io adalah origin yang dapat mengakses database.
- notes adalah penyimpanan objek.
- title dan body adalah indeks.
Klik database untuk melihat asal dan nomor versinya.
Gambar 2. Database catatan
Klik penyimpanan objek untuk melihat key-value pairnya.
Gambar 3. Penyimpanan objek notes
- Total entri adalah jumlah total pasangan nilai kunci di penyimpanan objek.
- Nilai generator kunci adalah kunci berikutnya yang tersedia. Kolom ini hanya ditampilkan saat menggunakan generator kunci.
Klik sel di kolom Value untuk meluaskan nilai tersebut.
Gambar 4. Melihat nilai IndexedDB
Klik indeks, seperti title atau body pada Gambar 6 di bawah, untuk mengurutkan penyimpanan objek sesuai dengan nilai indeks tersebut.
Gambar 5. Penyimpanan objek yang diurutkan menurut abjad sesuai dengan kunci title-nya
Memuat ulang data IndexedDB
Nilai IndexedDB di panel Application tidak diperbarui secara real-time. Klik Refresh saat melihat penyimpanan objek untuk memperbarui datanya, atau lihat database dan klik Refresh database untuk memuat ulang semua data.
Gambar 6. Melihat database
Edit data IndexedDB
Kunci dan nilai IndexedDB tidak dapat diedit dari panel Application. Namun, karena DevTools memiliki akses ke konteks halaman, Anda dapat menjalankan kode JavaScript di dalam DevTools yang mengedit data IndexedDB.
Mengedit data IndexedDB dengan Cuplikan
Snippets adalah cara untuk menyimpan dan menjalankan blok kode JavaScript di dalam DevTools. Saat Anda menjalankan Cuplikan, hasilnya akan dicatat ke dalam log ke Konsol. Anda dapat menggunakan Cuplikan untuk menjalankan kode JavaScript yang mengedit database IndexedDB.
Gambar 7. Menggunakan Cuplikan untuk berinteraksi dengan IndexedDB
Hapus data IndexedDB
Hapus pasangan nilai kunci IndexedDB
- Lihat penyimpanan objek IndexedDB.
Klik pasangan nilai kunci yang ingin dihapus. DevTools menyorot warna biru untuk menunjukkan bahwa sudah dipilih.
Gambar 8. Memilih pasangan nilai kunci untuk menghapusnya
Tekan tombol Delete atau klik Delete Selected .
Gambar 9. Tampilan penyimpanan objek setelah key-value pair dihapus
Menghapus semua key-value pair di penyimpanan objek
Lihat penyimpanan objek IndexedDB.
Gambar 10. Menampilkan penyimpanan objek
Klik Clear object store .
Menghapus database IndexedDB
- Lihat database IndexedDB yang ingin Anda hapus.
Klik Delete database.
Gambar 11. Tombol Delete database
Hapus semua penyimpanan IndexedDB
- Buka panel Clear storage.
- Pastikan kotak centang IndexedDB diaktifkan.
Klik Hapus data situs.
Gambar 12. Panel Clear storage