כיצד להשתמש ב- IndexedDB כמסד נתונים

IndexedDB הוא מסד נתונים NoSQL בצד הלקוח, המאפשר לך לאחסן ולאחזר נתונים מובנים בדפדפן האינטרנט של המשתמש.

IndexedDB מספק מספר יתרונות, כגון זיכרון גדול יותר ואחסון ואחזור נתונים לא מקוונים על פני אפשרויות אחסון אחרות, כגון localStorage. כאן תלמדו כיצד להשתמש ב- IndexedDB כמסד נתונים.

הגדרת מסד הנתונים שלך

כדי ליצור את מסד הנתונים, עליך ליצור בקשה פתוחה באמצעות IndexedDB לִפְתוֹחַ שיטה. ה לִפְתוֹחַ שיטה מחזירה an IDBOpenDBRequest לְהִתְנַגֵד. אובייקט זה מספק גישה ל- הַצלָחָה, שְׁגִיאָה, ו נדרש שדרוגאירועים שנפלטו מהמבצע הפתוח.

ה לִפְתוֹחַ השיטה לוקחת שני ארגומנטים: שם ומספר גרסה אופציונלי. ארגומנט השם מייצג את השם של מסד הנתונים שלך. מספר הגרסה מציין את הגרסה של מסד הנתונים שאיתה היישום שלך מצפה לעבוד. ערך ברירת המחדל הוא אפס.

כך יוצרים בקשה פתוחה:

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

לאחר יצירת הבקשה הפתוחה, עליך להקשיב ו לטפל באירועים על החפץ המוחזר.

ה הַצלָחָה אירוע מתרחש כאשר אתה יוצר את מסד הנתונים בהצלחה. לאחר שנפלט, אתה מקבל גישה לאובייקט מסד הנתונים שלך דרך event.target.result:

openRequest.onsuccess = פוּנקצִיָה (מִקרֶה) {
const db = event.target.result;
לְנַחֵם.עֵץ("מסד נתונים נוצר",db);
};

הדוגמה שלמעלה מטפלת באירוע הצלחה על ידי רישום אובייקט מסד הנתונים.

ה שְׁגִיאָה אירוע מתרחש אם IndexedDB נתקל בבעיה במהלך יצירת מסד הנתונים. אתה יכול לטפל בזה על ידי רישום השגיאה למסוף או שימוש באחר שיטות טיפול בשגיאות:

openRequest.onerror = פוּנקצִיָה (מִקרֶה) {
// ...
};

ה נדרש שדרוג אירוע מתרחש כאשר אתה יוצר את מסד הנתונים בפעם הראשונה או כאשר אתה מעדכן את הגרסה שלו. הוא נורה פעם אחת בלבד, מה שהופך אותו למקום האידיאלי ליצירת חנות חפצים.

יצירת מאגר חפצים

מאגר אובייקטים דומה לטבלה במסדי נתונים יחסיים בצד השרת. אתה יכול להשתמש במאגר אובייקטים כדי לאחסן צמדי מפתח-ערך.

עליך ליצור מאגרי אובייקטים בתגובה ל נדרש שדרוג מִקרֶה. אירוע זה מופעל כאשר אתה יוצר גרסה חדשה של מסד הנתונים או משדרג גרסה קיימת. זה מבטיח שמסד הנתונים מוגדר כהלכה ומעודכן לפני שתוסיף נתונים כלשהם.

אתה יכול ליצור מאגר אובייקטים באמצעות ה createObjectStore שיטה, שאליה תוכל לגשת באמצעות הפניה של מסד הנתונים שלך. שיטה זו לוקחת את השם של מאגר האובייקטים ואובייקט תצורה כארגומנטים.

באובייקט התצורה, עליך להגדיר מפתח ראשי. ניתן להגדיר מפתח ראשי על ידי הגדרת נתיב מפתח, שהוא מאפיין שקיים תמיד ומכיל ערך ייחודי. לחלופין, אתה יכול להשתמש במחולל מפתחות על ידי הגדרת ה keyPath נכס ל"תְעוּדַת זֶהוּת" וה הגדלה אוטומטית רכוש ל נָכוֹן באובייקט התצורה שלך.

לדוגמה:

openRequest.onupgradeneeded = פוּנקצִיָה (מִקרֶה) {
const db = event.target.result;
// צור מאגר אובייקטים
const userObjectStore = db.createObjectStore("UserStore", {
 keyPath: "תְעוּדַת זֶהוּת",
 הגדלה אוטומטית: נָכוֹן,
 });
}

