JavaScript Cookies

A cookie is often used to identify a user. Cookies are small amounts of data or information stored by the web browser. They allow us to store particular information about a user and retrieve it every time they visit our pages. Each user has their own unique set of cookies.

What is a Cookie?

A cookie is a variable that is stored on the visitor’s computer. Each time the same computer requests a page with a browser, it will send the cookie too. With JavaScript, you can both create and retrieve cookie values.

Examples of cookies:

  • Name cookie – The first time a visitor arrives to your web page, he or she must fill in her/his name. The name is then stored in a cookie. Next time the visitor arrives at your page, he or she could get a welcome message like “Welcome Howdy Doe!” The name is retrieved from the stored cookie
  • Password cookie – The first time a visitor arrives to your web page, he or she must fill in a password. The password is then stored in a cookie. Next time the visitor arrives at your page, the password is retrieved from the cookie
  • Date cookie – The first time a visitor arrives to your web page, the current date is stored in a cookie. Next time the visitor arrives at your page, he or she could get a message like “Your last visit was on Tuesday August 11, 2010!” The date is retrieved from the stored cookie.

Set The Cookies:Java Scipt code to set the cookies.

<script type=”text/javascript”>

function setCookie(name, value, days)
{
var dc = document.cookie;
if (!days) days = 1; // default to 1 day if empty

var expdate = new Date();
expdate.setTime(expdate.getTime() + days*24*60*60*1000);

dc = name + “=” + escape(value) +
“; expires=” + expdate.toGMTString();
}
</script>

Sets a Cookie with the given name and value.

<script type=”text/javascript”>

function setCookie(name, value, expires, path, domain, secure)
{
document.cookie= name + “=” + escape(value) +
((expires) ? “; expires=” + expires.toGMTString() : “”) +
((path) ? “; path=” + path : “”) +
((domain) ? “; domain=” + domain : “”) +
((secure) ? “; secure” : “”);
}
</script>

name Name of the cookie
value Value of the cookie
[expires] Expiration date of the cookie (default: end of current session)
[path] Path where the cookie is valid (default: path of calling document)
[domain] Domain where the cookie is valid
(default: domain of calling document)
[secure] Boolean value indicating if the cookie transmission requires a secure transmission.

Gets the value of the specified cookie.

<script type=”text/javascript”>

function getCookie(name)
{
var dc = document.cookie;
var prefix = name + “=”;
var begin = dc.indexOf(“; ” + prefix);
if (begin == -1)
{
begin = dc.indexOf(prefix);
if (begin != 0) return null;
}
else
{
begin += 2;
}
var end = document.cookie.indexOf(“;”, begin);
if (end == -1)
{
end = dc.length;
}
return unescape(dc.substring(begin + prefix.length, end));
}

</script>

name Name of the desired cookie.
Returns a string containing value of specified cookie,
or null if cookie does not exist.

Deletes the specified cookie.

<script type=”text/javascript”>

function deleteCookie(name, path, domain)
{
if (getCookie(name))
{
document.cookie = name + “=” +
((path) ? “; path=” + path : “”) +
((domain) ? “; domain=” + domain : “”) +
“; expires=Thu, 03-nov-06 02:00:00 GMT”;
}
}

</script>

name name of the cookie
[path] path of the cookie (must be same as path used to create cookie)
[domain] domain of the cookie (must be same as domain used to create cookie)

DOWNLOAD SOLUTION HERE