Develop a webpage for creating session and persistent cookies. Observe the effects with Browser cookie settings

Laboratory Objective:

To learn concepts of Cookies.
To create cookie based on the given problem.
Develop JavaScript to manage a cookie in the given manner.

Cookies Basics

A cookie is a small piece of information that a web site writes to user’s hard disk when he visit the site.
Cookies let you store user information in web pages.
Cookies are data, stored in small text files, on your computer.
When a web server has sent a web page to a browser, the connection is shut down, and the server forgets everything about the user.
Cookies were invented to solve the problem “how to remember information about the user”:

When a user visits a web page, his/her name can be stored in a cookie.
Next time the user visits the page, the cookie “remembers” his/her name.

A JavaScript can be used to create cookies whenever someone visits the web page that contains the script.
A JavaScript can also be used to read cookies stored on a user’s computer, and it uses the information stored in a cookie to personalize the web page that a user visits.
The text of a cookie must contain a name-value pair, which is a name and value of the information.
There are two types of Cookies:
1) Session cookies
2) Persistent cookies

1) Session Cookies

Also also known as an in-memory cookie
It resides in memory for the length of the browser session.
A browser session begins when the user starts the browser and ends when the user exits the browser.
Even if the user surfs to another web site, the cookie remains in memory.
Session cookie is automatically deleted when the user exits the browser application.

2) Persistent Cookies

Also known as transient cookie.
A persistent cookie is a cookie that is assigned an expiration date.
It is written to the computer’s hard disk and remains there until the expiration date has been reached; then it’s deleted.

Sample Program

1) Write a JavaScript program to create a cookie.

<html>

<head>

function createCookie()

{

var x = document.getElementById('myname').value

document.cookie = "name=" + x + ";"

alert("Cookie Written..")

}

</script>

</head>

<body>

Enter ur name <input type="text" id="myname" onchange="createCookie()"/>

</body>

</html>

2) Write a program to create a persistent cookie

<html>

<body>

var date = new Date();

var days=2;

date.setTime(date.getTime()+(days*24*60*60*1000));

var expires = date.toGMTString();

document.cookie = "user=Rahul; expires="+ expires + ";"

alert("Cookie Created\n"+document.cookie)

</script>

</body>

</html>

3) Develop a program to create and read a cookie

<html>

<head>

function setCookie()

{

var name = document.getElementById('person').value

document.cookie = "name=" + name + ";"

alert("Cookie Created")

}

function readCookie()

{

var cookie = document.cookie

var panel = document.getElementById('panel')

if(cookie == "")

panel.innerHTML = "Cookie not found"

else

panel.innerHTML = cookie

}

</script>

</head>

<body>

Enter your name <input type="text" id="person"/><br/>

</form>

</body>

</html>

4) Write a webpage that displays a form that contains an input for Username and Password. User is prompted to enter the input and password and password becomes value of the cookie. Write the JavaScript function for storing the cookie. It gets executed when the password changes

<html>

<head>

function storeCookie()

{

var pwd = document.getElementById('pwd').value

document.cookie = "Password=" + pwd + ";"

alert("Cookie Stored\n" + document.cookie)

}

</script>

</head>

<body>

Enter Username <input type="text" id="uname"/><br/>

Enter Password <input type="password" id="pwd"/><br/>

</form>

</body>

</html>