הצגה ושינוי של נתוני IndexedDB

Kayce Basques

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

הצגת נתוני IndexedDB

1. לוחצים על הכרטיסייה Application (אפליקציה) כדי לפתוח את החלונית Application (אפליקציה). מרחיבים את התפריט IndexedDB כדי לראות אילו מסדי נתונים זמינים.

   

   איור 1. התפריט IndexedDB

   • notes - https://mdn.github.io מייצג מסד נתונים, כאשר notes הוא שם מסד הנתונים ו-https://mdn.github.io הוא המקור שיכול לגשת למסד הנתונים.
   • notes הוא מאגר אובייקטים.
   • title ו-body הם אינדקסים.

הערה: מגבלה ידועה מסדי נתונים של צד שלישי לא גלויים. לדוגמה, אם משתמשים ב-<iframe> כדי להטמיע מודעה בדף, ורשת המודעות משתמשת ב-IndexedDB, נתוני ה-IndexedDB של רשת המודעות לא יהיו גלויים. בעיה מס' 943770

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

   

   איור 2. מסד הנתונים notes

2. לוחצים על מאגר אובייקטים כדי לראות את צמד המפתח/ערך שלו.

   אזהרה: הנתונים ב-IndexedDB לא מתעדכנים בזמן אמת. רענון נתוני IndexedDB

   

   איור 3. מאגר האובייקטים notes

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

3. לוחצים על תא בעמודה ערך כדי להרחיב את הערך הזה.

   

   איור 4. הצגת ערך ב-IndexedDB

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

   

   איור 5. מאגר אובייקטים שממוין לפי סדר אלפביתי לפי המפתח title

רענון הנתונים ב-IndexedDB

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

איור 6. הצגת מסד נתונים

עריכת נתונים ב-IndexedDB

לא ניתן לערוך מפתחות וערכים של IndexedDB מהחלונית Application. עם זאת, מכיוון של-DevTools יש גישה להקשר הדף, אפשר להריץ ב-DevTools קוד JavaScript שעורך נתונים ב-IndexedDB.

עריכת נתוני IndexedDB באמצעות נכסי מידע מובנה

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

איור 7. שימוש בקטע קוד (snippet) כדי לקיים אינטראקציה עם IndexedDB

מחיקת נתוני IndexedDB

מחיקה של צמד מפתח/ערך ב-IndexedDB

1. צפייה במאגר אובייקטים של IndexedDB

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

   

   איור 8. בחירת צמד מפתח/ערך כדי למחוק אותו

3. לוחצים על המקש Delete או לוחצים על Delete Selected .

   

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

מחיקה של כל זוגות המפתח/ערך במאגר אובייקטים

1. צפייה במאגר אובייקטים של IndexedDB

   

   איור 10. הצגת מאגר אובייקטים

2. לוחצים על ניקוי אחסון אובייקטים .

מחיקת מסד נתונים של IndexedDB

1. מציגים את מסד הנתונים של IndexedDB שרוצים למחוק.

2. לוחצים על Delete database.

   

   איור 11. הלחצן Delete database (מחיקת מסד נתונים)

מחיקת כל האחסון ב-IndexedDB

1. פותחים את החלונית פינוי שטח אחסון.
2. מוודאים שהתיבה IndexedDB מסומנת.

3. לוחצים על ניקוי נתונים מאתרים.

   

   איור 12. החלונית פינוי נפח האחסון