تحتاج العديد من تطبيقات الويب إلى استخدام قاعدة بيانات لتخزين تفاصيل المستخدم أو تفضيلاته. لكن هل تعلم أن هناك قاعدة بيانات مضمنة في كل متصفح ويب حديث؟

IndexedDB هي قاعدة بيانات NoSQL من جانب العميل تسمح لك بتخزين واسترداد البيانات المهيكلة داخل متصفح الويب الخاص بالمستخدم.

يوفر IndexedDB العديد من المزايا ، مثل الذاكرة الأكبر وتخزين البيانات دون اتصال بالإنترنت واسترجاعها مقارنة بخيارات التخزين الأخرى ، مثل التخزين المحلي. ستتعلم هنا كيفية استخدام قاعدة البيانات المفهرسة كقاعدة بيانات.

إعداد قاعدة البيانات الخاصة بك

لإنشاء قاعدة البيانات ، عليك إنشاء طلب مفتوح باستخدام قاعدة بيانات مفهرسة يفتح طريقة. ال يفتح طريقة إرجاع ملف طلب IDBOpenDBR هدف. يوفر هذا الكائن الوصول إلى ملف نجاح, خطأ، و ترقيةالأحداث المنبعثة من العملية المفتوحة.

ال يفتح تأخذ الطريقة وسيطين: اسم ورقم إصدار اختياري. تمثل وسيطة الاسم اسم قاعدة البيانات الخاصة بك. يحدد رقم الإصدار إصدار قاعدة البيانات التي يتوقع تطبيقك العمل معها. القيمة الافتراضية هي صفر.

إليك كيفية إنشاء طلب مفتوح:

مقدار ثابت openRequest = indexedDB.open ("usersdb", 1);
instagram viewer

بعد إنشاء الطلب المفتوح ، تحتاج إلى الاستماع و التعامل مع الأحداث على الكائن الذي تم إرجاعه.

ال نجاح يحدث الحدث عند إنشاء قاعدة البيانات بنجاح. بمجرد إرسالها ، يمكنك الوصول إلى كائن قاعدة البيانات الخاصة بك من خلال event.target.result:

openRequest.onsuccess = وظيفة (حدث) {
مقدار ثابت ديسيبل = event.target.result ؛
وحدة التحكم.سجل("تم إنشاء قاعدة بيانات"، ديسيبل) ؛
};

يعالج المثال أعلاه حدثًا ناجحًا عن طريق تسجيل كائن قاعدة البيانات.

ال خطأ يحدث الحدث إذا واجهت IndexedDB مشكلة أثناء إنشاء قاعدة البيانات. يمكنك التعامل معها عن طريق تسجيل الخطأ في وحدة التحكم أو استخدام أخرى طرق معالجة الأخطاء:

openRequest.onerror = وظيفة (حدث) {
// ...
};

ال ترقية يحدث الحدث عند إنشاء قاعدة البيانات لأول مرة أو عند تحديث نسختها. يتم إطلاقه مرة واحدة فقط ، مما يجعله المكان المثالي لإنشاء متجر كائنات.

إنشاء متجر كائنات

يشبه ملف تخزين العناصر الجدول الموجود في قواعد البيانات العلائقية من جانب الخادم. يمكنك استخدام ملف تخزين العناصر لتخزين أزواج المفتاح والقيمة.

يجب عليك إنشاء مخازن الكائنات ردًا على ملف ترقية حدث. يتم تشغيل هذا الحدث عند إنشاء إصدار جديد من قاعدة البيانات أو ترقية إصدار موجود. يضمن ذلك تكوين قاعدة البيانات بشكل صحيح وتحديثها قبل إضافة أي بيانات.

يمكنك إنشاء ملف تخزين عناصر باستخدام امتداد createObjectStore الطريقة ، والتي يمكنك الوصول إليها من مرجع قاعدة البيانات الخاصة بك. تأخذ هذه الطريقة اسم ملف تخزين العناصر وكائن التوصيف كوسائط.

في كائن التكوين ، يجب عليك تحديد مفتاح أساسي. يمكنك تعريف مفتاح أساسي من خلال تحديد مسار مفتاح ، وهي خاصية موجودة دائمًا وتحتوي على قيمة فريدة. بدلاً من ذلك ، يمكنك استخدام منشئ المفاتيح عن طريق تعيين ملف keyPath خاصية "بطاقة تعريف" و ال زيادة تلقائية الملكية ل حقيقي في كائن التكوين الخاص بك.

على سبيل المثال:

openRequest.onupgradeneeded = وظيفة (حدث) {
مقدار ثابت ديسيبل = event.target.result ؛
// إنشاء مخزن كائن
مقدار ثابت userObjectStore = db.createObjectStore ("userStore", {
 keyPath: "بطاقة تعريف",
 زيادة تلقائية: حقيقي,
 });
}