דוגמה זו יוצרת מאגר אובייקטים בשם "userStore" במסד הנתונים שלך ומגדירה את המפתח הראשי שלו למזהה הגדל אוטומטית.

הגדרת אינדקסים

ב- IndexedDB, אינדקס הוא דרך לארגן ולאחזר נתונים בצורה יעילה יותר. זה מאפשר לך לחפש במאגר האובייקטים ולמיין אותו על סמך המאפיינים שנוספו לאינדקס.

כדי להגדיר אינדקס במאגר אובייקטים, השתמש ב- createIndex() שיטה של ​​אובייקט מאגר אובייקטים. שיטה זו לוקחת שם אינדקס, שם מאפיין ואובייקט תצורה בתור ארגומנטים:

userObjectStore.createIndex("שֵׁם", "שֵׁם", { ייחודי: שֶׁקֶר });
userObjectStore.createIndex("אימייל", "אימייל", { ייחודי: נָכוֹן });

בלוק קוד זה למעלה מגדיר שני אינדקסים, "שם" ו-"email" ב- userObjectStore. אינדקס ה"שם" אינו ייחודי, כלומר לאובייקטים מרובים יכול להיות אותו ערך שם, בעוד שאינדקס ה"אימייל" הוא ייחודי, מה שמבטיח שלא שני אובייקטים יכולים להיות בעלי ערך דוא"ל זהה.

הנה דוגמה מלאה איך אתה יכול להתמודד עם נדרש שדרוג מִקרֶה:

openRequest.onupgradeneeded = פוּנקצִיָה (מִקרֶה) {
const db = event.target.result;
// צור מאגר אובייקטים
const userObjectStore = db.createObjectStore("UserStore", {
 keyPath: "תְעוּדַת זֶהוּת",
 הגדלה אוטומטית: נָכוֹן,
 }); 
// צור אינדקסים
 userObjectStore.createIndex("שֵׁם", "שֵׁם", { ייחודי: שֶׁקֶר });
 userObjectStore.createIndex("אימייל", "אימייל", { ייחודי: נָכוֹן });
};

הוספת נתונים ל- IndexedDB

טרנזקציה ב- IndexedDB היא דרך לקבץ מספר פעולות קריאה וכתיבה לפעולה אחת. כדי להבטיח עקביות ושלמות נתונים, אם אחת מהפעולות בעסקה נכשלת, IndexedDB מחזיר את כל הפעולות לאחור.

כדי להוסיף נתונים למסד נתונים של IndexedDB, עליך ליצור עסקה במאגר האובייקטים שברצונך להוסיף את הנתונים ולאחר מכן להשתמש ב- לְהוֹסִיף() שיטה על העסקה כדי להוסיף את הנתונים.

אתה יכול ליצור עסקה על ידי קריאה ל- עִסקָה שיטה על אובייקט מסד הנתונים שלך. שיטה זו לוקחת שני ארגומנטים: השם(ים) של מאגר הנתונים שלך ומצב העסקה, שיכול להיות לקריאה בלבד (ברירת מחדל) או קרוא וכתוב.

לאחר מכן, התקשר ל objectStore() שיטה על העסקה והעבירו את השם של מאגר האובייקטים שאליו ברצונכם להוסיף נתונים. שיטה זו מחזירה הפניה למאגר האובייקטים.

לבסוף, התקשר ל לְהוֹסִיף() שיטה על מאגר האובייקטים והעבירו את הנתונים שברצונכם להוסיף:

const addUserData = (userData, db) => {
// פתח עסקה
const טרנזקציה = db.transaction("UserStore", "קרוא וכתוב");
// הוסף נתונים למאגר האובייקטים
const userObjectStore = transaction.objectStore("UserStore");
// בקש להוסיף userData
const request = userObjectStore.add (userData);
// לטפל באירוע הצלחה
 request.onsuccess = פוּנקצִיָה (מִקרֶה) {
//...
 };
// טפל בשגיאה
 request.onerror = פוּנקצִיָה (מִקרֶה) {
//...
 };
};

פונקציה זו יוצרת טרנזקציה עם מאגר האובייקטים "userStore" ומגדירה את המצב ל-"readwrite". לאחר מכן, הוא מקבל את מאגר האובייקטים ומוסיף את מידע משתמש אליו באמצעות לְהוֹסִיף שיטה.

אחזור נתונים מ- IndexedDB

