Birçok web uygulamasının, kullanıcı ayrıntılarını veya tercihlerini depolamak için bir veritabanı kullanması gerekir. Ancak her modern web tarayıcısında yerleşik bir veritabanı olduğunu biliyor muydunuz?

IndexedDB, yapılandırılmış verileri bir kullanıcının web tarayıcısında depolamanıza ve almanıza izin veren, istemci taraflı bir NoSQL veritabanıdır.

IndexedDB, localStorage gibi diğer depolama seçeneklerine göre daha büyük bellek ve çevrimdışı veri depolama ve alma gibi çeşitli avantajlar sağlar. Burada IndexedDB'yi veritabanı olarak nasıl kullanacağınızı öğreneceksiniz.

Veritabanınızı Kurma

Veritabanını oluşturmak için, IndexedDB'leri kullanarak açık bir istek oluşturmanız gerekir. açık yöntem. bu açık yöntem bir döndürür IDBOpenDBİsteği nesne. Bu nesne şuna erişim sağlar: başarı, hata, Ve yükseltme gerekliyayılan olaylar açık operasyondan.

bu açık yöntem iki bağımsız değişken alır: bir ad ve isteğe bağlı bir sürüm numarası. name bağımsız değişkeni, veritabanınızın adını temsil eder. Sürüm numarası, uygulamanızın birlikte çalışmayı beklediği veritabanı sürümünü belirtir. Varsayılan değer sıfırdır.

instagram viewer

Açık bir isteğin nasıl oluşturulacağı aşağıda açıklanmıştır:

sabit openRequest = indexedDB.open("usersdb", 1);

Açık isteği oluşturduktan sonra dinlemeniz ve olayları işlemek döndürülen nesne üzerinde.

bu başarı olay, veritabanını başarıyla oluşturduğunuzda gerçekleşir. Yayıldıktan sonra, veritabanı nesnenize şu şekilde erişebilirsiniz: olay.hedef.sonuç:

openRequest.onsuccess = işlev (etkinlik) {
sabit db = event.target.result;
konsol.kayıt("Veritabanı oluşturuldu", veritabanı);
};

Yukarıdaki örnek, veritabanı nesnesini günlüğe kaydederek bir başarı olayını işler.

bu hata Olay, IndexedDB veritabanını oluştururken bir sorunla karşılaşırsa oluşur. Hatayı konsola kaydederek veya diğerlerini kullanarak halledebilirsiniz. hata işleme yöntemleri:

openRequest.onerror = işlev (etkinlik) {
// ...
};

bu yükseltme gerekli olay, veritabanını ilk kez oluşturduğunuzda veya sürümünü güncellediğinizde gerçekleşir. Yalnızca bir kez ateşlenir, bu da onu bir nesne deposu oluşturmak için ideal bir yer yapar.

Nesne Deposu Oluşturma

Bir nesne deposu, sunucu tarafı ilişkisel veritabanlarındaki bir tabloya benzer. Anahtar/değer çiftlerini depolamak için bir nesne deposu kullanabilirsiniz.

Yanıt olarak nesne depoları oluşturmalısınız. yükseltme gerekli etkinlik. Bu olay, veritabanının yeni bir sürümünü oluşturduğunuzda veya mevcut bir sürümü yükselttiğinizde tetiklenir. Bu, herhangi bir veri eklemeden önce veritabanının doğru ve güncel olarak yapılandırılmasını sağlar.

kullanarak bir nesne deposu oluşturabilirsiniz. nesne deposu oluştur veritabanınızın bir referansına erişebileceğiniz yöntem. Bu yöntem, bağımsız değişken olarak nesne deposunun adını ve bir yapılandırma nesnesini alır.

Konfigürasyon nesnesinde bir birincil anahtar tanımlamanız gerekir. Her zaman var olan ve benzersiz bir değer içeren bir özellik olan bir anahtar yolu tanımlayarak bir birincil anahtar tanımlayabilirsiniz. Alternatif olarak, ayarlayarak bir anahtar oluşturucu kullanabilirsiniz. anahtarYol mülkiyet “İD" ve otomatik artış mülkiyet doğru yapılandırma nesnenizde.

Örneğin:

