Javascript ve Indexeddb Kullanımı
Muhtemelen daha önce Javascript’de localStorage ve sessionStorage Apilerini kullanmışsınızdır. Peki Indexeddb’yi daha önce hiç kullandınız mı?
Aradaki Fark Nedir?
Indexeddb, localStorage ve sessionStorage gibi bir depolama aracıdır fakat daha gelişmiştir bütün veri tiplerini Indexeddb üzerinde yedekleyebilirsiniz.
Örnek olarak bir File/blob yedeklemeniz gerekiyor fakat burada yedekleme için localStorage kullanamayız çünkü localStorage string kabul ediyor ve bir obje kayıt etmek istediğimizde de JSON.stringify() kullanıyoruz. Indexedb üzerinde bütün veri tiplerini yedekleyebildiğimiz için bir blob da tutabiliriz :).
Object Store
Normal veritabanlarında kullandığımız table ın karşılığı indexeddb’de ObjectStoredir.
Transaction
Transaction kavramını diğer veritabanlarında da duymuşsunuzdur. Indexeddb’de transactionu sıklıkla kullanıyoruz. Transaction genellikle güvenlik için kullanılır eğer işlemimiz başarısız olursa veya yarım kalırsa verilerimiz başlangıçtaki haline geri döner. Genelde para gönderme örneği ile anlatılır.
Veritabanı Oluşturma
Biz bloblarımızı yedekleyeceğimiz bir uygulama geliştireceğiz ilk önce veritabanımızı oluşturalım.
var requestfile = window.indexedDB.open(“file”, 1);
İlk parametremiz veritabanımızın adı ikincisi ise versiyon.
- Bir versiyondan sadece bir kez olabilir.
- Eğer daha yüksek bir versiyonumuz varsa eski olan versiyonlar artık kulllanılmaz.
- Yeni bir veritabanı oluşturduğumuzda onupgradeneeded eventi çalışır. Bu event içerisinde objectStore yani tablolarımızı oluşturabiliriz. Fakat onupgradeneeded veritabanımız ilk kez oluşturduğumuzda ya da yeni bir versiyonda çalışır.
- onsuccess: Veritabanımız açıldığında çalışan event.
- onerror: Bir hatayla karşılaştığımızda çalışan event.
Veritabanımızı ilk kez oluşturduk onupgradeneeded eventi çalıştı ve tablomuzu oluşturduk. keyPath bizim primaryKey olacak sütunumuzu belirliyor. ve id değerimizi autoIncrement ile otomatik olarak arttırıyoruz.
Şimdi inspect/storage indexedb kısmını kontrol edebiliriz.
Veri Ekleme
Bir formumuzun olduğunu varsayalım içerisinde bir text input ve bir file input olsun. Bir de submit butonumuz.
Veri Listeleme
Primary Key’e göre Filtreleme Yapmak
- ObjectStore oluşturuken bir primaryKey oluşturmuştuk bu primaryKey üzerinden where sorugusu gerçekleştirebiliriz.
Index Üzerinden Where Sorugusu Çalıştırmak
Silme İşlemi
Güncelleme İşlemi
Okuduğunuz için teşekkür ederim 😀🥰🥰.
Indexeddb hakkında en iyi bilgiye bu linkten ulaşabilirsiniz.
Ayırca Javascript, Html ve Css özelliklerini Mdn’den en güncel şekilde bulabilirsiniz.
