Scribd
Upload
20 views

Css Practical No - 10

Uploaded by

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

Css Practical No - 10

Uploaded by

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

Practical No. 10: Develop a webpage for creating session and persistent cookies.

Cookies
• Cookies are data, stored in small text files, on the computer.
• Cookies remember information about the user like 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.

Contents of Cookie

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

CREATING A COOKIE

• JavaScript can create, read, and delete cookies with the document.cookie property.
Eg : document.cookie = "username=John Doe";
• You can also add an expiry date (in UTC time). By default, the cookie is deleted when the
browser is closed:
Eg : document.cookie = "username=John Doe; expires=Thu, 18 Dec 2024 12:00:00 UTC";
• With a path parameter, you can tell the browser what path the cookie belongs to. By
default,
the cookie belongs to the current page.
Eg : document.cookie = "username=John Doe; expires=Thu, 18 Dec 2024 12:00:00
UTC; path=/";

READING A COOKIE

● Reading a cookie is just as simple as writing one, because the value of the
document.cookie the object is the cookie.
• 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.

DELETING A COOKIE

Sometimes you will want to delete a cookie.


• To do this, you just need to set the expiry date to a time in the past.

TYPES OF COOKIE

There are 3 types of Cookies available


1. Session Cookies: They are the cookies which do not have an expiry date. They are
deleted when the browser window is closed
2. Persistent Cookies : They are the cookies which have an expiry date and are deleted
on the date set.
3.Third Party Cookies

Questions.
1.Write a function to delete a cookie.
Ans:
We can delete cookies by following statements
document.cookie=”expires=Thu , 18 Dec 2024 12:00 UTC”;
also
Function to delete a cookie by name function
deleteCookie(name)
{
// Set the cookie with the same name, empty value, and an expiration date in the past
document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/`;
}

Exercise:-
1.Write a program to create a session cookie and display content of Cookie.

Code:
<!DOCTYPE html>
<html lang="en">
<head>

<title>Practical 10</title>
</head>
<body>
<div>
<span>This is Session Cookies</span>
<div id="Session_Cookies"></div>
<div id="Persistent_Cookies"></div>
</div>
<script type="text/javascript">
// Set a session cookie
document.cookie = "username=student name";

// Display current cookies in the session cookies div


document.getElementById("Session_Cookies").innerHTML = document.cookie;

// Set a persistent cookie with an expiration date


document.cookie = "username=ram; expires=Thu, 18 Dec 2024 12:00:00 UTC";

// Display the updated cookies in the persistent cookies div


document.getElementById("Persistent_Cookies").innerHTML = document.cookie;

// Alert the cookies (optional)


alert(document.cookie);
</script>
</body>
</html>

Output:

2. Write a JavaScript that creates persistent cookies.


<!DOCTYPE html>
<html lang="en">
<head>

<title>Persistent Cookies Example</title>


</head>
<body>
<h1>Persistent Cookie Example</h1>
<button id="setCookie">Set Persistent Cookie</button>
<button id="getCookie">Get Cookie</button>
<div id="cookieValue"></div>

<script type="text/javascript">
// Function to set a persistent cookie
function setPersistentCookie(name, value, days) {
// Create a new Date object for expiration
const expires = new Date();
// Calculate the expiration time in milliseconds
expires.setTime(expires.getTime() + (days * 24 * 60 * 60 * 1000)); // Days to
milliseconds
// Set the cookie with name, value, expiration date, and path
document.cookie = `${name}=${value}; expires=${expires.toUTCString()}; path=/`;
}

// Function to retrieve the value of a cookie by name


function getCookie(name) {
const nameEQ = name + "="; // Create a string to search for
// Split document.cookie into individual cookies
const ca = document.cookie.split(';');
for (let i = 0; i < ca.length; i++) {
let c = ca[i].trim(); // Trim whitespace
// Check if the current cookie starts with the desired name
if (c.indexOf(nameEQ) === 0) {
return c.substring(nameEQ.length, c.length); // Return the cookie value
}
}
return null; // Return null if the cookie is not found
}

// Event listener for the "Set Persistent Cookie" button


document.getElementById('setCookie').addEventListener('click', () => {
// Call the setPersistentCookie function with name, value, and expiration days
setPersistentCookie('username', 'student', 7); // Set cookie for 7 days
alert('Persistent cookie has been set!'); // Alert user that the cookie is set
});

// Event listener for the "Get Cookie" button


document.getElementById('getCookie').addEventListener('click', () => {
// Call the getCookie function and store the result
const cookieValue = getCookie('username');
// Display the cookie value or a message if not found
document.getElementById('cookieValue').innerText = cookieValue ? `Cookie value: $
{cookieValue}` : 'Cookie not found.';
});
</script>
</body>
</html>

You might also like