Scribd
Upload
2K views

Javascript Cookies

Cookies are used by web browsers and servers to maintain state between HTTP requests. When a server sends a response, it can also send cookies that contain information like user preferences or session IDs. The browser stores these cookies and sends them back to the server with subsequent requests. Cookies allow servers to personalize content for each user and remember things like shopping cart contents across multiple pages of a website.

Uploaded by

Archie Srivastava
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2K views

Javascript Cookies

Cookies are used by web browsers and servers to maintain state between HTTP requests. When a server sends a response, it can also send cookies that contain information like user preferences or session IDs. The browser stores these cookies and sends them back to the server with subsequent requests. Cookies allow servers to personalize content for each user and remember things like shopping cart contents across multiple pages of a website.

Uploaded by

Archie Srivastava
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 8

What are Cookies

Web Browser and Server use HTTP protocol to communicate and


HTTP is a stateless protocol. But for a commercial website it is
required to maintain session information among different pages.
For example one user registration ends after completing many
pages. But how to maintain user's session information across all
the web pages.
In many situations, using cookies is the most efficient method of
remembering and tracking preferences, purchases, commissions,
and other information required for better visitor experience or site
statistics.

How It Works ?
server sends some data to the visitor's browser in the form of a
cookie. The browser may accept the cookie. If it does, it is stored
as a plain text record on the visitor's hard drive. Now, when the
visitor arrives at another page on your site, the browser sends
the same cookie to the server for retrieval. Once retrieved, server
knows/remembers what was stored earlier.
Cookies are a plain text data record of 5 variable-length fields:
Expires : The date the cookie will expire. If this is blank, the
cookie will expire when the visitor quits the browser.
Domain : The domain name of your site.
Path : The path to the directory or web page that set the
cookie. This may be blank if you want to retrieve the cookie
from any directory or page.
Secure : If this field contains the word "secure" then the
cookie may only be retrieved with a secure server. If this
field is blank, no such restriction exists.

Name=Value : Cookies are set and retrieved in the form of


key and value pairs.
Cookies were originally designed for CGI programming and
cookies' data is automatically transmitted between the web
browser and web server, so CGI scripts on the server can read
and write cookie values that are stored on the client.
JavaScript can also manipulate cookies using the cookie property
of the Document object. JavaScript can read, create, modify, and
delete the cookie or cookies that apply to the current web page.

Storing Cookies:
The simplest way to create a cookie is to assign a string value to
the document.cookie object, which looks like this:

Syntax:
document.cookie =
"key1=value1;key2=value2;expires=date";
Here expires attribute is option. If you provide this attribute with
a valid date or time then cookie will expire at the given date or
time and after that cookies' value will not be accessible.
Note: Cookie values may not include semicolons, commas, or
whitespace. For this reason, you may want to use the
JavaScript escape() function to encode the value before storing it
in the cookie. If you do this, you will also have to use the
corresponding unescape() function when you read the cookie
value.

Example:
Following is the example to set a customer name in input cookie.

<html>
<head>
<script type="text/javascript">
<!-function WriteCookie()
{
if( document.myform.customer.value == "" ){
alert("Enter some value!");
return;
}
cookievalue= escape(document.myform.customer.value)
+ ";";
document.cookie="name=" + cookievalue;
alert("Setting Cookies : " + "name=" +
cookievalue );
}
//-->
</script>
</head>
<body>
<form name="myform" action="">
Enter name: <input type="text" name="customer"/>
<input type="button" value="Set Cookie"
onclick="WriteCookie();"/>
</form>
</body>
</html>
This will produce following result. Now enter something in the
text box and press the button "Set Cookie" to set the cookies.
Enter name:

Now your machine has a cookie called name. You can set multiple
cookies using multiplekey=value pairs separated by comma.
You will learn how to read this cookie in next section.

Reading Cookies:
Reading a cookie is just as simple as writing one, because the
value of the document.cookieobject is the cookie. So you can use
this string whenever you want to access the cookie.
The document.cookie string will keep a list of name=value pairs
separated by semicolons, wherename is the name of a cookie and
value is its string value.
You can use strings' split() function to break the string into key
and values as follows:

Example:
Following is the example to get the cookies set in previous
section.

<html>
<head>
<script type="text/javascript">
<!-function ReadCookie()
{
var allcookies = document.cookie;
alert("All Cookies : " + allcookies );
// Get all the cookies pairs in an array
cookiearray = allcookies.split(';');
// Now take key value pair out of this array

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


name = cookiearray[i].split('=')[0];
value = cookiearray[i].split('=')[1];
alert("Key is : " + name + " and Value is : " +
value);
}
}
//-->
</script>
</head>
<body>
<form name="myform" action="">
<input type="button" value="Get Cookie"
onclick="ReadCookie()"/>
</form>
</body>
</html>
Note: Here length is a method of Array class which returns the
length of an array. We will discuss Arrays in a separate chapter.
By that time please try to digest it.
This will produce following result. Now press the button "Get
Cookie" to see the cookies which you have set in previous
section.
Note: There may be some other cookies already set on your
machine. So above code will show you all the cookies set at your
machine.

Setting the Cookies Expiration Date:


You can extend the life of a cookie beyond the current browser
session by setting an expiration date and saving the expiration
date within the cookie. This can be done by setting
the expiresattribute to a date and time.

Example:
The following example illustrates how to set cookie expiration
date after 1 Month :

<html>
<head>
<script type="text/javascript">
<!-function WriteCookie()
{
var now = new Date();
now.setMonth( now.getMonth() + 1 );
cookievalue = escape(document.myform.customer.value)
+ ";"
document.cookie="name=" + cookievalue;
document.cookie = "expires=" + now.toUTCString() +
";"
alert("Setting Cookies : " + "name=" +
cookievalue );
}
//-->
</script>
</head>
<body>
<form name="formname" action="">
Enter name: <input type="text" name="customer"/>
<input type="button" value="Set Cookie"
onclick="WriteCookie()"/>
</form>
</body>
</html>

Deleting a Cookie:

Sometimes you will want to delete a cookie so that subsequent


attempts to read the cookie return nothing. To do this, you just
need to set the expiration date to a time in the past.

Example:
The following example illustrates how to delete cookie by setting
expiration date one Month in past :

<html>
<head>
<script type="text/javascript">
<!-function WriteCookie()
{
var now = new Date();
now.setMonth( now.getMonth() - 1 );
cookievalue = escape(document.myform.customer.value)
+ ";"
document.cookie="name=" + cookievalue;
document.cookie = "expires=" + now.toUTCString() +
";"
alert("Setting Cookies : " + "name=" +
cookievalue );
}
//-->
</script>
</head>
<body>
<form name="formname" action="">
Enter name: <input type="text" name="customer"/>
<input type="button" value="Set Cookie"
onclick="WriteCookie()"/>
</form>
</body>

</html>
Note: Instead of setting
using setTime() function.

date,

you

can

see

new

time

You might also like