IndexedDB verilerini görüntüleme ve değiştirme

Bu kılavuzda, IndexedDB verilerini görüntülemek ve değiştirmek için Chrome Geliştirici Araçları'nın nasıl kullanılacağı gösterilmektedir. Geliştirici Araçları'na aşina olduğunuz varsayılır. Değilse Başlayın başlıklı makaleyi inceleyin. Ayrıca IndexedDB hakkında bilgi sahibi olduğunuz varsayılır. Aksi takdirde IndexedDB'yi kullanma bölümüne bakın.

IndexedDB verilerini göster

  1. Application (Uygulama) panelini açmak için Application (Uygulama) sekmesini tıklayın. Hangi veritabanlarının kullanılabilir olduğunu görmek için IndexedDB menüsünü genişletin.

    IndexedDB menüsü

    Şekil 1. IndexedDB menüsü

    • Veritabanı simgesi notes - https://mdn.github.io, bir veritabanını temsil eder. Burada notes, veritabanının adıdır ve https://mdn.github.io, veritabanına erişebilen kaynaktır.
    • Nesne Deposu simgesi notları bir nesne deposudur.
    • title ve body dizinlerdir.
  1. Kaynak ve sürüm numarasını görmek için bir veritabanını tıklayın.

    "Notlar" veritabanı

    2. Şekil. notes veritabanı

  2. Anahtar/değer çiftlerini görmek için bir nesne deposunu tıklayın.

    "Notlar" nesne deposu

    3. Şekil. notes nesne deposu

    • Toplam giriş sayısı, nesne deposundaki anahtar/değer çiftlerinin toplam sayısıdır.
    • Bir sonraki kullanılabilir anahtar Anahtar oluşturucu değeri'dir. Bu alan yalnızca anahtar oluşturucu kullanılırken gösterilir.
  3. Değer sütunundaki bir hücreyi tıklayarak ilgili değeri genişletin.

    IndexedDB değerini görüntüleme

    4. Şekil. IndexedDB değerini görüntüleme

  4. Nesne deposunu söz konusu dizinin değerlerine göre sıralamak için aşağıdaki Şekil 6'da başlık veya gövde gibi bir dizini tıklayın.

    Nesne deposunu dizine göre sıralama

    5. Şekil. title anahtarına göre alfabetik olarak sıralanan nesne deposu

IndexedDB verilerini yenile

Uygulama panelindeki IndexedDB değerleri gerçek zamanlı olarak güncellenmez. Bir nesne deposunu görüntülerken verilerini yenilemek için Yenile'yi Yenile tıklayın veya bir veritabanını görüntüleyip tüm verileri yenilemek için Veritabanını yenile'yi tıklayın.

Veritabanını görüntüleme

6. Şekil. Veritabanını görüntüleme

IndexedDB verilerini düzenle

IndexedDB anahtarları ve değerleri Uygulama panelinden düzenlenemez. Ancak Geliştirici Araçları, sayfa bağlamına erişebildiğinden DevTools içinde IndexedDB verilerini düzenleyen JavaScript kodunu çalıştırabilirsiniz.

IndexedDB verilerini Snippet'lerle düzenleyin

Snippet'ler, Geliştirici Araçları'nda JavaScript kod bloklarını depolayıp çalıştırmanın bir yoludur. Snippet çalıştırdığınızda sonuç Konsol'a kaydedilir. Bir IndexedDB veritabanını düzenleyen JavaScript kodunu çalıştırmak için Snippet kullanabilirsiniz.

IndexedDB ile etkileşim kurmak için Snippet kullanma

7. Şekil. IndexedDB ile etkileşim kurmak için Snippet kullanma

IndexedDB verilerini sil

IndexedDB anahtar/değer çiftini silme

  1. Bir IndexedDB nesne deposunu görüntüleyin.
  2. Silmek istediğiniz anahtar/değer çiftini tıklayın. Geliştirici Araçları, seçildiğini belirtmek için bu simgeyi mavi renkle vurgular.

    Silmek için bir anahtar/değer çifti seçme

    8. Şekil. Silmek için bir anahtar/değer çifti seçme

  3. Sil tuşuna basın veya Seçilenleri Sil'i tıklayınSeçilen Öğeleri Sil.

    Anahtar/değer çifti silindikten sonra nesne deposunun görünümü

    9. Şekil. Anahtar/değer çifti silindikten sonra nesne deposunun görünümü

Bir nesne deposundaki tüm anahtar/değer çiftlerini silme

  1. Bir IndexedDB nesne deposunu görüntüleyin.

    Nesne deposunu görüntüleme

    10. Şekil. Nesne deposunu görüntüleme

  2. Nesne deposunu temizle'yi Nesne deposunu temizle tıklayın.

IndexedDB veritabanını silme

  1. Silmek istediğiniz IndexedDB veritabanını görüntüleyin.
  2. Veritabanını sil'i tıklayın.

    "Veritabanını sil" düğmesi

    Şekil 11. Veritabanını sil düğmesi

Tüm IndexedDB depolama alanını sil

  1. Depolama alanını temizle bölmesini açın.
  2. IndexedDB onay kutusunun etkinleştirildiğinden emin olun.
  3. Site verilerini temizle'yi tıklayın.

    "Depolama alanını temizle" bölmesi

    Şekil 12. Depolama alanını temizle bölmesi