Cookies grant developers access to the hard disk of the user, to our hard disk. The thought alone is ominous. The browser allows the page, via JavaScript, access. There are severe limits to the size of what can be stored, and the format is quite restricted too. A cookie with a life span until the user closes the browser is set as follows:
document.cookie = 'foo=bar; path=/';This is called a session-based cookie because of its limited lifespan. You might need to store some information for longer than just the session. This is done by putting an expiration date into the cookie. Example:
document.cookie = 'bar=baz; path=/; expires=Wed, Sep 18 2019 15:27:28';We have created a simple primitive usage demo of that:
<!doctype html>
<html>
<head>
<title>NMLs Cookie Demo</title>
<meta charset='utf-8'/>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
</head>
<body>
<div>TODO write content</div>
<script>
let date = new Date();
date.setTime(date.getTime() + (24 * 60 * 60 * 1000));
let expires = date.toGMTString();
document.write('<p>Before:</p>');
document.write('<p>'+ document.cookie +'</p>');
document.write('<p>Now:</p>');
document.cookie = 'foo=bar; path=/; expires=' + expires;
document.write('<p>'+ document.cookie +'</p>');
document.cookie = 'bar=baz; path=/';
document.write('<p>'+ document.cookie +'</p>');
document.cookie = 'player001=27; path=/';
document.write('<p>'+ document.cookie +'</p>');
</script>
</body>
</html>
Restarting the browser and reloading the page will reveal what cookies survived.
The coding is a bit cumbersome, so our friend, the developer Peter-Paul Koch wrote a couple of functions to help us out. We have allowed ourselves the liberty to apply Crockford rules to them. My variant:
"use strict";
function createCookie(name, value, days) {
let expires;
let samesite = "; sameSite=lax"; // nml
if (days) {
let date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toGMTString();
}
else {
expires = "";
}
document.cookie = name + "=" + value + expires + samesite + "; path=/"; // nml
}
function readCookie(name) {
let nameEQ = name + "=";
let ca = document.cookie.split(";");
for (let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == " ") {
c = c.substring(1,c.length);
}
if (c.indexOf(nameEQ) == 0) {
return c.substring(nameEQ.length, c.length);
}
}
return null;
}
function eraseCookie(name) {
createCookie(name, "", -1);
}
Do you need further explanation to them than what we can see here, go to PPK's site at https://quirksmode.org/js/cookies.html