שמירת ערכים באלמנטים ועוגיות ב-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.