Scribd
Upload
3 views

css notes 4

This document covers the basics of cookies, including how to create, read, write, and delete them in a web browser using JavaScript. It explains the differences between session and persistent cookies, how to set expiration dates, and provides various code examples for cookie operations. Additionally, it discusses related topics such as opening and closing windows, managing browser history, and setting intervals for alerts.

Uploaded by

hj05102006
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

css notes 4

This document covers the basics of cookies, including how to create, read, write, and delete them in a web browser using JavaScript. It explains the differences between session and persistent cookies, how to set expiration dates, and provides various code examples for cookie operations. Additionally, it discusses related topics such as opening and closing windows, managing browser history, and setting intervals for alerts.

Uploaded by

hj05102006
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 16

CSS UNIT 4 : COOKIE AND BROWSER DATA (8MARKS)

SYLLABUS :
4.1 basic of cookies, reading a cookie value, writing a cookie value, creating a
cookies, deleting a cookies, setting the expiration date ofcookie.

4.1.1 basic of cookies :


1. cookie is a small piece of data stored in a file on your computer .
2. the information stored in the cookie is accesed by the web browser
3. Cookies remembers the information about the user in following ways-
Step 1 : When the user visits the Web page his or her name can be stored in Cookie
Step 2 : Next time when the user visits the page the cookie remembers his or her name
Cookie works as follows :

1. storing information :
When user visits to website The basic information such as username and password can be
stored in the cookie.
2. Accessing information :
I) The stored username and password can be accessed by the web browser which is
remembered by the browser in the form of cookie.
II) So, when you come back to the website, the browser can quickly access thesaved details to
make things easier for you.
III) Cookies are saved in the form of name value pair as follows : Username = “student”;
3. Cookie contains following data :
1. A name-value pair
2. An expiry date for that cookie ((how long the cookie will last before it gets deleted)
3. The website/Domain name that created the cookie

Types of cookie :
1. Session cookie :
I) Session cookies are temporary cookies that remember users online activities throughout the
session.
II) I.e It remember the information when a user logged in until logout or when a user close the web
page. when user gets logged out the session cookies get expired.

2. Persistent cooking.
I) A persistent cookie lasts longer because it has an expiration date. It stays saved on your
computer even after you log out or close the browser, until it reaches that expiration date.
II) These cookies are stored in a folder in your browser’s installation files.
III) You can create, read, or delete these cookies using JavaScript through thedocument.cookie
command.
CREATING A COOKIE

To create a cookie we need to assign a value to cookie by using


document.cookie as follows :

document.cookie = “key=value”;

You can also Add an expiry date to the cookie in UTC time format as follows :
II) to create cookie you must have local server means you cannot store cookie when html file is open
Document.cookie = “Username = student; expires = Thu, 4 july 2019 11:30:00
UTC”

with your file explorer folder you must open html file using live server extension.

WAP to create a cookie : form and using name attribute

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>create cooike</title>
<script>
function create_cookie()
{
var cvalue = document.getElementById("mytext").value;
document.cookie = "username="+cvalue;
alert("cookie is created");
document.write(document.cookie)
}
</script>
</head>
<body>
<input type="text" name="mytext" id="mytext">
<input type="button" value="btn" onclick="create_cookie()">
</body>
</html>

Output :
READING AND WRITING A COOKIE VALUE

• When cookie is created , it can be read by browser.


• The values of all the cookies are stored in the “document.cookie” object and it is in the string format.
• When we create a new cookie it is stored in the form of key = value pair
• The respective cookie values are separated by the semicolon (;) where name is the name of the cookie
and value is The Associated String Value
• In other words after adding a new (name = value) pair to the document.cookie the new pair will be
concatenated with already created string of document.cookie
• If you want to update the cookie value of existing cookie , we need to it again.

<html>
<head>
<title>reading and writing a cookie</title>
<script>
function write1()
{
var cookieValue=document.getElementById("mytext").value;
document.cookie ="username="+cookieValue;
alert("write succesfully");
}
function readCookie()
{
var x;
if(document.cookie="")
{
x="";
alert("please enter the username")
}
else
{
x = document.cookie;
alert("all stored cookie are 👉"+x);
}
}
</script>
</head>
<body>
<form action="" name="myform">
Enter the Username : <input type="text" name="mytext" id="mytext" placeholder="enter
the name">
<br><br>
<input type="button" value="write cookie" onclick="write1()">

