במדריך הזה מוסבר איך להשתמש בכלי הפיתוח ל-Chrome כדי להציג ולשנות נתונים של IndexedDB. בהנחה שאתם מכירים את כלי הפיתוח. אם לא, ראה תחילת העבודה. אנחנו מניחים גם שאתם מכירים את IndexedDB. אם לא, ראה שימוש ב-IndexedDB.
הצגה של נתוני IndexedDB
לוחצים על הכרטיסייה Application (אפליקציה) כדי לפתוח את החלונית Application (אפליקציה). הרחב את התפריט IndexedDB כדי לראות אילו מסדי נתונים זמינים.
איור 1. התפריט IndexedDB
- הערות – https://mdn.github.io מייצג מסד נתונים שבו notes הוא השם של מסד הנתונים, והמקור שממנו אפשר לגשת למסד הנתונים הוא https://mdn.github.io.
- notes הוא מאגר של אובייקטים.
- title ו-body הם אינדקסים.
לוחצים על מסד נתונים כדי לראות את המקור ואת מספר הגרסה שלו.
איור 2. מסד הנתונים של הערות
לוחצים על מאגר אובייקטים כדי לראות את צמדי המפתח/ערך שלו.
איור 3. אחסון האובייקט notes
- סה"כ רשומות הוא המספר הכולל של צמדי מפתח/ערך במאגר האובייקטים.
- ערך מחולל המפתח הוא המפתח הזמין הבא. השדה הזה מוצג רק כשמשתמשים במחוללי מפתחות.
לוחצים על תא בעמודה ערך כדי להרחיב את הערך הזה.
איור 4. הצגת ערך IndexedDB
לוחצים על אינדקס, כמו title או body באיור 6 שבהמשך, כדי למיין את אחסון האובייקטים לפי הערכים של אותו אינדקס.
איור 5. מאגר אובייקטים שממוין בסדר אלפביתי לפי מפתח title שלו
רענון של נתוני IndexedDB
ערכי IndexedDB בחלונית Application לא מתעדכנים בזמן אמת. לוחצים על רענון כשמציגים אחסון אובייקטים כדי לרענן את הנתונים שלו, או מציגים מסד נתונים ולוחצים על רענון מסד נתונים כדי לרענן את כל הנתונים.
איור 6. הצגת מסד נתונים
עריכת נתוני IndexedDB
לא ניתן לערוך מפתחות וערכים ב-IndexedDB מהחלונית Application. עם זאת, מאחר שלכלי הפיתוח יש גישה להקשר של דפים, אפשר להריץ קוד JavaScript בתוך כלי הפיתוח שמבצע עריכה של נתוני IndexedDB.
עריכת נתוני IndexedDB באמצעות קטעי קוד
קטעי קוד מאפשרים לאחסן ולהפעיל בלוקים של קוד JavaScript בכלי פיתוח. כשמריצים קטע טקסט, התוצאה מתועדת במסוף. ניתן להשתמש בקטע snippet כדי להריץ קוד JavaScript שעורך מסד נתונים IndexedDB.
איור 7. שימוש בקטע קוד לאינטראקציה עם IndexedDB
מחיקת נתוני IndexedDB
מחיקה של צמד מפתח/ערך של IndexedDB
- הצגת מאגר אובייקטים מסוג IndexedDB.
לוחצים על צמד המפתח/ערך שרוצים למחוק. כלי הפיתוח מדגישים את הצבע בכחול כדי לציין שהוא נבחר.
איור 8. בחירת צמד מפתח/ערך כדי למחוק אותו
מקישים על המקש Delete או על Delete selected .
איור 9. איך אחסון האובייקטים נראה אחרי מחיקת צמד המפתח/ערך
מחיקת כל צמדי מפתח/ערך במאגר אובייקטים
הצגת מאגר אובייקטים מסוג IndexedDB.
איור 10. הצגת מאגר אובייקטים
לוחצים על ניקוי אחסון אובייקטים .
מחיקת מסד נתונים IndexedDB
- מציגים את מסד הנתונים IndexedDB שרוצים למחוק.
לוחצים על מחיקת מסד נתונים.
איור 11. הלחצן מחיקת מסד נתונים
מחיקת כל אחסון IndexedDB
- פותחים את החלונית ניקוי האחסון.
- מוודאים שתיבת הסימון IndexedDB מופעלת.
לוחצים על ניקוי נתוני אתר.
איור 12. החלונית ניקוי האחסון