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

Kayce Baskler
Kayce Baskçalar

Bu kılavuzda, IndexedDB verilerini görüntülemek ve değiştirmek için Chrome Geliştirici Araçları'nı nasıl kullanacağınız gösterilmektedir. Geliştirici Araçları hakkında bilgi sahibi olduğunuz varsayılır. Başlamadıysanız Başlarken bölümüne bakın. Ayrıca IndexedDB'ye aşina olduğunuz varsayılmaktadır. Aksi takdirde, IndexedDB'yi kullanma bölümünü inceleyin.

IndexedDB verilerini görüntüleme

  1. Uygulama panelini açmak için Uygulama sekmesini tıklayın. Kullanılabilir veritabanlarını 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, https://mdn.github.io ise veritabanına erişebilen kaynaktır.
    • Nesne Deposu simgesi notes bir nesne deposudur.
    • title ve body, dizinler şeklindedir.
  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.

    "Notes" nesne deposu

    3. Şekil. notes nesne deposu

    • Toplam giriş sayısı, nesne deposundaki anahtar/değer çiftlerinin toplam sayısıdır.
    • Anahtar oluşturma aracı değeri, bir sonraki kullanılabilir anahtardır. Bu alan yalnızca anahtar oluşturucular 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 dizinin değerlerine göre sıralamak için aşağıdaki Şekil 6'da title (başlık) veya body (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ıralanmış bir nesne deposu

IndexedDB verilerini yenile

Uygulama panelindeki IndexedDB değerleri gerçek zamanlı olarak güncellenmez. Bir nesne deposunun 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. Bununla birlikte, Geliştirici Araçları sayfa içeriğine erişebildiğinden, IndexedDB verilerini düzenleyen Geliştirici Araçları içinde JavaScript kodunu çalıştırabilirsiniz.

IndexedDB verilerini Snippet'lerle düzenleme

Snippet'ler, JavaScript kod bloklarını Geliştirici Araçları'nda depolamanın ve çalıştırmanın bir yoludur. Bir Snippet çalıştırdığınızda sonuç Konsol'a kaydedilir. 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 silme

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 üzere mavi vurgular.

    Silmek üzere bir anahtar/değer çifti seçme

    8. Şekil. Silmek üzere bir anahtar/değer çifti seçme

  3. Sil tuşuna basın veya Seçilenleri Sil Seçilen Öğeleri Sil düğmesini tıklayın.

    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

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

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

IndexedDB veritabanı 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