הצגה ועריכה של האחסון המקומי

Sofia Emelianova
Sofia Emelianova

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

הצגת מפתחות וערכים של localStorage

  1. פותחים את כלי הפיתוח באתר שרוצים לבדוק.

  2. עוברים אל Application > Storage ומרחיבים את Local Storage. לוחצים על דומיין כדי לראות את צמדי המפתח/ערך שלו.

    צמדי המפתח/ערך של youtube.com.

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

    הצגת הערך של המפתח שנבחר.

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

סינון צמדי מפתח/ערך

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

סינון של צמדי מפתח/ערך שלא מכילים את המחרוזת 'has'.

יצירת צמד מפתח/ערך חדש של localStorage

  1. הצגת זוגות המפתח/ערך של הדומיין localStorage לדוגמה, בדף הדגמה הזה.
  2. לוחצים לחיצה כפולה על החלק הריק בטבלה. DevTools יוצר שורה חדשה ומתמקד בסמן בעמודה Key.
  3. מזינים צמד מפתח/ערך חדש.

עריכת מפתחות או ערכים של localStorage

  1. הצגת צמדי המפתח/ערך של הדומיין localStorage לדוגמה, בדף הדגמה הזה.
  2. לוחצים לחיצה כפולה על תא בעמודה Key או Value כדי לערוך את המפתח או את הערך.
  3. כדי להחיל את השינויים, צריך לרענן את הדף.

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

  1. הצגת צמדי המפתח/ערך של הדומיין localStorage לדוגמה, בדף הדגמה הזה.
  2. לוחצים על צמד מפתח/ערך כדי לבחור אותו.
  3. לוחצים על מחיקה. מחיקה בסרגל הפעולות בחלק העליון כדי להסיר את הצמד שנבחר. מחיקת צמד המפתח/ערך שנבחר.
  4. לחלופין, לוחצים על ניקוי הכול. ניקוי הכול כדי להסיר את כל הצמדים.

אינטראקציה עם localStorage מהמסוף

מכיוון שאפשר להריץ JavaScript ב-Console, ומכיוון של-Console יש גישה להקשרי JavaScript של הדף, אפשר לקיים אינטראקציה עם localStorage מ-Console.

  1. ב-DevTools, פותחים את המסוף.
  2. אם רוצים לגשת לזוגות המפתח-ערך של localStorage בדומיין אחר ולא בדף שבו נמצאים, בוחרים את ההקשר של JavaScript הרצוי בתפריט הנפתח של ההקשר בסרגל הפעולות בחלק העליון.
  3. מריצים את הביטויים של localStorage במסוף, בדיוק כמו שמריצים אותם ב-JavaScript.

אינטראקציה עם localStorage מהמסוף