מדריך HTML5 – שימוש ב-Web Storage

Web storage משמש אותנו לשמירת מידע בדפדפנים התומכים בתקן HTML 5. מה שחשוב לדעת הוא שגם דפדפן אינטרנט אקספלורר 8 תומך ב-Web storage. בניגוד לעוגיות, שמוגבלות במידע, Web storage יכול לאחסן הרבה יותר מידע (באינטרנט אקספלורר הוא יכול לאחסן עד 10 מגהבייט של מידע). בניגוד לעוגיות, ב-Web storage אין תאריך תפוגה. Web storage אמין יותר מעוגיות ומומלץ להשתמש בו כשיכולים. ישנם בגדול שני סוגים של Web storage  – אחד המיועד למשך זמן ארוך יותר ואחד המיועד למשך זמן קצר.

Web storage כשמו כן הוא, מאפשר לשמור מידע. כאשר אנו משתמשים ב-JavaScript. שמירת המידע נעשית בkey=value.

טווח ארוך – localstorage

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

אתם יודעים מה? הכי טוב להדגים. בואו ונדגים כיצד להכניס מידע וכיצד להוציא מידע מ-localstorage.

הכנסת מידע:

localStorage.setItem('KEY', 'VALUE');

הוצאת מידע:

var value = localStorage.getItem('KEY');

מחיקת מידע:

localStorage.clear('KEY');

כאשר ה-KEY וה-VALUE כמובן יכולים להיות מה שבא לכם.

טווח קצר – sessionStorage

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

הכנסת מידע:

sessionStorage.KEY = 'VALUE';

הוצאת מידע:

var value = sessionStorage.KEY;

מחיקת מידע:

sessionStorage.KEY = null;

מאד פשוט להשתמש ב-Web Storage, גם לטווח הקצר וגם לטווח הארוך. כאמור, מדובר בפיצ'ר שזמין גם באינטרנט אקספלורר 8 ולפיכך בטוח למדי לשימוש.