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.

   

   Gambar 1. Menu IndexedDB

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

Catatan: Batasan Umum Database pihak ketiga tidak terlihat. Misalnya, jika Anda menggunakan <iframe> untuk menyematkan iklan di halaman, dan jaringan iklan Anda menggunakan IndexedDB, data IndexedDB jaringan iklan Anda tidak akan terlihat. Lihat masalah #943770.

1. Klik database untuk melihat origin dan nomor versinya.

   

   Gambar 2. Database notes

2. Klik penyimpanan objek untuk melihat pasangan nilai kuncinya.

   Perhatian: Data IndexedDB tidak diperbarui secara real time. Lihat Memperbarui data BYOD.

   

   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.

   

   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 berdasarkan kunci title-nya

Muat ulang data IndexedDB

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

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.

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.

   

   Gambar 8. Memilih pasangan nilai kunci untuk menghapusnya

3. Tekan tombol Delete atau klik Delete Selected .

   

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

Menghapus semua key-value pair di penyimpanan objek

1. Melihat penyimpanan objek IndexedDB.

   

   Gambar 10. Melihat penyimpanan objek

2. Klik Hapus penyimpanan objek .

Menghapus database IndexedDB

1. Lihat database tensorflow 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