Using Cookie in Client Side (JavaScript)

8 בפברואר 2010

תגיות: , ,
אין תגובות

 


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

 

למעשה בפוסט הקודם הצגתי איך יוצרים Cookie בצד השרת שיש לו הרבה ערכים – ככה:

 



HttpCookie cookie = new HttpCookie("ClientColumns");


for (int j = 0; j < cbl.Items.Count; j++)


{


    cookie.Values.Add("name", "value");


}


 

ברור שאפשר גם לייצר Cookie שיש לו רק ערך אחד

 



HttpCookie cookie = new HttpCookie("ClientColumns");


cookie.Value = "value";


 

שימו לב להבדל בין שימוש ב – Values לבין שימוש ב – Value.

 

 

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

הנה הפונקצייה לייצר ולקרוא מ – Cookie (הפונקצייה הועתקה מכאן – מומלץ לקרוא)

 



function CreateCookie(name, value, expiredays) {


    var expires = ";


 


    if (expiredays != undefined) {


        var exdate = new Date();


        exdate.setDate(exdate.getDate() + expiredays);


        expires = exdate.toGMTString();


    }


 


    document.cookie = name + "=" + value + (expires == " ? " : ";expires=" + expires) + "; path=/";


}


 


function ReadCookie(name) {


    var nameEQ = name + "=";


    var ca = document.cookie.split(';');


    for (var i = 0; i < ca.length; i++) {


        var c = ca[i];


        while (c.charAt(0) == ' ') c = c.substring(1, c.length);


        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);


    }


    return null;


}


 

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

דוגמא לשימוש עם ערך אחד

 



CreateCookie('name', 'value', 100);


CreateCookie('name', 'value');


 

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

דוגמא לשימוש עם יותר מערך אחד

 



CreateCookie('name', 'Id=1&First Name=Shlomo&Work=true');


 

קריאה ל – ReadCookie תמיד תחזיר את מה שיש ב – value של ה – Cookie.

כלומר לא באמת קיים כזה דבר Cookie שיש לו יותר מערך אחד – אלא שבמקרה שה – Value של ה – Cookie מכיל את התו & האובייקט בצד השרת יודע לפרק את ה – value של ה – cookie להרבה ערכים.

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

 

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

 

ל – CheckListBpx נוסיף טיפול בצד הלקוח

 



<asp:CheckBoxList ID="cbl" runat="server" RepeatDirection="Horizontal" onclick="Change(this)">


 

המתודה:

 



function Change(tbl) {


    var value = CookieString(tbl);


    CreateCookie("ClientColumns", value, 100);


    ChangeGrid(false);


}


 

המתודה CookieString מקבלת את ה – CheckListBox ומחזירה מחרוזת מתאימה ל – Cookie.

המתודה CreateCookie שומרת את ה – Cookie.

המתודה ChangeGrid מעלימה את העמודות בגריד, ומקבלת את הערך false כדי להגיד למתודה שלא צריך לשנות את הערך ב – CheckBox (מכיון שכשהעמוד נטען צריך להפעיל את המתודה הזאת כדי לטעון את הערכים מה – Cookie ואז צריך לשנות את ה – CheckBox).

 

נוסיף ל – body

 



<body onload="ChangeGrid(true)">


 

כעת נראה את אותם מתודות.

 



function CookieString(tbl) {


    var inputArr = tbl.getElementsByTagName('INPUT');


    var str = ";


 


    for (var i = 0; i < inputArr.length; i++) {


        str += inputArr[i].nextSibling.innerText + '=' + inputArr[i].checked + '&';


    }


    if (str != ") {


        str = str.substr(0, str.length – 1);


    }


 


    return str;


}


 

אני מקבל מערך של כל ה – CheckBox שקיים ב – CheckBoxList.

רץ על כולם ומייצר מחרוזת מתאימה.

אחרי הלולאה אני מוחק את התו האחרון &.

 

 

 



function ChangeGrid(setCheckBox) {


    var value = ReadCookie('ClientColumns');


    if (value != null) {


        var values = value.split('&');


        var grid = document.getElementById('<%= grid1.ClientID %>');


        var clb = document.getElementById('<%= cbl.ClientID %>');


        var inputs = clb.getElementsByTagName('INPUT');


 


        for (var m = 0; m < values.length; m++) {


            var display = values[m].split('=')[1] == "true" ? 'block' : 'none';


 


            for (var i = 0; i < grid.rows.length; i++) {


                grid.rows[i].cells[m].style.display = display;


            }


 


            if (display == 'none' && setCheckBox) {


                inputs[m].checked = false;


            }


        }


    }


}


 

אני מנסה לקרוא את ה – Cookie

עושה מה – value מערך לפי סימן ה – &

אני מקבל את הגריד, ה – CheckBoxList ומערך של כל ה – CheckBox שקיימים בו.

 

אני רץ בלולאה על כל הערכים ב – Cookie.

השורה הבאה:

 



var display = values[m].split('=')[1] == "true" ? 'block' : 'none';


במידה והערך הוא true נקבל את המילה block אחרת נקבל none

אני רץ על כל השורות בגריד ומגדיר לעמודה האם יראו אותה או לא.

במידה ומוגדר שלא יראו את העמודה והגענו אחרי ה – load של ה – body – נשנה גם את הערך של ה – checkBox.

 

 

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

הוסף תגובה
facebook linkedin twitter email

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *