This should work, although I could not test it as you are not allowed to set a cookie on a third-party website.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<button id="refresh" type="button" data-toggle="tooltip" data-placement="bottom" class="btn-shadow mr-3 btn btn-dark">Refresh</button>
<script>
const setRefreshCookie = () => {
const now = new Date();
const tomorrow = new Date();
/*
* if you want the cookie to expire after 24 hours from the last click
* on the refresh button, you use only 'tomorrow.setTime()' otherwise,
* if you want the cookie to expire as soon as the date changes (even if
* 24 hours have not passed yet) you use both 'tomorrow.setTime()' and
* 'tomorrow.setHours()'
*/
tomorrow.setTime(now.getTime() + 1000 * 60 * 60 * 24);
tomorrow.setHours(0, 0, 0, 0);
document.cookie = 'preventRefesh=true;expires=' + tomorrow.toUTCString() + 'domain=yourdomain.tld;path=/path/to/page';
};
const checkRefreshCookie = () => {
return document.cookie.split('; ').some(cookie => cookie.split('=')[0] === 'preventRefesh');
};
const refreshBtn = document.getElementById('refresh');
const isRefreshCookieSet = checkRefreshCookie();
document.addEventListener('load', () => {
if (isRefreshCookieSet ) {
/*
* disable the button, so that the user has a visual feedback
*/
refreshBtn.setAttribute('disabled', true);
}
});
refreshBtn.addEventListener('click', (event) => {
if (!isRefreshCookieSet ) {
setRefreshCookie();
// location.reload();
console.log('refeshing the page...');
}
event.preventDefault();
event.stopPropagation();
});
</script>
</body>
</html>