Scribd
Upload
3 views

CSS Practical No 10

The document contains two HTML programs demonstrating the creation and management of cookies. The first program focuses on persistent cookies, allowing users to set, get, and delete cookies with an expiry date. The second program is for session cookies, featuring functions to create, read, delete, list, and clear cookies without an expiry date.

Uploaded by

faizanmulla1202
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
3 views

CSS Practical No 10

The document contains two HTML programs demonstrating the creation and management of cookies. The first program focuses on persistent cookies, allowing users to set, get, and delete cookies with an expiry date. The second program is for session cookies, featuring functions to create, read, delete, list, and clear cookies without an expiry date.

Uploaded by

faizanmulla1202
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/ 8

Practical No 10

Q.1) Program to create persistent cookies.


Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Persistent Cookies Example</title>
</head>
<body>
<h2>Persistent Cookies Example</h2>

<label for="cookieName">Cookie Name:</label>


<input type="text" id="cookieName"><br><br>

<label for="cookieValue">Cookie Value:</label>


<input type="text" id="cookieValue"><br><br>

<label for="cookieDays">Days Until Expiry:</label>


<input type="number" id="cookieDays" value="7"><br><br>

<button onclick="setCookie()">Set Cookie</button>


<button onclick="getCookie()">Get Cookie</button>
<button onclick="deleteCookie()">Delete Cookie</button>

<div id="cookieOutput"></div>

<script>
function setCookie() {
const name = document.getElementById('cookieName').value;
const value = document.getElementById('cookieValue').value;
const days = parseInt(document.getElementById('cookieDays').value);
const expires = new Date();
expires.setTime(expires.getTime() + (days * 24 * 60 * 60 * 1000)); // Set expiry time
const expiresStr = `expires=${expires.toUTCString()}`;

document.cookie = `${name}=${value}; ${expiresStr}; path=/`;


document.getElementById('cookieOutput').innerHTML = `Cookie '${name}' set
successfully.`;
}

function getCookie() {
const name = document.getElementById('cookieName').value;
const cookieName = `${name}=`;
const decodedCookie = decodeURIComponent(document.cookie);
const cookiesArray = decodedCookie.split(';');

for (let i = 0; i < cookiesArray.length; i++) {


let cookie = cookiesArray[i];
while (cookie.charAt(0) === ' ') {
cookie = cookie.substring(1);
}
if (cookie.indexOf(cookieName) === 0) {
const value = cookie.substring(cookieName.length, cookie.length);
document.getElementById('cookieOutput').innerHTML = `Cookie '${name}' has
value: ${value}`;
return;
}
}
document.getElementById('cookieOutput').innerHTML = `Cookie '${name}' not found.`;
}

function deleteCookie() {
const name = document.getElementById('cookieName').value;
document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/`;
document.getElementById('cookieOutput').innerHTML = `Cookie '${name}' deleted
successfully.`;
}
</script>
</body>
</html>

Output:
Q.2) Program to create session cookies.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enhanced Session Cookies</title>
<script>
// Function to create a session cookie
function createCookie(name, value) {
if (name && value) {
document.cookie = `${name}=${value}; path=/;`;
alert(`Cookie "${name}" created!`);
displayCookies();
} else {
alert("Please enter both cookie name and value.");
}
}

// Function to read a specific cookie by name


function readCookie(name) {
const cookies = document.cookie.split('; ');
for (let cookie of cookies) {
const [cookieName, cookieValue] = cookie.split('=');
if (cookieName === name) {
return cookieValue;
}
}
return null;
}

// Function to delete a specific cookie


function deleteCookie(name) {
document.cookie = `${name}=; path=/; expires=Thu, 01 Jan 1970 00:00:00 UTC;`;
alert(`Cookie "${name}" deleted!`);
displayCookies();
}

// Function to list all cookies


function listCookies() {
const cookies = document.cookie;
return cookies ? cookies.split('; ').map(cookie => cookie) : [];
}

// Function to display all cookies in the webpage


function displayCookies() {
const cookieList = document.getElementById("cookieList");
cookieList.innerHTML = ""; // Clear current list

const cookies = listCookies();


if (cookies.length > 0) {
cookies.forEach(cookie => {
const listItem = document.createElement("li");
listItem.textContent = cookie;
cookieList.appendChild(listItem);
});
} else {
cookieList.textContent = "No cookies available.";
}
}

// Function to clear all cookies


function clearAllCookies() {
const cookies = listCookies();
cookies.forEach(cookie => {
const cookieName = cookie.split('=')[0];
deleteCookie(cookieName); // Delete each cookie
});
alert("All cookies cleared!");
displayCookies();
}

// Function to handle cookie actions


function handleCookie(action) {
const cookieName = document.getElementById("cookieName").value;
const cookieValue = document.getElementById("cookieValue").value;

if (action === 'create') {


createCookie(cookieName, cookieValue);
} else if (action === 'read') {
const value = readCookie(cookieName);
const message = value ? `Cookie Value: ${value}` : "Cookie not found.";
alert(message);
} else if (action === 'delete') {
if (cookieName) {
deleteCookie(cookieName);
} else {
alert("Please enter the cookie name to delete.");
}
} else if (action === 'list') {
displayCookies();
}
}

// Run the function on page load to display current cookies


window.onload = function () {
displayCookies();
};
</script>
</head>
<body>
<h1>Enhanced Session Cookies Management</h1>

<!-- Input fields for creating, reading, or deleting a cookie -->


<label for="cookieName">Cookie Name: </label>
<input type="text" id="cookieName" placeholder="Enter cookie name"><br><br>

<label for="cookieValue">Cookie Value: </label>


<input type="text" id="cookieValue" placeholder="Enter cookie value"><br><br>

<!-- Buttons to perform cookie operations -->


<button onclick="handleCookie('create')">Create Cookie</button>
<button onclick="handleCookie('read')">Read Cookie</button>
<button onclick="handleCookie('delete')">Delete Cookie</button>
<button onclick="handleCookie('list')">List Cookies</button>
<button onclick="clearAllCookies()">Clear All Cookies</button>

<h2>Current Cookies:</h2>
<ul id="cookieList">
<!-- Cookies will be dynamically listed here -->
</ul>
</body>
</html>

Output:

You might also like