IE8 – DOM Storage

16 באפריל 2010

תגיות: , , ,
אין תגובות

 


אני מכין חומר בימים אלו על Internet Explorer 8 – למעשה כבר התחלתי לכתוב על זה בעבר, וכעת אני מתכוון להמשיך.

 

בפוסט הנוכחי אני אדבר על אחד מהתכונות הטובות ביותר שיש ב – IE8. Dom Storage

 

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

 

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

 

 

יש מקרים שבהם אתם יכולים לכתוב קוד לדפדפן מסויים – כמובן שאם אתם כותבים אתר לציבור הרחב (אתרי חדשות וכדו') אתם אמורים לתמוך בהרבה דפדפנים, אבל אם אתם כותבים אתר פנימי (אתר לשימוש עובדי משרד הפנים – לא האתר שמשמש את הציבור הרחב אלא האתר הפנימי של העובדים) אפשר בהחלט לדרוש שישתמשו בדפדפן מסויים. במקרה ואתם יודעים שישתמשו ב – IE8 מן הסתם לא תרצו יותר לשמור מידע בעוגייות (אלא במקרי קצה) ותעדיפו לעבוד אם ה – DOM Stroage – הוא הרבה יותר פשוט לעבודה, ניתן לשמור בו כמויות עצומות של מידע (ביחס לעוגיות) והוא לא נשלח לשרת בכל Request.

 

(דרך אגב למי שמכיר ה – DOM Storage הוא התחליף ל – UserData בגרסאות קודמות של IE)

 

השוואה בין DOM Storage לבין עוגיות

 

 



































  Cookie DOM Storage
גודל מקסימלי 4KB (IE8 – 10KB) 10MB
מוכר בשרת נשלחים עם כל בקשה לא מוכר
הרשאות לפי דומיין ותיקייה לפי דומיין בלבד
גישה חיפוש על מחרוזות בעזרת אובייקטים ומתודות
אירועים אין בזמן שינוי והוספה ובזמן סיום הכתיבה
מחיקה לפי זמן ידנית או בזמן סגירת הדפדפן
סוג מידע מחרוזות מחרוזות מספרים וערכים בוליאניים

 

 

 

אז איך משתמשים בזה:

 

למעשה יש שני אובייקטים שונים – הראשון הוא sessionStorage והשני הוא localStorage. ההבדל היחיד ביניהם הוא שה – sessionStorage חי כל עוד שהטאב הנוכחי פתוח, לעומת ה – localStorage שחי כל עוד שלא מחקו אותו.

 

השימוש הוא ממש פשוט, לדוגמא:

 



<input type="checkbox" onchange="sessionStorage.insurance = this.checked">


 

בדוגמא הזאת יצרנו (אם לא היה קיים) משתנה בשם insurance  ב – sessionStorage וכעת אפשר בכל מקום לשאול

 



if (sessionStorage.insurance)


 

דוגמא נוספת (להצגת מספר הפעמים שמשתמש ביקר בדף מסוים)

 



<p>


  You have viewed this page <span id="count"> an untold number of</span>


  time(s).


</p>


<script>


    var storage = window.localStorage;


    if (!storage.pageLoadCount) {


        storage.pageLoadCount = 0;


    }


    storage.pageLoadCount = parseInt(storage.pageLoadCount, 10) + 1;


    document.getElementById('count').innerHTML = storage.pageLoadCount;


</script>


 

 

 

בנוסף לזה יש ל – storage מספר מתודות שימושיות – תוכלו לקרוא עליהם כאן 

מתודה מעניינת היא remainingSpace שמחזירה את גודל המקום הפנוי (בבתים).

 

בנוסף היכולת לרוץ בקלות בלולאה על כל הערכים בעזרת המתודה key ו – getItem

 



for (var i = 0; i < window.localStorage.length; i++) {


    var key = window.localStorage.key(i);


    var data = window.localStorage.getItem(key);


}


 

יש גם שני אירועים מעניינים שאפשר להירשם אליהם – onstorage כשמשהו משתנה ו – onstoragecommit כשה – localStorage סיים לשמור את עצמו בדיסק (קבצי xml)

הוסף תגובה
facebook linkedin twitter email

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *