Lesson 27: Creating Cookies

In this lesson, we will learn how to use JavaScript to create cookies. As we have learned in previous lessons, JavaScript is a scripting language so you can use any text editor to write JavaScipt's cookies.

A cookie is a small piece of information sent from a website and stored in a user's web browser or hard disk while a user is browsing the website. The function of the cookie is to remember and retrieve the web browsing history of the user. Therefore, it can be used to personalize the web page that a user visit. It is a safe and secure method to store data that the user wishes to use later.Many companies' websites use cookies for marketing purposes which include advertising. For example, Google employs JavaScript in its famous AdSense advertising program, where publishers can insert generated JavaScript Code in their web pages for displaying advertisements.

27.1 The Syntax of a Cookie in JavaScript

A JavaScript cookie comprises two important components, the name and value, where the name is a variable that is used to store the value. The syntax is:

name='value'

For example, the cookie that is used to store a username can be written as follows:

username='John'

* username is the name and John is the value of the cookie.

To create the above cookie, you need to assign the cookie to the window.document.cookie object. The browser will automatically store the cookie in the memory when it comes across the above statement.

Each cookie should consist of four parts: name, assignment operator, value and semicolon. The assignment statement that creates the cookie is shown below:

window.document.cookie="Username='John';"

27.2 The JavaScipt to create a Cookie in JavaScript

In the previous section, we have learned about the syntax of a cookie in JavaScript. Now we shall learn how to write the actual code to create a cookie in JavaScript. In order to create a cookie, we need to write a JavaScript function. The following JavaScript function will create a cookie that accepts input from the user and store the data in the browser until the browsing session ends.

<Script >
function CreateCookie()

{ document.cookie='UserName='+User.value
alert("Cookie Created")
User.value=""
}

</script>

You also need to create the following text box and button.

Enter your name:
<input type="text" name="User">
<input type="button" value="Enter" name="Enter" onClick="CreateCookie()">

After creating the cookie, we need to read the cookie. In order to read the cookie, we have to write a cookie reading function in JavaScript. The following sample code illustrates how to create and read a cookie.

<script>

function WriteCookie()

{document.cookie='name='+student.value
alert("Cookie Written")
student.value=""}

function ReadCookie()
{mycookie=unescape(document.cookie.split('=')[1])
showcookie.value=mycookie}
</script>

We also create the following input box and button.

Enter Student Name:<input type="text" name="student" >
<input type="button" value="Enter" name="Enter" onClick="WriteCookie()"><br><br>
The cookie is:<input type="text" name="showcookie" >
<input type="button" value="Show Cookie" name="Display" onClick="ReadCookie()">

Enter Student Name:

The cookie is:

* The Script works best in IE, maynot work in Chrome and Firefox.

*Note that the unescape() function is used to decode an encoded string. For example,

var1="Need%20tips%3F%20Visit%20javascript-tutor.net%21"
unescape(var1)=Need tips? Visit javascript-tutor.net!