3.7 אחסון מקומי תרגול

תרגול אחסון מקומי¶

תרגיל 1 - שמירת שם¶

בנו דף פשוט עם:
- שדה input לשם
- כפתור "save"
- הודעת פתיחה

דרישות:
- כשהמשתמש כותב שם ולוחץ save, שמרו את השם ב-localStorage
- כשהדף נטען, בדקו אם יש שם שמור. אם כן, הציגו "welcome back, [name]!" במקום "welcome, stranger!"
- הוסיפו כפתור "forget me" שמוחק את השם מ-localStorage ומחזיר את ההודעה ל-"welcome, stranger!"
- ודאו שזה עובד גם אחרי רענון הדף

תרגיל 2 - מונה לחיצות¶

בנו מונה שזוכר את מספר הלחיצות:
- הציגו מספר על המסך (מתחיל מ-0)
- כפתור "+" מגדיל ב-1
- כפתור "-" מקטין ב-1
- כפתור "reset" מאפס ל-0
- שמרו את המונה ב-localStorage אחרי כל שינוי
- כשטוענים את הדף מחדש, המונה חוזר לערך האחרון שנשמר

תרגיל 3 - בורר ערכת צבעים¶

בנו בורר theme עם 3 אפשרויות:
- בהיר (light) - רקע לבן, טקסט שחור
- כהה (dark) - רקע כהה, טקסט לבן
- כחול (blue) - רקע כחול כהה, טקסט לבן

דרישות:
- 3 כפתורים לבחירת theme
- שינוי ה-theme משנה מיד את צבעי הדף (background ו-color)
- שמרו את הבחירה ב-localStorage
- כשטוענים את הדף, החילו את ה-theme השמור
- הכפתור של ה-theme הנוכחי צריך להיות מודגש (class="active")

תרגיל 4 - רשימת מועדפים¶

בנו רשימה של 10 סרטים (מוצגים ככרטיסים) עם אפשרות להוסיף למועדפים:
- כל כרטיס מכיל שם סרט וכפתור "add to favorites" / "remove from favorites"
- רשימת המועדפים נשמרת ב-localStorage
- כשטוענים את הדף, כפתורי הסרטים שכבר במועדפים מראים "remove from favorites"
- הציגו בצד מונה "X favorites" שמתעדכן בזמן אמת
- הוסיפו כפתור "clear all favorites" שמוחק את כל המועדפים

תרגיל 5 - טופס עם שמירה אוטומטית¶

בנו טופס יצירת קשר עם שמירה אוטומטית:
- שדות: שם, אימייל, נושא (select), הודעה (textarea)
- בכל שינוי בשדה כלשהו (אירוע input), שמרו את כל הנתונים ב-localStorage
- כשטוענים את הדף, שחזרו את הנתונים מ-localStorage ומלאו את השדות
- הציגו הודעת "draft saved" שנעלמת אחרי 2 שניות אחרי כל שמירה
- כפתור "clear draft" שמנקה את ה-localStorage ומרוקן את הטופס
- כשהטופס נשלח בהצלחה (submit), מחקו את הטיוטה מ-localStorage

תרגיל 6 - יומן רשומות¶

בנו אפליקציית יומן שמאחסנת רשומות:
- שדה textarea לכתיבת רשומה חדשה
- כפתור "add entry" שמוסיף את הרשומה עם תאריך ושעה
- כל הרשומות מוצגות ברשימה (מהחדשה לישנה)
- כל רשומה כוללת: תאריך ושעה, הטקסט, כפתור מחיקה
- כל הרשומות נשמרות ב-localStorage כמערך
- הוסיפו שדה חיפוש שמסנן רשומות לפי טקסט
- הציגו מונה "X entries"

תרגיל 7 - Storage Wrapper¶

בנו עטיפה (wrapper) ל-localStorage שמספקת:

let storage = {
  get: function (key, defaultValue) { /* ... */ },
  set: function (key, value) { /* ... */ },
  remove: function (key) { /* ... */ },
  has: function (key) { /* ... */ },
  clear: function () { /* ... */ },
  getAll: function () { /* ... */ }
};

דרישות:
- get - מחזיר ערך מפוענח (JSON.parse). אם אין ערך, מחזיר את defaultValue
- set - שומר ערך מקודד (JSON.stringify)
- remove - מוחק key ספציפי
- has - בודק אם key קיים (מחזיר boolean)
- clear - מנקה הכל
- getAll - מחזיר אובייקט עם כל הkey-value pairs
- טיפול בשגיאות - אם JSON.parse נכשל, החזירו את המחרוזת הגולמית
- אחרי שבניתם את ה-wrapper, השתמשו בו כדי לבנות רשימת משימות קטנה (הוספה, מחיקה, סימון כהושלם)

תרגיל 8 - תקשורת בין טאבים¶

בנו הדגמה של תקשורת בין טאבים באמצעות אירוע storage:
- שדה input לכתיבת הודעות
- כפתור "send" ששומר את ההודעה ב-localStorage
- אזור שמציג הודעות שהתקבלו מטאבים אחרים
- כל הודעה מציגה את הזמן שנשלחה

דרישות:
- השתמשו באירוע storage כדי לזהות שינויים שבוצעו בטאבים אחרים
- פתחו את הדף בשני טאבים ובדקו שהודעה שנשלחת מטאב אחד מופיעה בשני
- הציגו היסטוריית הודעות (נשמרת ב-localStorage)
- הוסיפו כפתור "clear history" שמנקה את כל ההודעות
- ההודעה לא צריכה להופיע בטאב ששלח אותה (רק בטאבים אחרים)

תרגיל 9 - מערכת ציונים גבוהים¶

בנו מערכת high scores למשחק דמיוני:
- שדה לשם השחקן ושדה לציון (number)
- כפתור "add score"
- טבלת top 10 שמציגה את הציונים הגבוהים ביותר (ממוינים מהגבוה לנמוך)
- כל שורה מציגה: מיקום, שם, ציון, תאריך
- הנתונים נשמרים ב-localStorage
- אם יש יותר מ-10 ציונים, שמרו רק את ה-top 10
- הוסיפו הדגשה ויזואלית לציון שנוסף הכי לאחרונה
- כפתור "reset scores" שמוחק את כל הציונים