אחסון בדפדפן - localStorage, sessionStorage, Cookies ו-IndexedDB¶
בונים אפליקציה ומגיעים לרגע שבו צריך לשמור משהו בצד הלקוח - העדפת ערכת נושא כהה, פריטים בעגלת קניות, טוקן התחברות, או אולי מטמון שלם של נתונים לעבודה במצב לא מקוון. הבעיה היא שלדפדפן יש לא פחות מארבע דרכים שונות לשמור מידע, וכל אחת מהן בנויה למטרה קצת אחרת. בואו נעשה סדר.
localStorage - הזיכרון שנשאר¶
localStorage הוא כנראה האפשרות המוכרת ביותר, ומטרתו פשוטה: לשמור מידע שנשאר בדפדפן גם אחרי שסוגרים את הטאב, סוגרים את הדפדפן כולו, ואפילו מכבים את המחשב. המידע פשוט נשאר שם עד שמישהו מוחק אותו במפורש, בין אם זה המשתמש ובין אם זה קוד שלכם.
ה-API שלו סינכרוני וקל מאוד לעבודה - קריאה וכתיבה של מחרוזת בעזרת מפתח, בלי צורך בפעולות אסינכרוניות או קולבקים. המגבלה המרכזית היא הגודל, בדרך כלל סביב חמישה מגה בייט לכל דומיין, ועוד חשוב לזכור שאפשר לשמור בו רק מחרוזות, כך שכדי לשמור אובייקט צריך להמיר אותו ל-JSON ידנית.
יתרון חשוב נוסף - בניגוד לעוגיות, המידע ב-localStorage לא נשלח אוטומטית לשרת עם כל בקשה, מה שהופך אותו למתאים במיוחד להעדפות משתמש שרלוונטיות רק לצד הלקוח, כמו ערכת נושא או שפה מועדפת.
sessionStorage - אותו API, אבל זמני¶
sessionStorage משתמש בדיוק באותו ממשק תכנותי כמו localStorage, אותן פונקציות בדיוק לקריאה ולכתיבה, אבל עם הבדל מהותי אחד - המידע נמחק ברגע שהטאב נסגר. אם המשתמש פותח את אותו אתר בטאב חדש, הוא מתחיל עם sessionStorage ריק, גם אם יש לו כבר נתונים שמורים בטאב אחר.
זה הופך אותו למתאים למידע שרלוונטי רק להפעלה נוכחית של הדף - למשל שלב באשף רב שלבי שלא צריך להישמר אם המשתמש עוזב ומחליט לחזור למחרתיים, או מצב זמני של סינון בטבלה שלא צריך להישרד בין הפעלות.
Cookies בקצרה¶
עוגיות הן שיטת האחסון הכי ותיקה בדפדפנים, וההבדל המהותי שלהן מכל שאר האפשרויות הוא שהן נשלחות אוטומטית לשרת בכל בקשת HTTP שתואמת לדומיין שלהן. זו בדיוק הסיבה שהן שימושיות כל כך לניהול הפעלת התחברות שהשרת צריך לקרוא, אבל זה גם המחיר שלהן - כל בקשה, כולל בקשות לתמונות ולקבצי CSS, סוחבת איתה את המידע הזה, מה שמוסיף עומס לתעבורת הרשת. בנוסף, הגודל שלהן מוגבל לכמה קילובייט בודדים בלבד, הרבה פחות מ-localStorage.
יש כבר פוסט מפורט באתר שמתמקד ספציפית בעוגיות, כולל דגלי אבטחה ומנגנוני הגנה, אז אם זה מה שמעניין אתכם כדאי לקרוא אותו לעומק - כאן העוגיות מוזכרות רק כדי להשלים את התמונה הכוללת של אפשרויות האחסון.
IndexedDB - כשצריך יותר מכמה מגה¶
IndexedDB הוא הכי פחות מוכר מהארבעה, אבל גם הכי חזק. בניגוד לשלושת האחרים, ה-API שלו אסינכרוני, כלומר הפעולות שלו לא חוסמות את הקוד שרץ בזמן שהן מתבצעות, וזה נחוץ כי הוא בנוי לעבוד עם כמויות נתונים גדולות בהרבה - עשרות ואפילו מאות מגה בייט, תלוי בדפדפן ובמכשיר.
הוא גם לא מוגבל למחרוזות בלבד כמו localStorage, אלא יודע לשמור אובייקטים מובנים ישירות, כולל קבצים ותמונות. זה הופך אותו לכלי המתאים ביותר לאפליקציות שרוצות לעבוד גם במצב לא מקוון, לשמור מטמון גדול של נתונים, או לנהל מבנה מידע מורכב בצד הלקוח. המחיר הוא ממשק תכנותי מסורבל יותר, שדורש בדרך כלל עטיפה בספרייה נוחה יותר לעבודה.
אז מה בוחרים בפועל¶
הכלל הפשוט: אם המידע צריך להישאר קבוע ולא נשלח לשרת, ומדובר בכמות קטנה יחסית, localStorage הוא הבחירה הטבעית. אם המידע רלוונטי רק להפעלה נוכחית של הטאב, sessionStorage. אם השרת צריך לקרוא את המידע בכל בקשה, למשל לניהול הפעלת התחברות, זה המקום של עוגיות. ואם מדובר בכמות גדולה של נתונים מובנים, או צורך אמיתי בעבודה לא מקוונת, IndexedDB הוא הכלי הנכון.
הבנה מעמיקה של הכלים האלה, ומתי כל אחד מהם באמת נחוץ, היא חלק מרכזי ממה שמלמדים בקורס צד לקוח, כי הבחירה הנכונה בין אפשרויות האחסון משפיעה ישירות על ביצועים ועל חוויית המשתמש.
לסיכום¶
לדפדפן יש ארבע דרכים שונות לשמור מידע, וכל אחת נבנתה למטרה שונה - localStorage לקבוע ולא רגיש לגודל, sessionStorage לזמני, עוגיות למה שהשרת צריך לראות, ו-IndexedDB לכמויות גדולות ומורכבות. הבחירה הנכונה תלויה בשאלה פשוטה - כמה זמן המידע צריך לחיות, ומי צריך לגשת אליו.
אם יש לכם דילמה על איזו שיטת אחסון מתאימה למקרה שלכם, ספרו לנו בדיסקורד.