openRequest.onupgradeneeded = işlev (etkinlik) {
sabit db = event.target.result;
// Bir nesne deposu oluştur
sabit userObjectStore = db.createObjectStore("kullanıcı Mağazası", {
 anahtarYol: "İD",
 otomatik artış: doğru,
 });
}

Bu örnek, veritabanınızda "userStore" adlı bir nesne deposu oluşturur ve birincil anahtarını otomatik artan bir kimliğe ayarlar.

İndeks Tanımlama

IndexedDB'de dizin, verileri daha verimli bir şekilde düzenlemenin ve almanın bir yoludur. Bu, nesne deposunu aramanıza ve dizine eklenmiş özelliklere göre sıralamanıza olanak tanır.

Bir nesne deposunda bir dizin tanımlamak için şunu kullanın: dizin oluştur() bir nesne depolama nesnesinin yöntemi. Bu yöntem, bağımsız değişken olarak bir dizin adı, bir özellik adı ve bir yapılandırma nesnesi alır:

userObjectStore.createIndex("isim", "isim", { eşsiz: YANLIŞ });
userObjectStore.createIndex("e-posta", "e-posta", { eşsiz: doğru });

Yukarıdaki bu kod bloğu, "ad" ve "e-posta" olmak üzere iki dizini tanımlar. kullanıcıObjectStore. "Ad" dizini benzersiz değildir, yani birden çok nesne aynı ad değerine sahip olabilirken, "email" dizini benzersizdir ve hiçbir iki nesnenin aynı e-posta değerine sahip olmamasını sağlar.

İşte bir sorunla nasıl başa çıkabileceğinize dair eksiksiz bir örnek yükseltme gerekli etkinlik:

openRequest.onupgradeneeded = işlev (etkinlik) {
sabit db = event.target.result;
// Bir nesne deposu oluştur
sabit userObjectStore = db.createObjectStore("kullanıcı Mağazası", {
 anahtarYol: "İD",
 otomatik artış: doğru,
 }); 
// indeksler oluştur
 userObjectStore.createIndex("isim", "isim", { eşsiz: YANLIŞ });
 userObjectStore.createIndex("e-posta", "e-posta", { eşsiz: doğru });
};

IndexedDB'ye Veri Ekleme

IndexedDB'deki bir işlem, birden çok okuma ve yazma işlemini tek bir işlemde gruplandırmanın bir yoludur. Veri tutarlılığını ve bütünlüğünü sağlamak için, bir işlem içindeki işlemlerden biri başarısız olursa, IndexedDB tüm işlemleri geri alır.

Bir IndexedDB veritabanına veri eklemek için, verileri eklemek istediğiniz nesne deposunda bir işlem oluşturmanız ve ardından eklemek() Verileri eklemek için işlemdeki yöntem.

arayarak bir işlem oluşturabilirsiniz. işlem veritabanı nesnenizdeki yöntem. Bu yöntem iki bağımsız değişken alır: Veri deponuzun ad(lar)ı ve işlemin modu. Sadece oku (varsayılan) veya okuma yazma.

Ardından, nesne Deposu() yöntemini seçin ve veri eklemek istediğiniz nesne deposunun adını iletin. Bu yöntem, nesne deposuna bir başvuru döndürür.

Son olarak, eklemek() nesne deposundaki yöntem ve eklemek istediğiniz verileri iletin:

sabit kullanıcıverileri ekle = (kullanıcı Verileri, veritabanı) => {
// Bir işlem aç
sabit işlem = db.transaction("kullanıcı Mağazası", "okuma yazma");
// Nesne deposuna veri ekle
sabit userObjectStore = işlem.objectStore("kullanıcı Mağazası");


// userData eklemek için bir istekte bulunun
sabit istek = userObjectStore.add (userData);


// Bir başarı olayı işle
 istek.başarı = işlev (etkinlik) {
//...
 };
// Bir hatayla ilgilen
 request.onerror = işlev (etkinlik) {
//...
 };
};

Bu işlev, "userStore" nesne deposuyla bir işlem oluşturur ve modu "readwrite" olarak ayarlar. Ardından, nesne deposunu alır ve Kullanıcı bilgisi kullanarak ona eklemek yöntem.

IndexedDB'den Veri Alma

