שמירת ערכים באלמנטים ועוגיות ב-MooTools

אחסון מטא מידע באלמנטים וב-cookies עם MooTools

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

מטא מידע באלמנטים של MooTools

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

ראשית, הדוגמא – יש לי אלמנט מסוג פסקה שה-id שלו הוא myParagraph. האלמנט הזה יכיל את המטא מידע שלי שהוא myKey והמידע שלו הוא myValue.

זוהי פסקה תמימה עם id ששמו בישראל הוא myParagraph



והנה הקוד המלא שמאפשר את כל זה:


function storeValue() {
	$('myParagraph').store('myKey', 'myValue');
}

function alertValue() {
	var myValue = $('myParagraph').retrieve('myKey');
	alert(myValue);
}

function removeValue() {
	$('myParagraph').eliminate('myKey')
}
	
window.addEvent('domready', function() {
    $('myButton').addEvent('click', storeValue);
    $('myButton2').addEvent('click', alertValue);
    $('myButton3').addEvent('click', removeValue);

});

בואו ונעבור על הפונקציות אחת אחת:

store

מתודת store מקבלת שני ארגומנטים – הראשון הוא ה-key והשני הוא ה-value.

retrieve

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

eliminate

מתודת eliminate פשוט מוחקת את ה-key וה-value. היא מקבלת ארגומנט אחד שהוא ה-key, זה הכל.

עוגיות – cookies

אחסון מידע בעוגיות הוא דרך מקובלת לשמירת מידע גם לאחר שהמשתמש סוגר את הדפדפן. ב-MooTools יש לנו דרך נוחה מאד לבצע את איחסון המידע (שגם הוא בפורמט של key ו-value) לאחזר אותו או למחוק אותו.

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



לחיצה על הכפתור הראשון קוראת למתודה של אובייקט Cookie שקיים כבר ברגע שאנו מכניסים את MooTools. שם המתודה בישראל הוא write והיא מכניסה את המידע לעוגיה בנוסף למטא מידע על העוגיה עצמה. כך למשל, אני יצרתי עוגיה שנקראת myKey וכוללת את המידע myValue. בנוסף ציינתי שהיא מהדומיין הזה (internet-israel.com) וכן שה-duration שלה הוא 30 יום. ככה זה נראה:


	var myCookie = Cookie.write('myKey', 'myValue' , {domain: 'internet-israel.com', duration: 30});

הסינטקס הוא די פשוט, שימו לב שהאפשרויות מגיעות כאובייקט. ישנן 4 אפשרויות:
1. domain – הדומיין של העוגיה (בדיפולט זה false).
2. path – אם יש נתיב ספציפי לעוגיה (בדיפולט זה false).
3. duration – משך הזמן בימים שבו העוגיה תחיה (בדיפולט זה false – משך הזמן הוא עד שהמשתמש סוגר את הדפדפן).
4. secure – האם דומיין שהוא רק https יכול למשוך את העוגיה (בדיפולט זה false).

די פשוט ונוח, לא?

לחיצה על הכפתור השני קוראת למידע שבעוגיה שלי, כאן אני משתמש במתודת read של Cookie ומעביר רק את הארגומנט של שם העוגיה, במקרה הזה myKey:


	var myCookieValue = Cookie.read('myKey');
	alert(myCookieValue);

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


	 Cookie.dispose('myKey', {domain: 'internet-israel.com'});


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


function storeCookie() {
	var myCookie = Cookie.write('myKey', 'myValue' , {domain: 'internet-israel.com', duration: 30});
}

function alertCookie() {
	var myCookieValue = Cookie.read('myKey');
	alert(myCookieValue);
}

function removeCookie() {
	 Cookie.dispose('myKey', {domain: 'internet-israel.com'});
}
	
window.addEvent('domready', function() {
    $('myButton4').addEvent('click', storeCookie);
    $('myButton5').addEvent('click', alertCookie);
    $('myButton6').addEvent('click', removeCookie);

});

במאמר הבא אנו נדון סוף סוף על אירועים ו-style ב-MooTools.

פוסטים נוספים שכדאי לקרוא

מיקרו בקרים

הפעלת מסך oled קטנטן עם esp32

יצירת מערכת מולטימדיה שלמה בגודל של בול דואר עם מיקרובקר ובעלות של דולרים בודדים. וגם על הדרך נלמד על ת׳רדים

DALL·E 2023-10-21 22.28.58 - Photo of a computer server room with red warning lights flashing, indicating a potential cyber threat. Multiple screens display graphs showing a sudde
יסודות בתכנות

מבוא לאבטחת מידע: IDOR

הסבר על התקפה אהובה ומוצלחת שבאמצעותה שואבים מידע מאתרים

עבודה בהיי טק

איך מראיינים סניורים?

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

תמונת תצוגה של מנעול על מחשב
פתרונות ומאמרים על פיתוח אינטרנט

הגנה מפני XSS עם Trusted Types

תכונה ב-CSP שמאפשרת מניעה כמעט הרמטית להתקפות XSS שכל מפתח ווב צריך להכיר וכדאי שיכיר.

גלילה לראש העמוד