Melihat dan mengubah data IndexedDB

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

1. 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.

1. Klik database untuk melihat asal dan nomor versinya.

   

   Gambar 2. Database catatan

2. 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.

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

   

   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.

   

   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

1. Lihat penyimpanan objek IndexedDB.

2. Klik pasangan nilai kunci yang ingin dihapus. DevTools menyorot warna biru untuk menunjukkan bahwa sudah dipilih.

   

   Gambar 8. Memilih pasangan nilai kunci untuk menghapusnya

3. 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

1. Lihat penyimpanan objek IndexedDB.

   

   Gambar 10. Menampilkan penyimpanan objek

2. Klik Clear object store .

Menghapus database IndexedDB

1. Lihat database IndexedDB yang ingin Anda hapus.

2. Klik 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.

   

   Gambar 12. Panel Clear storage