في مقالنا السابق ، ناقشنا Dexie ، غلاف لـ IndustedDB. في هذه المقالة ، نناقش الفهرسة. يجب أن تكون على دراية بهذه API LocalStorage ، والتي تستخدم عادة لتخزين المعلومات في المتصفح. وبالمثل ، يتم استخدام INSEDDB للتخزين جانب العميل.

ما هو INSEDDB؟

شرح الوثائق MDN:

INSEDDB هي واجهة برمجة تطبيقات منخفضة المستوى لتخزين من جانب العميل لكميات كبيرة من البيانات المنظمة ، بما في ذلك الملفات/النقط. يستخدم API فهارس لتمكين عمليات البحث عالية الأداء لهذه البيانات. في حين أن تخزين الويب مفيد لتخزين كميات أقل من البيانات ، إلا أنه أقل فائدة لتخزين كميات أكبر من البيانات المنظمة.

يوفر INSEDDB حلًا. هذه هي الصفحة المقصودة الرئيسية لتغطية MDN INSPLEDB - نحن هنا نقدم روابط إلى مرجع و API الكامل وأدلة الاستخدام ، وتفاصيل دعم المتصفح ، وبعض شرح المفاهيم الرئيسية.

مثال مستودع:

يوفر MDN مثالًا على مستودع GitHub ولديه نص/todo.js.

باستخدام window.onload

window.onload = () => {
}

افتح طلبًا إلى قاعدة البيانات:

// Let us open our database
const DBOpenRequest = window.indexedDB.open('toDoList', 4);

خطأ في الاتصال:

// Register two event handlers to act on the database being opened successfully, or not
DBOpenRequest.onerror = (event) => {
 note.appendChild(createListItem('Error loading database.'));
};

على اتصال قاعدة البيانات الناجحة:

DBOpenRequest.onsuccess = (event) => {
 note.appendChild(createListItem('Database initialised.'));
// Store the result of opening the database in the db variable. This is used a lot below
 db = DBOpenRequest.result;
// Run the displayData() function to populate the task list with all the to-do list data already in the IndexedDB
 displayData();
};

إضافة بيانات

// Open a read/write DB transaction, ready for adding the data
const transaction = db.transaction(['toDoList'], 'readwrite');
// Call an object store that's already been added to the database
const objectStore = transaction.objectStore('toDoList');
// Make a request to add our newItem object to the object store
const objectStoreRequest = objectStore.add(newItem[0]);
objectStoreRequest.onsuccess = (event) => {
 // process data on success.
}
// Report on the success of the transaction completing, when everything is done
transaction.oncomplete = () => {
 note.appendChild(createListItem('Transaction completed: database modification finished.'));
// Update the display of data to show the newly added item, by running displayData() again.
 displayData();
};
// Handler for any unexpected error
transaction.onerror = () => {
 note.appendChild(createListItem(`Transaction not opened due to error: ${transaction.error}`));
};

الملاحظة: LocalStorage vs indexedDB

قد تدرك الآن أن هناك الكثير من التعليمات البرمجية المطلوبة فقط لإضافة سجل ، لديك عمليات اتصال غير متزامنة مثل onerror و onsuccess. هذا مدبب في إجابة تبادل المكدس هذه.

لتبسيط معالجة هذا الفهرسة ، يمكن استخدام dexie.

إضافة بيانات مع Dexie:

export function AddFriendForm({ defaultAge } = { defaultAge: 21 }) {
 const [name, setName] = useState('');
 const [age, setAge] = useState(defaultAge);
 const [status, setStatus] = useState('');
async function addFriend() {
 try {
 // Add the new friend!
 const id = await db.friends.add({
 name,
 age
 });
setStatus(`Friend ${name} successfully added. Got id ${id}`);
 setName('');
 setAge(defaultAge);
 } catch (error) {
 setStatus(`Failed to add ${name}: ${error}`);
 }
 }
return (
 
 
{status}
 Name:
  setName(ev.target.value)}
 />
 Age:
  setAge(Number(ev.target.value))}
 />
 Add
 >
 );
}

يذكرني واجهة برمجة تطبيقات الغلاف هذه من Orms مثل Prisma و Ridzzle.

معلومات عنا:

في Thinkthroo ، ندرس مشاريع كبيرة مفتوحة المصدر ونوفر أدلة معمارية. لقد قمنا بتطوير مكونات Resubale ، التي تم إنشاؤها باستخدام Tailwind ، والتي يمكنك استخدامها في مشروعك. نحن نقدم Next.js ، React و Development Development Services.

حجز اجتماع معنا لمناقشة مشروعك.

مراجع:

1. https://www.reddit.com/r/sveltejs/comments/15rj12h/any_downsides_to_using_indexeddb_vs_localstorage/

2. https://developer.mozilla.org/en-us/docs/web/api/indexeddb_api

3. https://github.com/mdn/dom-examples/tree/main/to-do-notifications

4. https://softwareengineering.stackexchange.com/questions/219953/how-is-localstorage-different-from-indexeddb