Bir IndexedDB veritabanından veri almak için, verileri almak istediğiniz nesne deposunda bir işlem oluşturmanız ve ardından elde etmek() veya hepsini al() Almak istediğiniz veri miktarına bağlı olarak verileri alma işlemindeki yöntem.

bu elde etmek() yöntemi, almak istediğiniz nesnenin birincil anahtarı için bir değer alır ve nesneyi, nesne deponuzdan karşılık gelen anahtarla birlikte döndürür.

bu hepsini al() yöntem, bir nesne deposundaki tüm verileri döndürür. Ayrıca isteğe bağlı bir kısıtlamayı bağımsız değişken olarak alır ve eşleşen tüm verileri depodan döndürür.

sabit getUserData = (kimlik, veri tabanı) => {
sabit işlem = db.transaction("kullanıcı Mağazası", "Sadece oku");
sabit userObjectStore = işlem.objectStore("kullanıcı Mağazası");
// Verileri almak için bir istekte bulunun
sabit istek = userObjectStore.get (id);


 istek.başarı = işlev (etkinlik) {
konsol.log (istek.sonuç);
 };
 request.onerror = işlev (etkinlik) {
// İşlem hatası
 };
};

Bu işlev, "userStore" nesne deposuyla bir işlem oluşturur ve modu "salt okunur" olarak ayarlar. Ardından, nesne deposundan eşleşen kimliğe sahip kullanıcı verilerini alır.

IndexedDB ile Verileri Güncelleme

IndexedDB'deki verileri güncellemek için "readwrite" kipinde bir işlem oluşturmanız gerekir. kullanarak güncellemek istediğiniz nesneyi alarak devam edin. elde etmek() yöntem. Ardından nesneyi değiştirin ve koymak() güncellenen nesneyi veritabanına geri kaydetmek için nesne deposundaki yöntem.

sabit updateUserData = (kimlik, kullanıcı Verileri, db) => {
sabit işlem = db.transaction("kullanıcı Mağazası", "okuma yazma");
sabit userObjectStore = işlem.objectStore("kullanıcı Mağazası");
// Verileri almak için bir istekte bulunun
sabit getRequest = userObjectStore.get (id);


// Bir başarı olayı işle
 getRequest.onsuccess = işlev (etkinlik) {
// Eski kullanıcı verilerini al
sabit kullanıcı = event.target.result;


// Kullanıcı verilerini güncelle
 user.name = userData.name;
 user.email = userData.email;


// Verileri güncellemek için bir istekte bulunun
sabit putRequest = userObjectStore.put (kullanıcı);


 putRequest.onsuccess = işlev (etkinlik) {
// Başarıyı işle
 };


 putRequest.onerror = işlev (etkinlik) {
// İşlem hatası
 };
 };
 getRequest.onerror = işlev (etkinlik) {
// İşlem hatası
 };
};

Bu işlev, veritabanınızın verilerini almak ve güncellemek için bir işlem oluşturur.

IndexedDB'den Veri Silme

IndexedDB'den veri silmek için "readwrite" kipinde bir işlem oluşturmanız gerekir. O zaman ara silmek() nesneyi veritabanından kaldırmak için nesne deposundaki yöntem:

sabit silUserData = (kimlik, veri tabanı) => {
sabit işlem = db.transaction("kullanıcı Mağazası", "okuma yazma");
sabit userObjectStore = işlem.objectStore("kullanıcı Mağazası");
// Verileri silmek için istekte bulunun
sabit istek = userObjectStore.delete (id);


 istek.başarı = işlev (etkinlik) {
// Başarıyı işle
 };
 request.onerror = işlev (etkinlik) {
// İşlem hatası
 };
};

Bu işlev, ilgili kimliğe sahip verileri nesne deponuzdan silen bir işlem oluşturur.

IndexedDB mi yoksa localStorage mı Kullanmalısınız?

IndexedDB ile localStorage gibi diğer istemci tarafı veritabanları arasındaki seçim, uygulamanızın gereksinimlerine bağlıdır. Küçük miktarlardaki verilerin basit bir şekilde depolanması için localStorage'ı kullanın. Sorgulama ve filtreleme gerektiren büyük yapılandırılmış veri kümeleri için IndexedDB'yi seçin.