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:
