Cookies

בלי כתוביותעם כתוביות

מילון מושגים:

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

דפדפן - תוכנה שמציגה דפי אינטרנט ומריצה את הקוד שבהם, ומאפשרת לגלוש בין אתרים, למשל Chrome או Firefox.

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

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

שם משתמש - מזהה ייחודי שמשתמש מזין כדי להזדהות במערכת, לרוב יחד עם סיסמה.

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

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

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

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

נושאי הסיכום המוצגים בשיעור:

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

2. מבנה הקוקי: קוקי הוא מחרוזת שמכילה שני חלקים: מפתח key שווה ואז value. אפשר לשמור כמה ערכים שונים, וכל ערך יופרד על ידי נקודה פסיק. כאשר שומרים key ו-value יחידים, המערכת לבד שומרת אותם בפורמט הזה.

3. שמירה וקריאה בסיסית: שמירת קוקי נעשית על ידי השמה ל-document.cookie, למשל first name שווה מוישה, וקריאתו נעשית על ידי הצגת document.cookie מתוך פונקציה שקוראים לה מלחצן. לפני שמירה כלשהי הקוקיז ריקות, ואחרי השמירה מוצג הנתון שנשמר.

4. שמירת כמה קוקיז: למרות שנראה כאילו כל השמה דורסת את הקוקי הקודם, כאשר שומרים שלושה פריטים בשלוש השמות נפרדות, האובייקט document לוקח כל מחרוזת ומוסיף אותה כמחרוזת נוספת בקובץ הקוקיז, מופרדות בנקודה פסיק ורווח קטן.

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

6. קוקי מתמשך עם תאריך תפוגה: כדי שהקוקי יישמר בקובץ חייבים לספק לו תאריך תפוגה. בונים פונקציה ששומרת persistent cookie, שבה יוצרים משתנה expires כאובייקט Date חדש, מגדירים לו בעזרת setMonth עם getMonth ועוד אחד תאריך של חודש אחד קדימה מהיום, ומשרשרים לכל קוקי את expires שווה ואת התאריך המומר עם toUTCString.

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

8. הצצה לקובץ הקוקיז: כל דפדפן שומר את הקוקיז בתיקייה אחרת. באינטרנט אקספלורר נכנסים ל-tools, internet options, ובאזור browsing history לוחצים על settings ואז view files. שם רואים קובץ טקסט רגיל שמכיל את המפתח, הערך, את כתובת האתר וקידודים פנימיים של הדפדפן, כולל תאריך תפוגה וגדלים.

9. הצורך האמיתי בקוקיז: בונים תוכנית חדשה של נתוני לקוחות עם טופס שמכיל תיבת טקסט לשם הלקוח ו-select לסוג הלקוח עם אופציות regular, business ו-vip. השרת אינו יכול לדעת מיהו הלקוח הגולש, כי ללקוח יכולה להיות כתובת IP או מחשב או דפדפן שונים, ואין לו משהו קבוע לזהות אותו, אלא אם התחבר עם שם משתמש וסיסמה. לכן, כדי להציג ללקוח אוטומטית את הנתונים האחרונים שהזין, נשתמש בקוקיז שנשמרים במחשב שלו עצמו.

10. פונקציה כללית לשמירת קוקי: בונים פונקציה כללית שתשמש בכל הפרויקטים, המקבלת key ו-value ושומרת קוקי לחודש אחד קדים בתור החלטה פנימית, כדי להקל על מי שקורא לה. היא מגדירה expires כ-Date עם setMonth של getMonth ועוד אחד, ומבצעת השמה ל-document.cookie של המפתח, התו שווה, הערך והמחרוזת expires שווה ואז התאריך המומר ל-UTC.

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

12. שמירת נתוני הלקוח: פונקציית saveCustomerCookies קוראת לפונקציה הכללית פעמיים: פעם עם המפתח customer name והערך מתיבת הטקסט שמתקבל ב-document.getElementById והמאפיין value, ופעם עם המפתח customer type והערך מה-select. השמירה מתבצעת באירוע onclick של לחצן ה-submit, ומכיוון שהפונקציה אינה מחזירה false הלחצן גם מגיע לדף היעד.

13. טעינת הנתונים ב-onload: המקום הנכון לטעון את הנתונים הוא ברגע שהדף מוצג, כלומר באירוע onload של ה-body, שם קוראים לפונקציה readCustomerCookies. בבדיקה רואים שאחרי מילוי הנתונים, סגירת הדפדפן וגלישה מחדש, הקוקיז נשמרו במחשב המשתמש עם הרווח הקטן שהמערכת מוסיפה אחרי הנקודה פסיק.

14. פונקציה כללית לקריאת קוקי: כמו שבנינו saveCookie, בונים readCookie שמקבלת key ומחזירה את הערך של הקוקי עם המפתח הזה. היא קוראת ל-split על document.cookie עם נקודה פסיק כהפרדה ומקבלת מערך שכל תא בו הוא key שווה value.

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

