¿Cómo puedo hacer que las 2 funciones setTimeOut que muestran el elemento con id="mess" y luego lo oculten, se ejecuten solo una vez por sesión, de modo que si el usuario va a otra página, no se vuelva a ejecutar? Sé que el código no funciona aquí. Se está trabajando en un sitio web en wordpress con elementor. ¡Gracias!
<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>