עידן יצחקימי אוהב עוגיות? כולם, גם המחשב.
למה אנחנו צריכים אותן ולמה הן משמשות?
יש מספר שיטות לשמור מידע בצד המשתמש, נכון שזה לא מאובטח ולכן לא נשמור כל דבר שם או שנקודד אותו לפני כן.
בפוסט הזה נדבר על יצירה של קוקי, בגלל הפופולריות של השיטה.
קודם כל איך רואים אותה, אם אתם גולשים בדפדפן כרום אז יש לפתוח את ה-dev tool (F12) ואז לעבור לטאב application, בצד אתם תראו רשימה במבנה עץ עם קטגוריות.
ב-storage אתם תראו Cookies עם חץ, תלחצו על החץ ואם נפתח מתחתיו משהו, זאת אומר שיש לכם עוגיה.
תבחרו אותה ואז בחלק ליד תוכלו לראות איזה ערכים היא מחזיקה (אפשר לערוך, למחוק, וליצור).
עכשיו נראה איך יוצרים פונקציות לבדיקה ויצירה של הקוקי
var cookieObj = new Object();
cookieObj.setCookie = function(cname, cvalue, exdays) {
var date = new Date();
date.setTime(date.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires=" + date.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
cookieObj.getCookie = function(cname) {
var dataArr = document.cookie.split(';');
for (var i = 0; i < dataArr.length; i++) {
var paramDataArr = dataArr[i].split('=');
if (paramDataArr[0].trim() === cname.trim()) {
return paramDataArr[1].trim();
}
}
return "";
}
cookieObj.checkCookie = function() {
var user = cookieObj.getCookie("username");
if (user != "") {
console.log("user:", user);
} else {
user = 'John';
if (user != "" && user != null) {
cookieObj.setCookie("username", user, 365);
}
}
}אנחנו יוצרים אוביקט שיחזיק את הפונקציות שלנו.
הפונקציה הראשית שמפעילה את getCookie ו-setCookie היא checkCookie.
בשורה 20 אנחנו מפעילים את הפונקציה שתבדוק אם יש את הערך ששלחנו לה בעוגיה, אם יש אז אנחנו מחזירים את הערך של מה ששלחנו לבדיקה ואם אין אז אנחנו מחזירים תשובה ריקה.
במידה שחוזרת תשובה ריקה, משמע אין ערך כזה אז אנחנו נפעיל את הפונקציה של יצירת עוגיה, בשורה 26 ונשלח את המפתח, הערך, ולכמה זמן אנחנו רוצים שהמידע יהיה תקף.
במקרה שלנו 365 (שנה).
כאשר בודקים ערכים בעוגיה יתכן ויהיה רווח לפני או אחרי המפתח או הערך, לכן אנחנו עושים trim כדי למחוק רווחים מיותרים בהתחלה ובסוף.
כאשר קוראים עוגיה, התוכן שלה מגיע כמלל אחד ארוך אשר ";" (נקודה-פסיק) מפרידים בין שורות המידע.
לכן אנחנו נפצל אותם ב-";" ונרוץ על המערך כאשר כל תא שאנחנו בודקים, נעשה גם לו פיצול ב-"=" כדי לקבל את המפתח והערך שלו.
בהצלחה בהמשך יצירת עוגיות (ואכילה שלהן) 🍪🍪🍪
