ניצוצות ברשת

אינטרנט? לא צריך אינטרנט במקום אליו אנחנו גולשים

איך מסתדרים בלי חיבור לרשת ב-html5: שמירת נתונים מקומית על ידי הדפדפן

שתפו כתבה במיילשליחת הכתבה באימייל
יונית רושו

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

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

עוד על html5 ועל המודלים להתקשרות עם רכיבים וממשקים (API) תוכלו לקרוא בטור של שבוע שעבר: איך תשימו את האפליקציות שלכם על המפה.

בלי אינטרנט?

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

למה בכלל לשמור את הנתונים בדפדפן?

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

שמירת הנתונים בדפדפן קיימת, בין היתר, למטרה זו.

זו לא הפעם הראשונה שנולד הצורך לשמור נתונים על מחשב הגולש. cookies הוא מושג ידוע, המאפשר לשמור מידע, כמו שם משתמש וסיסמא, בקובץ על המחשב שלך כדי שבפעם הבאה שתגיע לאתר הזה, השם והסיסמא כבר יהיו אוטומטית מוזנים ושמורים ואתה תהיה "מחובר". השימוש ב- cookies עצום ברחבי האינטרנט. גם לטכנולוגיית פלאש היו המצאות ופתרונות משלה (local shared objects) שהיום פחות רלוונטיים עם דעיכתה של פלאש. היו פתרונות נוספים כ- Google Gears, ועוד.

מי משתמש בשמירה מקומית?

גוגל דוקס (שהולכים ומשתלבים ב-Google Drive) משתמשים בכך כדי לאפשר עריכת מסמכים אוף ליין, במיוחד במובייל.

ג'ימייל משתמש בכך כדי לאפשר קריאת וכתיבת מיילים אוף ליין ושליחתם או שמירתם בהתחברות חזרה לאון ליין, במיוחד במובייל.

אפליקציות ווב הכתובות ב- html5 עושות זאת על מנת להפחית משמעותית את משקלן.

משחקים הן באתרי אינטרנט ובעיקר במובייל. שמירת המצב האחרון של המשחק לפני הניתוק מהאינטרנט או סגירת המשחק והצגת המצב בו עזב הגולש בפעם הבאה שהוא מתחבר.

דוגמאות

לחצו להגדלה

הדוגמה הבאה משתמשת הן ב- geolocation והן ב- local strorage. בפעם הראשונה שנכנסים לעמוד זה, מתבקש הגולש לאשר זיהוי מיקום והקואורדינטות נרשמות. הגולש בוחר את מצב הרוחב שלו ולוחץ על שמור. בפעם הבאה שהגולש נכנס לעמוד זה, החירה שלו מהפעם הקודמת מוצגת לפניו.

דוגמא נוספת של משחק ששומר אוטומטית, ללא צורך בלחיצה על כפתור, את המצב שלך במשחק:


הלוגיקה

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

השמירה עצמה מתבצעת בזוגות של מידע:

1. שם של מפתח, נניח "מספר ניסיונות"

2. הערך של המפתח, נניח "2" (כמו בהדמיה הראשונה).

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


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

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

ולהלן הקוד:

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

שורה 13 בודקת אם הדפדפן תומך בשמירת ערכים, ללא טיפול במצב שבו הוא לא תומך.

שורה 15 מציגה אפשרות אחת ליצירת מפתח בשם num_of_times והשמת הערך 2 בתוכו.

שורה 16 מציגה אפשרות אחרת לאותה המטרה, בכתיבה מעט שונה.

שורות 18-19 מציגות שתי דרכים לקריאת הערך שנשמר לפני כן בשני המפתחות.

והתוצאה בדפדפן:

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

רק זכרו, דפדפנים ישנים אינם תומכים בכך עדיין. בדקו אם לקהל שלכם יש אפשרות לעבוד עם local storage.

הקטע לקוח מספר Html5 בהוצאת הד ארצי, שנכתב בידי יונית רושו, מנכ"לית בניית אתרים דיינמיק-ווב ומרצה במסלול לעיצוב אינטראקטיבי במכללת שנקר. בוער לכם להציג אתר או אפליקציה ברמה בינלאומית? אני ממתינה לכם בפייסבוק ואהיה כאן בשבוע הבא.

אתם מוזמנים להמשיך ולפנות אליי עם קישורים לאתרים שלכם: yonit.haaretz@gmail.com

לחצו לטורים קודמים בסדרה

תגובות

הזינו שם שיוצג כמחבר התגובה
בשליחת תגובה זו הנני מצהיר שהינני מסכים/ה עם תנאי השימוש של אתר הארץ