Javascript cookie

Home

HTML & CSS Tutorials

Javascript

Javascript cookie

Contributed by Joe

Tuesday, 04 July 2006

Javascript cookie overview

Cookies is tiny text files that a Web server can store on a client’s computer via a Web browser — were designed to change all that. By using cookies to keep track of browser-to-server interactions, Web developers can create intelligent Web sites that remember details about each and every user who visits them. You can even create cookies with built-in expiration dates so that information stored as cookies is maintained for only a limited period of time —say, a week or a month.

Why use javascript cookies?

Cookies allow developers to store information about a user’s visit on that user’s computer and retrieve it when the user revisits your site. Two of the most common reasons Web developers use cookies are

To identify visitors:

You can detect when a user has previously visited your site and customize what that user sees on subsequent visits.

To save transaction state:

You can store the status of any lengthy transactions between your site and your visitors’ browsers to safeguard against interruptions.

Javascript Cookie security issues

Cookies have been used safely for a few years now,but still highly controversial for two reasons
Cookies jump the traditional bounds of a Web browser by storing
information directly on users’ hard drives.
Cookies enable Web developers to gather detailed marketing information
about users without those users’ knowledge or consent.

Create a Javascript cookie

JavaScript cookies are stored in the document.cookie object and are created by assigning values to this object. When creating a cookie, you typically specify a name, value, and expiration date and time for that cookie. The cookie will then be accessible in your scripts every time the user returns to your site until the cookie expires. These cookies will also be sent to your server every time the user requests a page from your site.

JavaScript Cookie Attributes

expires=expirationDate; The date, in milliseconds, after which the
cookie expires
path=path; The path of the CGI program to which the
cookie contents can be transmitted.
domain=domain; The domain to which a cookie can be transmitted.
secure Specifies that this cookie can be transmitted
only by a secure protocol such as https.

An example about how to add a cookie with javascript

document.cookie = name + “=” + escape(value) +
((expires == null) ? “” : (“; expires=” + expires.toGMTString())) +
((path == null) ? “” : (“; path=” + path)) +
((domain == null) ? “” : (“; domain=” + domain)) +
((secure == true) ? “; secure” : “”);

The following steps show how to create a new cookie in JavaScript:

In the header of a new document, create a script block with opening and closing script tags:

In the script, type document.cookie followed by an equal sign tobegin assigning a value to the document.cookie object:

document.cookie =

Type an opening double quotation followed by a name for the cookie followed by an equal sign. In this case, the name is myCookie:

document.cookie = “myCookie=

Close the double quotation, and type a plus sign:

document.cookie = “myCookie=” +

Enter the value you wish to assign to the cookie as the argument to the escape function. In this case, the value of the cookie is “This is my Cookie”:

document.cookie = “myCookie=” + escape(“This is my first Cookie”)

Type a semicolon to end the command. The final result is that you will have JavaScript code like

below.
<head>
<script language=”JavaScript”>
document.cookie = “myCookie=” + escape(“This is my Æ
Cookie”);
</script>
</head>

Accessing a javascript cookie

To access a cookie’s value, you need query the cookie property associated with the document object.

See below example

var endstr = document.cookie.indexOf(“;”, offset);

How to delete a Cookie

Sometimes you need to delete a cookie. The following example tell you how to delete a cookie name myCookie:

In the head of a new HTML document, create a script block with opening and closing script tags:

In the script, create a new Date object.see below code

<head>
<script language=”JavaScript”>
var newDate = new Date();
</script>
</head>

Set the expiration date to some time in the past

<head>
<script language=”JavaScript”>
var newDate = new Date();
newDate.setTime(newDate.getTime() - 86400000);
</script>
</head>

Set javascript cookie with specified expiration date and time

<head>
<script language=”JavaScript”>
var newDate = new Date();
newDate.setTime(newDate.getTime() - 86400000);
document.cookie = “myCookie=;expires=” +newDate.toGMTString();
</script>
</head>

Last Updated ( Friday, 21 July 2006 )