JizzaBeez
03-30-2011, 02:23 PM
This example shows how to use JavaScript to Check, Get and Set the browser's cookies. All of the code should be placed within the "head" tags. There is commentary within the code:
<!-- Cookie Example -->
<script language="javascript" type="text/javascript">
/* .:Create and Store a Cookie:.
In this example we will create a cookie that stores the name of a visitor.
The first time a visitor arrives to the web page, he or she will be asked to
fill in her/his name. The name is then stored in a cookie. The next time the
visitor arrives at the same page, he or she will get welcome message.
First, we create a function that stores the name of the visitor in a cookie variable: */
function setCookie(c_name, value, exdays)
{
var exdate = new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString());
document.cookie = c_name + "=" + c_value;
}
/* The parameters of the function above hold the name of the cookie,
the value of the cookie, and the number of days until the cookie expires.
In the function above we first convert the number of days to a valid date,
then we add the number of days until the cookie should expire. After that
we store the cookie name, cookie value and the expiration date in the document.cookie object.
Then, we create another function that returns a specified cookie: */
function getCookie(c_name)
{
var i, x, y, ARRcookies = document.cookie.split(";");
for (i = 0; i < ARRcookies.length; i++)
{
x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
x = x.replace(/^\s+|\s+$/g,"");
if (x == c_name)
{
return unescape(y);
}
}
}
/* The function above makes an array to retrieve cookie names and values,
then it checks if the specified cookie exists, and returns the cookie value.
Last, we create the function that displays a welcome message if the cookie is set,
and if the cookie is not set it will display a prompt box, asking for the name of the user,
and stores the username cookie for 365 days, by calling the setCookie function: */
function checkCookie()
{
var username = getCookie("username");
if (username != null && username != "")
{
alert("Welcome again " + username);
setCookie("username", username, 365);
document.getElementById("textbox1").value = username;
}
else
{
username = prompt("Please enter your username:", "");
if (username != null && username != "")
{
setCookie("username", username, 365);
document.getElementById("textbox1").value = username;
}
}
}
</script>
The function would then be called from the body onload event like so:
<body onload="checkCookie();"></body>
You can create cookies on a user's browser but you can not delete them. So what you can do is create a new cookie with the same name and set the expire date to past expired and create the new cookie overwriting the old one. Then when the browser realizes it's expired the browser will delete it. Just a trick for getting rid of cookies.
tutorial from: (http://www.w3schools.com/js/js_cookies.asp)
<!-- Cookie Example -->
<script language="javascript" type="text/javascript">
/* .:Create and Store a Cookie:.
In this example we will create a cookie that stores the name of a visitor.
The first time a visitor arrives to the web page, he or she will be asked to
fill in her/his name. The name is then stored in a cookie. The next time the
visitor arrives at the same page, he or she will get welcome message.
First, we create a function that stores the name of the visitor in a cookie variable: */
function setCookie(c_name, value, exdays)
{
var exdate = new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString());
document.cookie = c_name + "=" + c_value;
}
/* The parameters of the function above hold the name of the cookie,
the value of the cookie, and the number of days until the cookie expires.
In the function above we first convert the number of days to a valid date,
then we add the number of days until the cookie should expire. After that
we store the cookie name, cookie value and the expiration date in the document.cookie object.
Then, we create another function that returns a specified cookie: */
function getCookie(c_name)
{
var i, x, y, ARRcookies = document.cookie.split(";");
for (i = 0; i < ARRcookies.length; i++)
{
x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
x = x.replace(/^\s+|\s+$/g,"");
if (x == c_name)
{
return unescape(y);
}
}
}
/* The function above makes an array to retrieve cookie names and values,
then it checks if the specified cookie exists, and returns the cookie value.
Last, we create the function that displays a welcome message if the cookie is set,
and if the cookie is not set it will display a prompt box, asking for the name of the user,
and stores the username cookie for 365 days, by calling the setCookie function: */
function checkCookie()
{
var username = getCookie("username");
if (username != null && username != "")
{
alert("Welcome again " + username);
setCookie("username", username, 365);
document.getElementById("textbox1").value = username;
}
else
{
username = prompt("Please enter your username:", "");
if (username != null && username != "")
{
setCookie("username", username, 365);
document.getElementById("textbox1").value = username;
}
}
}
</script>
The function would then be called from the body onload event like so:
<body onload="checkCookie();"></body>
You can create cookies on a user's browser but you can not delete them. So what you can do is create a new cookie with the same name and set the expire date to past expired and create the new cookie overwriting the old one. Then when the browser realizes it's expired the browser will delete it. Just a trick for getting rid of cookies.
tutorial from: (http://www.w3schools.com/js/js_cookies.asp)