Web Technologies Lab Sem I
Task 1
Create an HTML web page, as shown below. The cookie1 and cookie2 will be set on pressing Set Cookie1or Set Cookie2 button and the stored cookie value will be displayed on pressing Get Cookie1 or Get Cookie2 button respectively. On the other hand selectively cookie can be deleted by pressing Delete Cookie1 or Delete Cookie2 button. Display all cookies button will show all the stored cookies.
I’ll split the code for this in two parts. The first is the interface, i.e. HTML code while the second is the javascript required to control the cookies.
<!DOCTYPE html>
<html>
<head>
<meta name="dummy cookie"/>
<style>
.flex {
display: flexbox;
flex: 3 3;
}
</style>
</head>
<script >
function handleAdd(cn, cv, expiry_in_days) {
addCookie(cn, cv, expiry_in_days);
setTextForElement('showOutput',`Added Cookie ${cv} with value ${cn}`)
}
function handleGet(cn) {
const cv = getCookie(cn);
if (cv === null) {
setTextForElement('showOutput', `Cookie ${cn} doesn't exist`);
return
}
setTextForElement('showOutput', `Cookie ${cn} has value ${cv}`);
}
function handleDelete(cn) {
try {
deleteCookie(cn)
setTextForElement('showOutput',`Cookie ${cn} deleted.`)
}catch(ex) {
setTextForElement('showOutput',`Cookie ${cn} doesn't exist.`)
}
}
</script>
<body>
<div class=".flex">
<button id="setc1"
onclick="handleAdd('Cookie1', 'Cookie Value 1', 2)"
value="Set Cookie 1">Set Cookie 1</button>
<button id="getc1"
onclick="handleGet('Cookie1')"
value="Get Cookie 1">Get Cookie 1</button>
<button id="delc1"
onclick="handleDelete('Cookie1')"
value="Delete Cookie 1">Delete Cookie 1</button>
</div>
<div class=".flex">
<button id="setc2"
onclick="handleAdd('Cookie2', 'Cookie Value 2', 2)"
value="Set Cookie 2">Set Cookie 2</button>
<button id="getc2"
onclick="handleGet('Cookie2')"
value="Get Cookie 2">Get Cookie 2</button>
<button id="delc2"
onclick="handleDelete('Cookie2')"
value="Delete Cookie 2">Delete Cookie 2</button>
</div>
<button id="showAll"
onclick="setTextForElement('showOutput',
`Cookie1 = ${getCookie('Cookie1')}`+' , ' +
`Cookie2 = ${getCookie('Cookie2')}`)"
>Display All Cookies</button>
<p id="showOutput"></p>
<script src="./4.js"></script>
</body>
</html> Managing Cookies
We can access the cookies for a particular website (document) using the
document.cookie
variable in javascript. This gives though all the cookies separated by the ; which is what we do in the function getCookie. Note that you can only add one cookie at a time through document.cookie
function addCookie(name, value, expiry_in_days) {
if (name === null) {
throw "cookie name can't be null"
}
expiry_in_days = expiry_in_days ?? 1;
const dateObj = new Date();
dateObj.setTime(dateObj.getTime() + (expiry_in_days * 24 * 3600 * 1000));
document.cookie = `${name}=${value};expires=${dateObj.toUTCString()}`
}
function getCookie(name) {
if (name === null) {
return null
}
const cookies = document.cookie.split(';');
const cookiesMap = new Map();
cookies.forEach(cookie=> {
const cookie_kv = cookie.split('=');
cookiesMap[cookie_kv[0]] = cookie_kv[1];
});
return cookiesMap[name];
}
function deleteCookie(name) {
addCookie(name, null, -1);
}
function setTextForElement(id, text) {
const element = document.getElementById(id);
if (element !== null) {
element.innerText = `${text}`
}
}
Improvements
The function getCookie is iterating over all cookies and then creating a map out of it to return the correct value. One idea to improve would be to use a global map containing all the cookies so that when a cookie needs to be looked up it can be looked up faster.