16. החזרת הערך המתאים: אם המפתח שנמצא בתא שווה ל-key שהתקבל לפונקציה, מחזירים את unescape של חלק הערך. אם עברנו על כל התאים ולא מצאנו את המפתח, מחזירים null. הפונקציה נכתבה פעם אחת ויכולה לקרוא כל קוקי בכל אתר.

17. הכנסת הנתונים לתיבות: ב-readCustomerCookies מקבלים לשני משתנים את הערכים של customer name ו-customer type באמצעות readCookie, ומכניסים אותם לתיבות רק אם הם שונים מ-null וגם ממחרוזת ריקה, כי בגלישה ראשונה אין עדיין נתונים. את השם מכניסים ל-value של תיבת הטקסט ואת סוג הלקוח ל-value של ה-select, וכך בגלישה חוזרת ג'אווה סקריפט מציגה את הנתונים הישנים בלי שהשרת יודע מי המשתמש.

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

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

בשיעור הבא נעסוק בנושא Exception Handling.

מילון מושגים:

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

Java - שפת תכנות עילית ומונחית עצמים, הרצה על מכונה וירטואלית (JVM) ומשמשת לפיתוח מגוון יישומים.

להורדת קוד מקור של כל הדוגמאות בקורס JAVA SCRIPT למתחילים -לחץ כאן לתלמידי המכללה בלבד

להורדת קוד מקור של כל הדוגמאות בקורס JAVA SCRIPT למתקדמים- לחץ כאן לתלמידי המכללה בלבד

פרקי ההרצאה: Cookies

תמלול ההרצאה: Cookies

הטקסט המלא של הדקות הראשונות בהרצאה «Cookies» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