<input type="button" value="read me" onclick="readCookie()">


</form>
</body>
</html>
Deleting cookie

• If the cookie is temporary cookie then it is automatically deleted when we close the browser.
• If you want to delete temporary cookie without closing the browser then we have to update the expiry
date of the cookie manually to the past date.
• Similarly if the cookie is persistent cooking then we have to update expiry date of the cookie to the past
date.
• In both cases the respective cookies are automatically deleted after expiry date and automatically
deleted by browser.

Note : below porgramm is of create read and delete cookie

<html>
<title>deleting cookie</title>
</head>
<body>
<script>
var cookieVal;
function createCookie() {
cookieVal = document.getElementById("username").value;
document.cookie = "Username=" + cookieVal;
alert("cookie is created");
}
function readCookie() {
if (document.cookie = "") {
alert("cookie not found");
}
else {
alert(document.cookie);
}
}
function deletecookie() {
if (document.cookie = "") {
alert(" no cookie found to delete");
}
else {
document.cookie = "Username=" + cookieVal + "; expires=Thu, 24 Oct 2023
00:00:00 UTC";
alert("cookie is deleted");
}
}
</script>
</body>
<form action="" name="myform">
<input type="text" name="username" id="username">
<br>
<input type="button" value="create cookie" onclick="createCookie()"><br>
<input type="button" value="read cookie" onclick="readCookie()"><br>
<input type="button" value="delete cookie" onclick="deletecookie()">
</form>
</html>
Output :
Setting Expiry date of cookie

• We can extend the life of cookie by updating the expiry date of the cookie to the future date .
• This can be done by setting the value of expires property to the new date and time
• The new date object is obtained by using the “new date()” function.
• To access the value of the date following functions are close
A) getMonth() : returns month of current date object.
B) setMonth() : Set’s the month to current date object.
C) toUTCString() : this function formats the expiry date in the standard format.

