IE8 - DOM Storage
אני מכין חומר בימים אלו על 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)