00:01
הדבר הבא שאנחנו הולכים לראות בג'אווה סקריפט זה שמירה וקריאה של משהו שנקרא קוקיז, כלומר עוגיות. קוקי זה בעצם נתון שאנחנו יכולים לשמור במחשב של הלקוח בעזרת הדפדפן באיזושהי תיקייה מסוימת שהדפדפן מכיר.
00:21
אנחנו לא בדיוק שולטים, לא יכולים בכלל לשלוט על איפה זה נשמר ואיזו תיקייה זאת וזה גם לא משנה לנו, אבל אנחנו יכולים לקחת נתון ולשמור אותו בקובץ בצד של הלקוח, ככה שבפעם הבאה שהלקוח נכנס לדף שלנו אנחנו יכולים לקרוא את הנתון הזה ולהשתמש בו.
00:38
אוקיי, בואו נבדוק איך אנחנו יכולים לעשות את זה. אז ראשית ניקח לחצן לצורך שמירת הנתון, יש לנו כאן input type שווה button, value שווה save cookie ויש לנו onclick נקרא לפונקציה save cookie.
01:10
נבנה פה את הפונקציה הזאת ובתוך הפונקציה מה שאנחנו רוצים לעשות זה לשמור את הנתון הזה בצד של הלקוח. אז בשביל לשמור קוקי אנחנו ניגשים לדוקיומנט נקודה קוקיז או יותר נכון קוקי.
01:37
זה בעצם אוסף של כל הנתונים האלה שאנחנו שומרים. עכשיו איך אנחנו בדיוק שומרים את הנתון? אז קוקי זה סטרינג, זה מחרוזת שמכילה שני חלקים.
01:51
חלק ראשון זה איזשהו קי מפתח ויש לנו שווה לאחר מכן, והחלק השני זה ה-value וככה אנחנו יכולים לשמור את החלקים השונים. עכשיו למרות שזה נקרא קוקי וקוקי בגדול זה נתון 1 לדוגמה ערך 1 שנשמר עבור מפתח 1 אנחנו יכולים בקוקי לשמור כמה ערכים שונים מה שיקרה בפועל זה כל ערך יופרד על ידי נקודה פסיק זאת אומרת שאנחנו יכולים לשמור k1 שווה
02:28
לvalue1 k2 שווה value 2, key 3 שווה value 3 וכולי וכולי, כאשר כל פעם אנחנו צריכים לשמור רק key וvalue 1 והמערכת לבד תשמור אותם בפורמט הזה.
02:49
אז בואו לדוגמה נשמור first name שווה מוישה וזה הדבר היחידי שאנחנו שומרים. אז בואו נבצע פונקציה שנקרא לה readCookie ומה שהפונקציה הזאת תעשה היא תציג את document.cookie ונקרא לה מלחצן readcookie.
03:30
אוקיי, בואו נבדוק. אז ראשית, קודם כל נבצע read, רק בכדי לראות מה יש בדוקימנט.cookie לפני שאנחנו בכלל רושמים משהו.
03:45
זה ינוחץ על readcookie, ואני רואה שזה ריק. ועכשיו אני הולך ל-savecookie, ואז readcookie, ובעצם זה מה ששמרתי, ונראה כאילו ששמרתי מחרוזת אחת רגילה לגמרי.
04:01
אוקיי, בואו נשמור יותר מ-cookie אחד. בואו נשכפל את זה ונגדיר דוקיומנט נקודה קוקי שווה עכשיו לעוד משהו לדוגמה last name שווה אופניק ואפילו h שווה 12. זאת אומרת שאני עכשיו שמרתי שלושה פריטים שונים ונראה כאילו אני דורס כל פעם את אותו הקוקי נראה כאילו שהדבר האחרון שישמר h שווה 12 זה הדבר היחידי שיהיה
04:42
כאן ב-read קוקי אבל בואו נראה את זה. מה שנעשה זה נסגור את הדפדפן או יותר נכון לפני שנסגור אותו בואו נלך לאינטרנט אופשנס ונמחוק את כל מה שהיה בהיסטוריה כולל את הקוקיז אנחנו רואים כאן שיש לנו את הסימון הזה שאומר שהוא מוחק קוקיז ישנים בכדי לראות תמיד באופן חדש מה בעצם קורה בדפדפן עצמו אז אחרי שמחקנו את
05:14
זה בואו נריץ שוב נבצע ריד בכדי לראות שזה ריק נבצע סייב ונבצע read ונראה שהמערכת שמרה בדיוק בפורמט שמקודם דיברנו עליו first name שווה מוישה נקודה פסיק רווח קטנצ'יק שיש פה last name שווה אופניק נקודה פסיק עוד רווח קטנצ'יק h שווה 12 למרות שכשאנחנו שמרנו אותם אנחנו כאילו דרסנו כל פעם את הקוקי הקודם כי יש פה רק שווה
05:51
ולא פלוס שווה עדיין ברגע שאנחנו עושים את הדבר הזה אז האובייקט דוקיומנט לוקח את המחרוזת שלנו ומכניס אותה כמחרוזת נוספת בתוך הקובץ הקטנצ'יק הזה.
06:09
אבל בואו נראה עוד משהו מעניין. זה היה הדף, אם אני מבצע read cookie כמובן אני רואה את הפרטים האלה, ועכשיו אני סוגר את הדפדפן, אני לא מנקה את הקוקיז, אני רק סוגר את הדפדפן, ואני מריץ שוב פעם את הדף.
06:27
ואז אני בא ואני עושה read cookie, ופתאום אני רואה שהקוקי לא באמת נשמר במחשב של המשתמש. אז מה שבעצם קרה כאן זה שאנחנו יצרנו פונקציה ששומרת קוקי, אבל הקוקי לא נמצא בתוך קובץ במחשב של המשתמש, במחשב של הלקוח, אלא רק בזיכרון של הדפדפן,
06:52
והקוקי הזה נקרא Non Persistent Cookie. Non Persistent Cookie זה בעצם קוקי שנשמר רק בזיכרון של הדפדפן, ולא בתוך קובץ. והסיבה היא מפני שאין לנו תאריך תפוגה.
07:14
אם אנחנו רוצים שהקוקי יישמר בקובץ, אנחנו חייבים לספק לו תאריך תפוגה, כלומר, לומר לקוקי עד מתי אנחנו רוצים שאתה תישמר. זה יכול להיות בעוד יום, זה יכול להיות בעוד חודש, בעוד שנה או בעוד עשר שנים, זה לא משנה.
07:28
העיקר שניתן איזשהו תאריך בכדי שהקוקי יישמר בו. אז בואו נקרא לפונקציה הזאתי saveNonePersistentCookie והפונקציה הזאת, דייב קוקי כן תהיה כזאת שתשמור לנו קובץ וקוקי כזה נקרא PersistentCookie בשביל שזה יהיה PersistentCookie בואו ניצור var וניצור משתנה
07:57
שנקרא expire נגדיר אותו כnewDate עכשיו אנחנו רוצים שהקוקי הזה התאריך תפוגה ויהיה איפשהו תאריך עתידי אז נלך ל-expire ונגדיר לו חודש על ידי הפונקציה setMonth ואנחנו רוצים להגדיר לו חודש אחד קדימה מהיום זאת אומרת שבואו נשמור את הקוקי הזה כחודש אחד קדימה.
08:31
אז יש לנו פה expire.getMonth, כלומר אנחנו לוקחים את החודש הנוכחי, מוסיפים לו אחד, וכעת המשתנה expire בעצם, נקרא לו expires, בעצם מתאר לנו בדיוק את התאריך של חודש אחד מהיום.
08:54
וזה לא משנה אם היום גם נניח חודש דצמבר, עדיין חודש אחד מהיום יהיה ינואר של שנה הבאה. אוקיי אחרי שיש לנו את התאריך הזה מה אנחנו בעצם עושים איתו?
09:10
אז כאשר אנחנו שומרים כל אחד מהקוקיז אנחנו חייבים ללכת ולעשות נקודה פסיק בסוף ה-Name או ה-Key שווה value ולבצע אקספיירס שווה ולשרשר את זה עם התאריך אקספיירס נהפוך אותו to Universal Time Coordinate String ואנחנו נעשה את זה עבור כל אחד מהם.
09:46
זאת אומרת שעבור כל קוקי ששמרנו אנחנו נתנו גם תאריך תפוגה לאותו קוקי. בואו נקרא לה הפונקציה הזאתי save persistent cookie ונקרא לה מהלחצן. כעת ב-save persistent cookie אנחנו פשוט נותנים