يقوم هذا المثال بتكوين ملف تخزين عناصر يسمى "userStore" في قاعدة البيانات الخاصة بك ويقوم بتعيين مفتاحه الأساسي إلى معرف زيادة تلقائي.

تحديد الفهارس

في IndexedDB ، يعد الفهرس طريقة لتنظيم واسترجاع البيانات بشكل أكثر كفاءة. يسمح لك هذا بالبحث في ملف تخزين العناصر وفرزه بناءً على الخصائص المفهرسة.

لتعريف فهرس في ملف تخزين العناصر ، استخدم الامتداد createIndex () طريقة كائن تخزين الكائن. تأخذ هذه الطريقة اسم فهرس واسم خاصية وكائن تكوين كوسائط:

userObjectStore.createIndex ("اسم", "اسم", { فريد: خطأ شنيع });
userObjectStore.createIndex ("بريد إلكتروني", "بريد إلكتروني", { فريد: حقيقي });

تحدد كتلة التعليمات البرمجية أعلاه فهرسين ، "الاسم" و "البريد الإلكتروني" على userObjectStore. فهرس "الاسم" ليس فريدًا ، مما يعني أن كائنات متعددة يمكن أن يكون لها نفس قيمة الاسم ، في حين أن فهرس "البريد الإلكتروني" فريد ، مما يضمن عدم إمكانية حصول كائنين على نفس قيمة البريد الإلكتروني.

فيما يلي مثال كامل لكيفية التعامل مع ملف ترقية حدث:

openRequest.onupgradeneeded = وظيفة (حدث) {
مقدار ثابت ديسيبل = event.target.result ؛
// إنشاء مخزن كائن
مقدار ثابت userObjectStore = db.createObjectStore ("userStore", {
 keyPath: "بطاقة تعريف",
 زيادة تلقائية: حقيقي,
 }); 
// إنشاء الفهارس
 userObjectStore.createIndex ("اسم", "اسم", { فريد: خطأ شنيع });
 userObjectStore.createIndex ("بريد إلكتروني", "بريد إلكتروني", { فريد: حقيقي });
};

إضافة البيانات إلى قاعدة البيانات المفهرسة

المعاملة في قاعدة البيانات المفهرسة هي طريقة لتجميع عمليات القراءة والكتابة المتعددة في عملية واحدة. لضمان تناسق البيانات وسلامتها ، إذا فشلت إحدى العمليات داخل إحدى المعاملات ، فإن IndexedDB تتراجع عن جميع العمليات.

لإضافة بيانات إلى قاعدة بيانات IndexedDB ، تحتاج إلى إنشاء معاملة في مخزن العناصر الذي تريد إضافة البيانات إليه ثم استخدام يضيف() طريقة المعاملة لإضافة البيانات.

يمكنك إنشاء معاملة عن طريق الاتصال بـ عملية طريقة على كائن قاعدة البيانات الخاصة بك. تأخذ هذه الطريقة وسيطين: اسم (أسماء) مخزن البيانات الخاص بك ووضع المعاملة ، والتي يمكن أن تكون يقرأ فقط (افتراضي) أو قراءة و كتابة.

ثم اتصل ب objectStore () على المعاملة وتمرير اسم ملف تخزين العناصر الذي تريد إضافة البيانات إليه. تقوم هذه الطريقة بإرجاع مرجع إلى ملف تخزين العناصر.

أخيرًا ، اتصل بـ يضيف() في ملف تخزين العناصر وتمرير البيانات التي تريد إضافتها:

مقدار ثابت addUserData = (userData ، ديسيبل) => {
// افتح معاملة
مقدار ثابت معاملة = db.transaction ("userStore", "قراءة و كتابة");
// إضافة البيانات إلى ملف تخزين العناصر
مقدار ثابت userObjectStore = transaction.objectStore ("userStore");


// قدم طلبًا لإضافة بيانات المستخدم
مقدار ثابت طلب = userObjectStore.add (userData) ،


// التعامل مع حدث ناجح
 request.onsuccess = وظيفة (حدث) {
//...
 };
// معالجة خطأ
 طلب خطأ = وظيفة (حدث) {
//...
 };
};

هذه الوظيفة تنشئ معاملة مع ملف تخزين العناصر "userStore" وتضبط الوضع على "readwrite". بعد ذلك ، يحصل على ملف تخزين العناصر ويضيف الامتداد بيانات المستخدم إليها باستخدام يضيف طريقة.

استرجاع البيانات من قاعدة البيانات المفهرسة

لاسترداد البيانات من قاعدة بيانات IndexedDB ، تحتاج إلى إنشاء معاملة في مخزن العناصر الذي تريد استرداد البيانات منه ثم استخدام يحصل() أو getAll () على المعاملة لاسترداد البيانات اعتمادًا على كمية البيانات التي تريد استردادها.

ال يحصل() يأخذ الأسلوب قيمة للمفتاح الأساسي للكائن الذي تريد استرداده ويعيد الكائن بالمفتاح المقابل من ملف تخزين العناصر الخاص بك.

ال getAll () يقوم التابع بإرجاع جميع البيانات الموجودة في ملف تخزين العناصر. يأخذ أيضًا قيدًا اختياريًا كوسيطة ويعيد جميع البيانات المطابقة من المخزن.

مقدار ثابت getUserData = (معرف ، ديسيبل) => {
مقدار ثابت معاملة = db.transaction ("userStore", "يقرأ فقط");
مقدار ثابت userObjectStore = transaction.objectStore ("userStore");
// قدم طلبًا للحصول على البيانات
مقدار ثابت طلب = userObjectStore.get (معرف) ،


 request.onsuccess = وظيفة (حدث) {
وحدة التحكم.log (request.result) ؛
 };
 طلب خطأ = وظيفة (حدث) {
// معالجة الخطأ
 };
};

هذه الوظيفة تنشئ معاملة مع ملف تخزين العناصر "userStore" وتضبط الوضع على "readonly". ثم يقوم باسترجاع بيانات المستخدم بالمعرف المطابق من ملف تخزين العناصر.

تحديث البيانات بقاعدة بيانات مفهرسة

لتحديث البيانات في IndexedDB ، تحتاج إلى إنشاء معاملة باستخدام وضع "readwrite". تابع عن طريق استرداد الكائن الذي تريد تحديثه باستخدام ملف يحصل() طريقة. ثم قم بتعديل الكائن واستدعاء يضع() في ملف تخزين العناصر لحفظ العنصر الذي تم تحديثه مرة أخرى إلى قاعدة البيانات.

مقدار ثابت updateUserData = (معرف ، userData ، ديسيبل) => {
مقدار ثابت معاملة = db.transaction ("userStore", "قراءة و كتابة");
مقدار ثابت userObjectStore = transaction.objectStore ("userStore");
// قدم طلبًا للحصول على البيانات
مقدار ثابت getRequest = userObjectStore.get (id) ،


// التعامل مع حدث ناجح
 getRequest.onsuccess = وظيفة (حدث) {
// احصل على بيانات المستخدم القديمة
مقدار ثابت المستخدم = event.target.result ؛


// تحديث بيانات المستخدم
 user.name = userData.name ؛
 user.email = userData.email ،


// تقديم طلب لتحديث البيانات
مقدار ثابت putRequest = userObjectStore.put (مستخدم) ،


 putRequest.onsuccess = وظيفة (حدث) {
// التعامل مع النجاح
 };


 putRequest.onerror = وظيفة (حدث) {
// معالجة الخطأ
 };
 };
 getRequest.onerror = وظيفة (حدث) {
// معالجة الخطأ
 };
};

تنشئ هذه الوظيفة معاملة للحصول على بيانات قاعدة البيانات وتحديثها.

حذف البيانات من قاعدة البيانات المفهرسة

لحذف البيانات من IndexedDB ، تحتاج إلى إنشاء معاملة باستخدام وضع "readwrite". ثم اتصل ب يمسح() في ملف تخزين العناصر لإزالة الكائن من قاعدة البيانات:

مقدار ثابت deleteUserData = (معرف ، ديسيبل) => {
مقدار ثابت معاملة = db.transaction ("userStore", "قراءة و كتابة");
مقدار ثابت userObjectStore = transaction.objectStore ("userStore");
// قدم طلبًا لحذف البيانات
مقدار ثابت طلب = userObjectStore.delete (معرف) ،


 request.onsuccess = وظيفة (حدث) {
// التعامل مع النجاح
 };
 طلب خطأ = وظيفة (حدث) {
// معالجة الخطأ
 };
};

تقوم هذه الوظيفة بإنشاء معاملة تقوم بحذف البيانات بالمعرف المقابل من مخزن العناصر الخاص بك.

هل يجب عليك استخدام IndexedDB أو localStorage؟

يعتمد الاختيار بين قاعدة البيانات المفهرسة وقواعد البيانات الأخرى من جانب العميل ، مثل localStorage ، على متطلبات التطبيق الخاص بك. استخدم localStorage للتخزين البسيط لكميات صغيرة من البيانات. اختر IndexedDB لمجموعات البيانات المنظمة الكبيرة التي تتطلب الاستعلام والتصفية.