Cookie consent
The document.cookie property stores cookies. Read it to see all the cookies for the current page. Set or add to it to overwrite it or add a new cookie.
- When setting a cookie you must specify the name and value and can optionally specify an expiry date (defaults to when the browser is closed) and a path (defaults to the current page).
- Reading a cookie returns a string with just the name and value for each cookie.
Below is a self-contained script that will display a banner and set a “consent” cookie.
<script src="cookies.js" defer></script>
- load the cookies.js script - that’s it :-)
- defer downloads the script in parallel to parsing the page and executes it after the page has finished parsing
- these styles apply to elements created in the JavaScript
.c-div {position:fixed; top:0; right:0; bottom:0; left:0; background-color:RGBA(255,255,255,0.75); backdrop-filter:blur(2px); z-index:9999}
- whole page div: looks like a layer of frosted glass on top of the web page
.c-content {position:absolute; bottom:10%; left:50%; transform:translate(-50%,0); width:200px; padding:10px; text-align:center; background-color:#FFFFFF; box-shadow:1px 1px 5px RGBA(0,0,0,0.5)}
- the cookie message div: 10% from the bottom, centered with a white background and drop-shadow
.c-OK {display:block; margin:10px auto 0; padding:8px 25%; color:#FFFFFF; background-color:#808080}
- the OK button: centered with a grey background
- obviously you can go wild with the style - I’ve kept it simple for this example
- notes coming soon
const cookieName = 'myCookieConsent'
const path = '/';
(function(){
const cookieValue = 'OK'
const expiryDays = 365
function setCookie(_n, _v, _d){
const _e = new Date(Date.now() + (_d * 24 * 60 * 60 * 1000)).toGMTString()
document.cookie = _n + '=' + _v + '; expires=' + _e + '; path=' + path
}
function getCookieValue(_n){
const nameEQ = _n + '='
const 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 dismissBanner(){
setCookie(cookieName, cookieValue, expiryDays)
document.querySelector('.c-div').remove()
}
if (getCookieValue(cookieName) !== cookieValue){
const cDiv = document.createElement('div')
cDiv.classList.add('c-div')
document.body.append(cDiv)
const cContent = document.createElement('div')
cContent.classList.add('c-content')
cDiv.append(cContent)
cContent.append('Your message about cookies goes here.')
const cButton = document.createElement('button')
cButton.classList.add('c-OK')
cContent.append(cButton)
cButton.textContent = 'OK'
cButton.addEventListener('click', dismissBanner)
}
})()
- notes coming soon
function delMyCookie(){
const _day = new Date(Date.now() - 864000000).toGMTString()
document.cookie = cookieName + '=""; expires=' + _day + '; path=' + path
top.location.reload()
}
Copy the sections of script from above (without the notes) into this html skeleton for a working page:
- notes coming soon
<html>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
html {padding:20px 5%; font-family:sans-serif; background-color:#888}
body {height:115%; padding:20px; background-color:#FFF}
/* copy CSS here */
</style>
<body>
<h1>Cookie Consent Test</h1>
<p>Body text.</p>
<p>Click this button to delete your myCookieConsent cookie for testing:<br><br>
<button onClick="delMyCookie()">delete cookie</button></p>
<button onClick="delMyCookie()">delete cookie</button></p>
<script>
// copy JavaScript here
// copy delMyCookie JavaScript function here
</script>
</body>
</html>