כדי לאחזר נתונים ממסד נתונים IndexedDB, עליך ליצור עסקה במאגר האובייקטים שממנו ברצונך לאחזר את הנתונים ולאחר מכן להשתמש ב- לקבל() אוֹ קבל הכל() שיטה על העסקה כדי לאחזר את הנתונים בהתאם לכמות הנתונים שברצונך לאחזר.

ה לקבל() השיטה לוקחת ערך עבור המפתח הראשי של האובייקט שברצונך לאחזר ומחזירה את האובייקט עם המפתח המתאים ממאגר האובייקטים שלך.

ה קבל הכל() השיטה מחזירה את כל הנתונים במאגר אובייקטים. זה גם לוקח אילוץ אופציונלי כארגומנט ומחזיר את כל הנתונים התואמים מהחנות.

const getUserData = (id, db) => {
const טרנזקציה = db.transaction("UserStore", "לקריאה בלבד");
const userObjectStore = transaction.objectStore("UserStore");
// הגש בקשה לקבל את הנתונים
const request = userObjectStore.get (מזהה);
 request.onsuccess = פוּנקצִיָה (מִקרֶה) {
לְנַחֵם.log (request.result);
 };
 request.onerror = פוּנקצִיָה (מִקרֶה) {
// שגיאת טיפול
 };
};

פונקציה זו יוצרת עסקה עם מאגר האובייקטים "userStore" ומגדירה את המצב ל"קריאה בלבד". לאחר מכן הוא מאחזר נתוני משתמש עם המזהה התואם מחנות האובייקטים.

עדכון נתונים עם IndexedDB

כדי לעדכן נתונים ב-IndexedDB, עליך ליצור עסקה במצב "כתוב כתיבה". המשך על ידי אחזור האובייקט שברצונך לעדכן באמצעות ה- לקבל() שיטה. לאחר מכן שנה את האובייקט וקרא ל- לָשִׂים() שיטה במאגר האובייקטים כדי לשמור את האובייקט המעודכן בחזרה למסד הנתונים.

const updateUserData = (id, userData, db) => {
const טרנזקציה = db.transaction("UserStore", "קרוא וכתוב");
const userObjectStore = transaction.objectStore("UserStore");
// הגש בקשה לקבל את הנתונים
const getRequest = userObjectStore.get (מזהה);
// לטפל באירוע הצלחה
 getRequest.onsuccess = פוּנקצִיָה (מִקרֶה) {
// קבל את נתוני המשתמש הישנים
const user = event.target.result;
// עדכן את נתוני המשתמש
 user.name = userData.name;
 user.email = userData.email;
// הגש בקשה לעדכון הנתונים
const putRequest = userObjectStore.put (משתמש);
 putRequest.onsuccess = פוּנקצִיָה (מִקרֶה) {
// להתמודד עם הצלחה
 };
 putRequest.onerror = פוּנקצִיָה (מִקרֶה) {
// שגיאת טיפול
 };
 };
 getRequest.onerror = פוּנקצִיָה (מִקרֶה) {
// שגיאת טיפול
 };
};

פונקציה זו יוצרת עסקה כדי לקבל ולעדכן את הנתונים של מסד הנתונים שלך.

מחיקת נתונים מ- IndexedDB

כדי למחוק נתונים מ-IndexedDB, עליך ליצור עסקה במצב "כתוב כתוב". ואז התקשר ל לִמְחוֹק() שיטה במאגר האובייקטים כדי להסיר את האובייקט ממסד הנתונים:

const deleteUserData = (id, db) => {
const טרנזקציה = db.transaction("UserStore", "קרוא וכתוב");
const userObjectStore = transaction.objectStore("UserStore");
// הגש בקשה למחיקת הנתונים
const request = userObjectStore.delete (מזהה);
 request.onsuccess = פוּנקצִיָה (מִקרֶה) {
// להתמודד עם הצלחה
 };
 request.onerror = פוּנקצִיָה (מִקרֶה) {
// שגיאת טיפול
 };
};

פונקציה זו יוצרת עסקה שמוחקת את הנתונים עם המזהה המתאים מחנות האובייקטים שלך.

האם עליך להשתמש ב- IndexedDB או ב-localStorage?

הבחירה בין IndexedDB לבין מסדי נתונים אחרים בצד הלקוח, כגון localStorage, תלויה בדרישות האפליקציה שלך. השתמש ב-localStorage לאחסון פשוט של כמויות קטנות של נתונים. בחר IndexedDB עבור מערכי נתונים מובנים גדולים הדורשים שאילתות וסינון.