Jsp to setting expiry date of cookie


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>changing expiry date of the cookie</title>
<script>
function changeDate()
{
var cookieValue = document.getElementById("username").value;
var today = new Date();
today.setTime(today.getMonth()+1);
document.cookie = "username="+cookieValue+";expires="+today.toUTCString();
alert("the date of the cookie is changed and the given cookie is
👇👇\n"+document.cookie);
}
</script>
</head>
<body>
<form action="" name="entry">
enter the name : <input type="text" name="username" id="username"><br><br>
<input type="button" value="change expiry date" onclick="changeDate()">
</form>
</body>
</html>
Opening and Closing a window

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>closing a window</title>
<script>
var a;
function openWindow()
{
a = window.open("","himanshu","width=400 height=400");
a.document.write("himanshu");
}
function closeWindow()
{
a.close();
}
</script>
</head>
<body>
<button onclick="openWindow()">open</button><br><br>
<button onclick="closeWindow()"> closeWindow</button>
</body>
</html>

Output :
Focous () window

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>closing a window</title>
<script>
var a;
function openWindow()
{
a = window.open("","himanshu","width=400 height=400");
a.document.write("himanshu");
a.focus();
}
function closeWindow()
{
a.close();
}
</script>
</head>
<body>
<button onclick="openWindow()">open</button><br><br>
<button onclick="closeWindow()"> closeWindow</button>
</body>
</html>

Output :
Same as above

Jsp to open multiple window using loop

<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Opening Multiple Window</title>
<script>
var a;
function MultipleWindow() {
for (let i = 0; i <= 5; i++) {
window.open("", "", "left=400 top=400 width=400 height=400");
}
}
</script>
</head>

<body>
<button onclick="MultipleWindow()">opening Multiple window</button>
</body>
</html>
Same as above o/p but multiple window operlap each other ok
<html>
<head>
<title>Document</title>
<script>
function myfun() {
setTimeout(displayfun, 5000); // Wait for 5 seconds before displaying the
alert
}
function displayfun() {
alert("I am Vinayak closing");
}
</script>
</head>
<body>
<input type="button" name="b1" value="Close" onclick="myfun()">
</body>
</html>

o/p alert box will appear after 5 sec

setInterval() : this function called repeatedly after a specif time interval

<html>
<head>
<title>Document</title>
<script>
function myfun() {
setInterval(displayfun, 5000); // Wait for 5 seconds before displaying the
alert
}
function displayfun() {
alert("I am Vinayak closing");
}
</script>
</head>
<body>
<input type="button" name="b1" value="Close" onclick="myfun()">
</body>
</html> note : programm displays alert box in every 5 sec

note : programm displays alert box in every 5 sec


History
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function next() {
window.history.forward();
}

function previous() {
window.history.back();
}

function histlen() {
document.getElementById("myid").innerText = "Length of history is " +
history.length;
}
</script>
</head>
<body onload="histlen()">
<input type="button" value="NEXT" onclick="next()"><br>
<input type="button" value="BACK" onclick="previous()"><br>
<div id="myid"></div>
</body>
</html>

Output :

WAP to create cookie with expiry date.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function expiryCookie()
{
with(document.forms.myform)
{
var k = username.value;
document.cookie="Username=+k;expires=Thu , 23 Oct 2014 12:00:00 UTC";
alert("cookie is deleted");
alert(document.cookie);
}
}
</script>
</head>
<body>
<form action="" name="myform">
<input type="text" name="username" id="username"><br><br>
<input type="button" value="deleted cookie" onclick="expiryCookie()">
</form>
</body>
</html>

WAP to implement all cookie operation.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>All cookie operation in javascript</title>
<script>
function create()
{
with(document.forms.myform)
{

document.cookie = "username=himanshu";
document.cookie = "name=jadhav";
document.cookie = "std=6th";
alert(document.cookie);
}

}
function read()
{
var readCookie = document.cookie;

alert(readCookie);
}
function deletedCookie()
{
document.cookie = "username=himanshu;expires=Thu, 24 mar 2021 00:00:00 UTC";
alert("cookie is deleted"+document.cookie);
}
</script>
</head>
<body>
<form name="myform">
<input type="text" name="username" id="username"><br><br>
<input type="button" value="create cookie" onclick="create()"><br>
<input type="button" value="readCookie" onclick="read()"><br>
<input type="button" value="deletecookie" onclick="deletedCookie()"><br>

</form>
</body>
</html>
4.1.2 : Reading a cookie value

WAP to implement reading a cookie value (simple)


<!DOCTYPE html>
<html>

<head>
<script>
function readCookie() {
document.cookie = "user = dev";
document.cookie = "pass = dev@333";
let all_cookies = document.cookie;
document.write("ALl cookie = " + all_cookies);
}
</script>
</head>
<body>
<p>Click the following button to get the Cookies:</p>
<input type="button" value="Get cookie" onclick="readCookie()">
</body>
</html>
4.1.3 : Deleting a cookie value

Wap to implement deleting a cookie value


<head>
<script>
function deletecookie() {
var cookie_val = username.value;
document.cookie = "Username = " + cookie_val +
";expires = sun, 4 feb 2024 12:00:00 UTC"
alert("Cookie is deleted!");
}
</script>
</head>
<body>
Enter Username : <input type="text" id="username">
<input type="button" value="Delete Cookie"
onclick="deletecookie()">
</body>
4.1.4 : Setting expiration date to cookie

WAP to setting expiration date to cookie


<head>
<script>
function expirydate() {
var cookie_val = username.value;
document.cookie = "Username = " + cookie_val +
";expires = sat, 19 oct 2024 12:00:00 UTC";
alert("Cookie created with expiry date");
}
</script>
</head>
<body>
Enter Username : <input type="text" id="username">
<input type="text" value="create cookie with expiry date"
onclick="expirydate()">
</body>

Note : remember syntax of expiry date(‘’ before ;)


document.cookie = "Username=" + cookie_val + "; expires=Wed, 23 Oct 2024
12:00:00 UTC";

You might also like