שימוש ב-Web Storage כמנגנון שמירת מידע בצד לקוח [מדריך]

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

עיבוד תמונה

הפוסט נכתב בחסות מכללת סלע, אשר עורכת החודש (מרץ) את כנס Sela Developer Practice, שם תוכלו ללמוד על כל החידושים לפיתוח עבור חלונות 8. לפרטים נוספים והרשמה


Web Storage הוא תקן שהיה קיים בעבר תחת תקן ה-HTML5 אך הפך לתקן נפרד בפני עצמו, אם כי עדיין משוייך למכלול התקנים של HTML5. נכון להיום, הוא קיים כ-Candidate Recommendation בתקני W3C אבל מיושם בכל הדפדפנים העיקריים (Chrome, FireFox, Opera והחל מ-Internet Explorer 8). בפוסט זה אסקור מהו Web Storage ואיך ניתן להשתמש בו כבר היום בעת פיתוח אתרי/מערכות אינטרנט.

עולם האינטרנט לפני ה-Web Storage

הצורך לשמור נתונים או מצב (state) נתון בצד לקוח הוא משהו מאוד נדרש בעולם האינטרנט שאינו שומר נתונים או מצבים (stateless). בעבר ניתן היה וניתן גם היום להשתמש ב-cookies על מנת לשמור נתונים בצד הלקוח או שניתן היה לעשות שימוש במימושים פנימיים של דפדפנים כמו למשל userData של Internet Explorer. בעוד שהמימושים הפנימיים של הדפדפנים לא היו תיקניים, ולכן השימוש בהם יכול היה לגרום לחוסר תאימות בין הדפדפנים השונים, מנגנון ה-cookies שהיה חלק מתקני האינטרנט היה מאוד מוגבל. חלק מהמוגבלות שלו הייתה בגודל של כל cookie (4KB), בעצם העובדה שהוא נשלח מצד לקוח לצד שרת וחוזר חלילה על כל בקשת HTTP, הוא היה ניתן לביטול על ידי המשתמשים ועוד. הצורך במנגנון טוב יותר עלה ותקן ה-Web Storage בא לעולם.

מה זה Web Storage?

Web Storage הוא מנגנון שמירת נתונים בצד לקוח הבנוי כ-key/value dictionary כאשר כל הנתונים המאוחסנים בו הם בצורת מחרוזות. הנתונים שקיימים ב-Web Storage יכולים להישמר לא רק בזמן ריצת האתר/המערכת אלא גם כאשר המשתמש סוגר את הדפדפן או את החלון/טאב. שלא כמו cookies, המידע שנשמר בWeb Storage- נשמר בדפדפן ואינו נשלח לצד השרת ומכאן שאינו מכביד על הרשת. התקן אינו מגדיר את כמות המידע והגודל של Web Storage אלא רק שהוא אמור להיות מוגבל על ידי הדפדפן. במרבית הדפדפנים כל domain מקבל מקום איחסון של כ-5 מגה בתוך הWeb Storage.

ה-Web Storage מכיל בתוכו שני אובייקטי אחסון שזהים ב-API שהם חושפים אך שונים באופן זמן החיים שלהם:

sessionStorage: הנתונים באובייקט האחסון נגישים לכל דף מהאתר שפתוח באותו חלון/טאב.

localStorage: הנתונים באובייקט האחסון נגישים לכל חלון/טאב פתוח שפונה לאותו ה-domain וגם נשמרים לאחר סגירת הדפדפן או החלון/טאב.

Web Storage API: ה-API של Web Storage הוא פשוט ומכיל את המאפיינים והפונקציות הבאות:
length: מחזיר את מספר הצמדים (key/value) שמאוחסנים בתוך ה-storage.
Key n: מחזיר את המפתח באינדקס ה-n שקיים ב-storage.
getItem key: מאחזר את הערך שמשוייך לפרמטר המפתח. אם לא קיים ערך שיש לו את המפתח יוחזר null. כדי לשים לב שהערך החוזר הוא מסוג מחרוזת ולכן יהיה צורך לבצע parse במידה ונשמר ערך מספרי או אובייקט JSON.
setItem key, value: מוסיף ערך חדש ל-storage עם המפתח המתאים.
removeItem key: מסיר את הערך שמשוייך לפרמטר המפתח. אם לא קיים ערך כזה הפונקציה לא עושה כלום.
clear: מנקה את ה-storage מכל הצמדים הקיימים בו.

להלן דוגמת שימוש ב-API על מנת להוסיף ערך ולאחר מכן לאחזר אותו לתוך המשתנה val:

