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

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

הצגת נתוני IndexedDB

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

    התפריט IndexedDB

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

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

    מסד הנתונים 'notes'

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

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

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

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

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

    הצגת ערך ב-IndexedDB

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

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

    מיון של מאגר אובייקטים לפי אינדקס

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

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

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

הצגת מסד נתונים

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

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

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

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

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

שימוש בקטע קוד (snippet) כדי לקיים אינטראקציה עם 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. החלונית פינוי נפח האחסון