JavaScript
Meydan okuma - IndexedDB uygulaması
IndexedDB ile bir yer imi uygulamasının veri ekleyip sorgulama akışını yazarsın.
IndexedDB uygulaması
Bu meydan okumada bir yer imi uygulamasının veri akışını yazacaksın. Önce indexedDB.open('bookmarks', 1) ile veritabanını açarsın; ikinci argüman sürüm numarasıdır.
İlk açılışta onupgradeneeded olayı tetiklenir. Burada db.createObjectStore('marks', { keyPath: 'id' }) ile veri deposunu oluşturursun. Bu, tablo gibi düşünülebilir.
Veri eklemek için bir transaction açar, objectStore('marks')'ı alır ve add(bookmark) çağırırsın. Tüm işlemler bir transaction içinde olmalıdır.
Veri ekleme ve sorgu
Bir transaction, bir veya daha fazla object store üzerinde atomik bir işlemdir. db.transaction('marks', 'readwrite') ile hem okuma hem yazma izni alırsın.
Üzerinden objectStore('marks')'ı alır, sonra store.add(bookmark) ile yeni kayıt eklersin. Her işlem bir request döndürür; onsuccess ile başarılı olduğunu anlarsın.
Sorgu için aynı akışı 'readonly' ile açar, store.get(id) veya bir index üzerinden store.index('title') ile arama yaparsın.
Uygulama addBookmark fonksiyonunu yaz
addBookmark(db, bookmark) yaz: db.transaction('marks', 'readwrite') ile yazma işlemi aç, objectStore('marks')'ı al ve store.add(bookmark) ile yer imini ekle.
Örnek çözümü göster
function addBookmark(db, bookmark) aç. İçinde const tx = db.transaction('marks', 'readwrite'); const store = tx.objectStore('marks'); store.add(bookmark); yaz.
Örnek çözüm:
function addBookmark(db, bookmark) {
const tx = db.transaction('marks', 'readwrite');
const store = tx.objectStore('marks');
store.add(bookmark);
}
Kendini test et
-
Veritabanını aç
const request = ____;
request.onupgradeneeded = (event) => {
const db = event.target.result;
db.createObjectStore('marks', { keyPath: 'id' });
};
Cevabı göster
const request = indexedDB.open('bookmarks', 1);
request.onupgradeneeded = (event) => {
const db = event.target.result;
db.createObjectStore('marks', { keyPath: 'id' });
};
-
Veri eklemek için objectStore ne üzerinden alınır?
const tx = db.transaction('marks', 'readwrite');
const store = tx.objectStore('marks');
store.add(bookmark);
- Doğrudan db nesnesi
- indexedDB globali
- event.target.result
- Bir transaction üzerinden
Cevabı göster
Bir transaction üzerinden — Doğru! Tüm veri işlemleri bir transaction içindeki objectStore üzerinden yapılır.
-
IndexedDB kavramlarını eşleştir
- indexedDB.open
- Veritabanını açar
- onupgradeneeded
- Depoyu oluşturur
- transaction()
- Atomik işlem başlatır
- objectStore()
- Depoya erişir
Sıradaki ders: Meydan okuma - Custom element