localStorage.setItem("key", "value");
var val = localStorage.getItem("key");

בדוגמה ניתן לראות את השימוש באובייקט ה-localStorage על מנת להוסיף את הצמד key/value ולאחר מכן איחזור של value על פי המפתח key. ניתן להשתמש ב-storage גם ללא הפונקציות אלא ישירות להוסיף לאובייקט את הצמד באופן הבא שזהה בפונקציונאליות לדוגמת קוד הראשונה:

localStorage.key = "value";
var val = localStorage.key;

אופציה נוספת היא להתייחס ל-storage כאל מערך JavaScript ואז לקבל את אותה הפונקציונאליות מהדוגמאות הקודמות באופן הבא:

localStorage["key"] = "value";
var val = localStorage["key"];

ה-Web Storage חושף לא רק פונקציות אלא גם אירוע שנקרא storage. אירוע ה-storage מתרחש בכל שינוי שחל ב-storage ומאפשר למתכנת להגיב למקרים של שינויים החלים ב-storage. הפונקציות הבאות יגרמו להפעלת אירוע ה-storage: setItem, removeItem או clear. דוגמא לשימוש באירוע ה-storage יכולה להיות כאשר המתכנת רוצה לבצע בדיקת ולידציה על הערך שמוכנס ל-storage. הוא יכול לבצע את הבדיקה בתוך ה-handler של האירוע ולמנוע את ההכנסה ל-storage במידה והולידציה נכשלה. הדוגמה הבאה ממחישה איך להירשם לאירוע ה-storage:

window.addEventListener("storage", handleStorageEvent, false);
function handleStorageEvent(eventData) {
    // Do something
}

הפרמטר eventData מהדוגמה הקודמת מכיל את המאפיינים הבאים:

key – המפתח שמבוצע על הערך שלו שינוי.

oldValue – הערך הקודם שמשוייך למפתח.

newValue – הערך העכשווי שישוייך למפתח.

url – הכתובת של הדף שהמפתח שעובר שינוי משוייך אליו.

storageArea – מצביע ל-storage שעליו מבוצע העדכון.

דוגמת שימוש ב-Web Storage

הדוגמה הבאה ממחישה שימוש ב-Web Storage על מנת לקבל את מספר הפעמים שבוצעה הטעינה של דף:

בדוגמה כאשר התוכן של ה-DOM סיים להיטען מורצת הפונקציה pageLoadCounter אשר בתחילה בודקת אם ב-localStorage קיים המפתח loadCounter. במידה ולא המפתח מאותחל עם הערך 0. במידה והמפתח קיים, מקדמים את הערך שמשוייך אליו באחד ומציגים אותו בתוך ה-span שה-id שלו הוא counter.

סיכום

Web Storage הוא תקן חדש המשוייך ל-HTML5 אשר מנסה לגשר על פערים הקיימים בתקן 4HTML ביכולת לשמור מידע בצד הלקוח. ישנן דרכים נוספות לשמור מידע בצד לקוח כמו cookies או תקן ה-IndexedDB, שנמצא בתהליך פיתוח ב-HTML5, אשר ניתן לעשות בהן שימוש יחד עם ה-Web Storage על מנת לקבל יכולות אחסון נתונים בצד לקוח באופן יותר אפקטיבי מבעבר. בכנס ה-SDP הקרוב תוכלו ללמוד על הטכנולוגיות שיש ל-HTML5 להציע ועל עוד נושאים רבים אחרים כמו Windows 8, .NET Framework 4.5 ועוד.


הפוסט בחסות מכללת סלע


הפוסט בחסות מכללת סלע, אשר עורכת ב-22 במרץ את כנס Sela Developer Practice. רוצים לקבל כרטיס חינם לאחת מהסדנאות בכנס המפתחים השנתי ולזכות בחולצת T-Shirt מגניבה של חלונות 8 במתנה?

כנסו לעמוד התחרות וכתבו לנו בתגובות סלוגן מקורי שמשקף את היכולות החדשות בחלונות 8 ו\או ממשק המטרו החדש וחמשת המגיבים שיכתבו את הסלוגנים המגניבים ביותר, יזכו בכרטיס כניסה בשווי 800 ש"ח לאחת מסדנאות הכנס לפי בחירתם (בהתאם לזמינות המקומות בכל סדנה).

לפרטים נוספים והרשמה לכנס

גיל פינק

