Client Side Scripting Language(22519) By Mrs.
Poonam Amit
Kamble
Unit IV
Cookies and Browser Data
Syllabus:
4.1 Cookies –
basic of cookies
reading a cookie value
writing a cookie value
creating a cookies
deleting a cookies
setting the expiration date of cookie
1.2 Browser –
opening a window,
giving the new window focus,
window position,
changing the content of window,
closing a window,
scrolling a web page,
multiple windows at once,
creating a web page in new window,
JavaScript in URLs,
JavaScript security,
Timers,
Browser location and history.
1
Unit I
Basics of JavaScript Programming
Client Side Scripting Language(22519) By Mrs. Poonam Amit
Kamble
Unit IV
Cookies and Browser Data
4.1 1) Basic of cookies
i) What are Cookies?
Cookies are text files used to identify your computer as you use a computer
network with small pieces of data like a username and password. HTTP cookies
are used to identify particular users and improve web browsing experience.
ii) How It Works?
Your 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, your
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-value
pairs.
Cookies were originally designed for CGI programming. The data contained in a
cookie is automatically transmitted between the web browser and the web server,
so CGI scripts on the server can read and write cookie values that are stored on
the client.
2) Creating and Writing Cookies
2
Unit I
Basics of JavaScript Programming
Client Side Scripting Language(22519) By Mrs. Poonam Amit
Kamble
The simplest way to create a cookie is to assign a string value to the
document.cookie object, which is given below:
document.cookie = "key1=value1;key2=value2;expires=date"; Here the
expires attribute is optional. If you provide this attribute with a valid date
or
time, then the cookie will expire on a given date or time and thereafter, the
cookies' value will not be accCreating a cookies
<html>
<head>
<script>
function setcookie1(){
if( document.form1.student.value == "" ) {
alert("Please Enter Name");
return;
}
cookievalue = document.form1.student.value + ";";
document.cookie = "Name=" + cookievalue;
alert(document.cookie);
}
function setcookie2(){
if( document.form1.student.value == "" ) {
alert("Please Enter Name");
return;
}
cookievalue = document.form1.student.value + ";";
document.cookie = "Name=" + cookievalue+"expires=Mon, 30 Oct 2023 09:30:00 UTC";
alert(document.cookie);
}
function setcookie3(){
if( document.form1.student.value == "" ) {
alert("Please Enter Name");
return;
}
cookievalue = document.form1.student.value + ";";
document.cookie = "Name=" + cookievalue+"Secure";
alert(document.cookie);
}
</script>
</head>
<body>
<form name = "form1" action = "">
Name: <input type = "text" name = "student"/><br><br>
<input type = "button" value = "Set Cookie without Expiry Date" onclick =
"setcookie1()"/><br><br>
<input type = "button" value = "Set Cookie with Expiry Date" onclick =
"setcookie2()"/><br><br>
<input type = "button" value = "Set Secure Cookie" onclick = "setcookie3()"/>
</body>
</html>
3
Unit I
Basics of JavaScript Programming
Client Side Scripting Language(22519) By Mrs. Poonam Amit
Kamble
Initial Form
After clicked on set cookie without expiry date button:
After clicked on set cookie with expiry date button:
After clicked on set secure cookie button:
4
Unit I
Basics of JavaScript Programming
Client Side Scripting Language(22519) By Mrs. Poonam Amit
Kamble
iii) Reading a cookie value
The value of the cookie can be accessed with the help of the
document.cookie object, as the object, when used to encode the cookie, also
stores the data of the respective cookie. If you ever require access to a
particular cookie, you can simply use the document.cookie object of the
respective cookie. As we know, the value of the cookie, when stored in the
browser, is stored in the form of name=value pairs. These pairs form a list
maintained by the document.cookie object, name=value where the field:
name is the name provided to the cookie and the field: value is the string
<html>
<head>
<script>
function setcookie(){
if( document.form1.name.value == "" && document.form1.uname.value == "" )
{
alert("Please fill above details");
return;
}
cookievalue1 = document.form1.name.value + ";";
document.cookie = "Name=" + cookievalue1;
cookievalue2 = document.form1.uname.value + ";";
document.cookie = "Username=" + cookievalue2;
alert(document.cookie);
}
function readcookie(){
if(document.cookie.length==0)
{
alert("No cookie present")
}
else{
var cookies=document.cookie.split(";");
for(var i=0;i<cookies.length;i++)
{
document.write(cookies[i]+"<br>");
}
}
}
</script>
</head>
<body>
<form name = "form1" action = "">
Name: <input type = "text" name = "name"/><br><br>
Username: <input type = "text" name = "uname"/><br><br>
<input type = "button" value = "Set Cookies" onclick = "setcookie()"/>
<input type = "button" value = "Read all cookies" onclick = "readcookie()"/>
</body>
</html>
value of the cookie.
5
Unit I
Basics of JavaScript Programming
Client Side Scripting Language(22519) By Mrs. Poonam Amit
Kamble
Initial Form
After clicked on set cookies button:
After clicked on Read all cookies button:
iv) Deleting a Cookie
To delete a cookie, you just need to set the value of the cookie to empty and
set the value of expires to a passed date.
document.cookie = "cookiename= ; expires = Thu, 01 Jan 2022 00:00:00 UTC"
6
Unit I
Basics of JavaScript Programming
Client Side Scripting Language(22519) By Mrs. Poonam Amit
Kamble
7
Unit I
Basics of JavaScript Programming
Client Side Scripting Language(22519) By Mrs. Poonam Amit
Kamble
v) Deleting a cookies
vi) Setting the expiration date of cookie
4.2 1)
2)
3)
4)
5)
6)
7)
8)
9)
10)
11)
12)
8
Unit I
Basics of JavaScript Programming
