• USA : +1 973 910 5725
  • INDIA: +91 905 291 3388
  • info@tekslate.com
  • Login

Cookies in JavaScript

JavaScript and Cookies

 

What are Cookies?

Web browser and server use HTTP protocol to communicate and HTTP is 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 WebPages.

In many situations, using cookies is the most efficient methof remembering and tracking preferences, purchases, commissions, and other information  required for better visitor experience or site statistics.

 

How it works?

Your serve sends some data to the visitors browser in the forma or a cookie .The browser may accept the cookie .If if does ,it is stored as a plain text record on the visitor’s hard drive. Now, when the visitor arrives at nether page on your site, the browser sends the same cookie to the server for retrieval.Once retrieved , your server knows/remembers what was stored earlier.

 

Cookies are a plain text data record of 5 variables –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 webpage 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 suck restriction exits.

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 webserver, so CGI scripts on the server can read and write cookie 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 webpage.

 

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;kay2=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 Javascrpit 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;

}

Ccokievalue=escape{document.myform.customer.value} +  “;”

Document.cookie=”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>

Now your machine has a cookie called name. You can set multiple cookies using multiple key=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 .cookie object 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, where name is the name of a cookie and value is its string value.

You can use strings’spli() 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 Read Cookie{}

{

Var allcookies=document.cookie;

// 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.lenght; 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=”Set Cookie” onclick=”ReadCookie();”/>

</form>

</body>

</html> 

 

Note

Here length is a method of Array class which returns the length ofan array.

 

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 expires attribute to a date and time.

 

Example

The following is the 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};

Document.cookie=”name=”+cookievalue;

Document.cookie=”expires=”+now.getGMTString{}+”;”

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 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.getGMTString{}+”;”

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>

Instead of setting date, you can see new time using Time() function.

Summary
Review Date
Reviewed Item
Cookies in JavaScript
Author Rating
5

“At TekSlate, we are trying to create high quality tutorials and articles, if you think any information is incorrect or want to add anything to the article, please feel free to get in touch with us at info@tekslate.com, we will update the article in 24 hours.”

0 Responses on Cookies in JavaScript"

Leave a Message

Your email address will not be published. Required fields are marked *

Site Disclaimer, Copyright © 2016 - All Rights Reserved.