יועץ בכיר וארכיטקט מחברת Sela Group. ביצע בעבר תפקידי פיתוח כמתכנת בכיר, כראש צוות, כמנהל פיתוח וכיועץ בכיר. בעל תואר Microsoft MVP בנושאי Data Platform Development ובעל הסמכת MCPD. אוהב לחקור וללמוד טכנולוגיות חדשות בעיקר בתחומי עיצוב ופיתוח תשתיות.

הגב

10 Comments on "שימוש ב-Web Storage כמנגנון שמירת מידע בצד לקוח [מדריך]"

avatar
Photo and Image Files
 
 
 
Audio and Video Files
 
 
 
Other File Types
 
 
 
Sort by:   newest | oldest | most voted
אור
Guest

תודה על הכתבה, מעניין מאוד.
מספר שאלות:
1. האם sessionStorage הוא בעצם משתנה הsession המוכר לנו, שפה הוא הוא ממומש דרך צד הלקוח ולא צד השרת?
2. איך בדיוק הדפדפן מתייחס לכל עניין הwebstorage-localstorage איזה שליטה יש למשתמש ב"ניקוי העקבות" שלו, ומה אורך החיים של הנתונים האלה?
3. מבחינה תיאורטית, איזה מימושים יותר מתקדמים ניתן ליצור עם המנגנון הזה?

גיל פינק
Guest
הי אור, 1. אין הקבלה בין הsession המוכר לך לבין sessionStorage. sessionStorage קיים כל עוד החלון/טאב חי והוא מנגנון client side. עדיין יהיה צורך להשתמש בכלים כמו cookies על מנת לעבוד עם מנגנון הsession כמו למשל בHttpSession בASP.NET. 2. המשתמש יכול לנקות את הנתונים בתוך הWeb Storage. בהקשר של localStorage הנתונים נשמרים גם לאחר סגירה של הדפדפן וכל עוד המשתמש לא ניקה אותם או המפתח לא ניקה אותם בעזרת הפונקציה removeItem או clear. בהקשר של הsessionStorage הנתונים קיימים כל עוד החלון/טאב פתוח או שהמשתמש לא ניקה אותם או המפתח לא ניקה אותם בעזרת הפונקציה removeItem או clear. 3. ניתן להשתמש… Read more »
אור
Guest

גיל,
תודה רבה על ההתייחסות.
אור.

גיל פינק
Guest

אור, בכיף :-)

רותם
Guest

נשמע נחמד מה לגבי אבטחה ? אני יכול לגשת לנתונים מדומיין אחר ? מה לגבי Iframe ?

גיל פינק
Guest

הי רותם,

Web Storage עובדים פר דומיין כלומר לא ניתן לגשת לWeb Storage של דומיינים אחרים. בנוסף לזה כמו שרשמתי בתגובה לאור צריל להתייחס לכל מידע שנשמר בתוך Web Storage כנגיש ולכן מומלץ לא להכניס מידע סודי או מידע מאובטח לתוך הWeb Storage.

לגבי iFrame, אישית אני מנסה תמיד להמנע משימוש באלמנט המדובר. במידה וחייבים להשתמש בו אם הsrc של הiFrame והדף מקורם באותו הdomain יהיו להם אותם הWeb Storage. במידה והם לא מאותו דומיין יהיה לכל אחד מהם Web Storage שונה.

בברכה,
גיל

רותם
Guest

נשמע נחמד מה לגבי אבטחה ? אני יכול לגשת לנתונים מדומיין אחר ? מה לגבי Iframe ?

רותם
Guest

הכוונה הייתה שאני אשים את האתר שלך ב Iframe נסתר ואגש אליו באמצעות document.frames ויעביר נתונים ל parent נראה לי שהבנת לאן אני חותר

דוד
Guest

בפוסט חסרה לי המוטיבציה.
מתי אני אמור להשתמש ב-web storage במקום ב-Cookie?
רק בגלל שה-cookie מוגבל ל-4K? רק בגלל שזה מעמיס על הרשת? (זה רק 4K וגם לזה אף אחד לא מגיע)

גיל פינק
Guest

תודה על התגובה דוד.
עקרונית Web Storage אמור לתת מענה לשמירת מידע בצד לקוח וכך לחסוך בתעבורה של מידע שפעם היה עובר בפניות לצד שרת.
הוא לא אמור להחליף cookies אבל בהחלט אמור לתת אופציה לעבוד עם מידע פשוט כמו למשל lookups בצד הלקוח. למשל ניתן להוריד לתוכו מידע שמשמש drop down lists ולחסוך לאחר מכן הרבה תעבורה ברשת כדי לקבל את המידע הנ"ל.

בברכה,
גיל

wpDiscuz

תגיות לכתבה: