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

Sofia Emelianova
Sofia Emelianova

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

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

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

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

    צמדי המפתח/ערך של 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 מהמסוף