How can I make the 2 functions setTimeOut that are showing the element with id="mess" and then hiding it, run only once per session, so that if the user goes to another page, it doesnt run again. I know the code doesnt work here. It is working on a website on wordpress with elementor. Thank you!
<script type="text/javascript">
const cursorz = document.getElementById("cursorz");
const moveCursor = event => {
const cursorWidth = cursorz.offsetWidth / 2;
cursorz.style.left = event.pageX - cursorWidth + "px";
cursorz.style.top = event.pageY - cursorWidth + "px";
};
document.addEventListener("mousemove", moveCursor);
setTimeout(function(){
document.getElementById('mess').classList.add('show');
}, 5000);
setTimeout(function(){
document.getElementById('mess').classList.remove('show');
}, 10000);
</script>@media only screen and (min-width: 1367px) {
body {cursor:none;}
.message {
width: 20em;
height: 5em;
padding: 10px;
border: 2px solid black;
color: white;
background-color: black;
position: absolute;
top: 2em;
left: 2em;
border-radius: 20px;
text-align: center;
vertical-align: baseline;
transition: all 2s ease;
z-index: 2;
display: none;
}
.show {
display: block;
}
#cursorz {
z-index:1000000;
pointer-events: none;
width: 2rem;
height: 2rem;
will-change: transform;
background: #f1f1f1;
position: absolute;
mix-blend-mode: difference;
border-radius: 50%;
}
}<div id="cursorz">
<div class="message" id="mess">Look at you! You look beautiful today!</div>
</div>