I was developing a retailer web application and working on Product Comparison functionality.There was a requirement where I want to persist info (product Id from different category page) across multiple pages using javascript. Then use those product ids in Product Comparison page.Each Product Category page lists muliple products, with a check box associated with each product, which allow user to select products to compare. As per requirement user can select products from diferent category and when click compare product button ,then all selected products from diferent page must be go to compare Product page.So I need to persist Product id in cookie .
1) Here to impliment this functionality I have used one Hidden input control to get data from cookie on load event.
<input type="hidden" id="HiddenVar" runat="server" enableviewstate="true" />
2) Then the question is when to save data in Cookie.To save product Id into cokkie I have written a javascript function and call it on onClick event of CheckBox.
checkbox.Attributes.Add("onClick", "updateProductIdInArray(this)");
Here I have used a global variable as array to update selected Product ids .As a result whenever a uer check or uncheck the check box control, the array object will be updated (add or remove product id from array object). Then update the value of hidden control by getting all ids from array object (you can write a separate function to get all product id from array and make a text separated by comma ).
3) Write a function to save the info in a cookie and call the function when user click on button or link to go to different page.The idea is before go to the specified page the javascript function will save the data from Hidden input control value in to a cookie.
Control.Attribute.Add("onclick", "javascript:SaveSelectedProductId(););
//Save Product Ids in Session
function SaveSelectedProductId(url) {
//Get Hidden Control value
var HiddenControl = document.getElementById('<%= HiddenVar.ClientID %>');
var dataTosav = HiddenControl.value;
createACookie(cokkieName, dataTosav, '1');
}
//Create Cokkie
function createACookie(name, value, days) {
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
var expires = "; expires=" + date.toGMTString();
}
else
var expires = "";
document.cookie = name + "=" + value + expires + "; path=/";
}
4) Now the time to read the values from cokkie and delete the cokkie you need to do it on Load event of the page or any Control.For that you need to use a Hidden control which will get the value from cookie and also be available to javascript so that the value can be resuse.
//Read value from Cokkie
function ReadCookie() {
var HiddenctrlOnLoad = document.getElementById('<%= HiddenVar.ClientID %>');
var nameEQ = cokkieName + "=";
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) {
HiddenctrlOnLoad.value = c.substring(nameEQ.length, c.length);
EraseCookie(cokkieName);
}
}
}
//Erage Cokkie
function EraseCookie(name) {
createCookie(name, "", -1);
}
Here the cookie must be enabled in browser to support this functionality .