Estoy creando un sitio web e intento mostrar un mensaje en la parte superior de la página (dentro del encabezado) para que solo aparezca una vez en cada visita/sesión. Un ejemplo de esto es la barra verde 'Reservar una cita' en la parte superior de este sitio web: https://www.tiffany.co.uk
Mi sitio web está aquí: https://vitrify.tempurl.host/
Llegué a mostrar un mensaje (panel naranja en la parte superior de la página), pero actualmente aparece cada vez que se carga una página. Solo quiero que aparezca una vez, como un consentimiento de cookies.
He pasado horas buscando una solución pero, como no soy programador, estoy luchando. Cualquier ayuda sería muy apreciada.
Aquí está el HTML:
function myFunction() { var x = document.getElementById("topDIV"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } } .topDIV { color: #000000; font-weight: 300; font-size: 15px; } .topDIV a:link, .topDIV a:visited { color: #000000!important; font-weight: 500; letter-spacing: -0.3px; line-height: 1.2 ; } span.topDIV { } .topDIV a:hover { border-bottom: 1px solid rgba(0,0,0,0.50) !important; display: inline-block; } .button-x { position: relative; float: right; top: -5px; background:none; border:none; color:rgb(0,0,0) ; cursor: pointer; vertical-align: 0px; } .button-x:before { font-family: 'Times'; content: "X"; font-size:30px; vertical-align:0px; opacity:0.5; } .button-x:hover { opacity:1!important; } <span class = "topDIV">Welcome to <em>Vitrify</em>. Following in the finest traditions of vitreous enamelled jewellery. <a href = "#">Find out more.</a></span><button class = "button-x" onclick="myFunction()"></button>Como se mencionó anteriormente, debe usar localStorage para resolver su problema.
JavaScript
document.addEventListener('DOMContentLoaded', function () { const topDiv = document.querySelector('.topDIV'); const buttonX = document.querySelector('.button-x'); // Get value from localStorage when open the page const lS = localStorage.getItem('first-visit'); // Add button 'click' event buttonX.addEventListener('click', () => { // Set value to the localStorage localStorage.setItem('first-visit', false); // hide DOM element topDiv.style.display = 'none'; }); // This does not check on the first visit to the page // If localStorage have value, hide DOM element if (lS) topDiv.style.display = 'none'; });html
<span class="topDIV" >Welcome to <em>Vitrify</em>.Following in the finest traditions of vitreous enamelled jewellery. <a href="#">Find out more.</a> </span> <button class="button-x"></button>Puede agregar un indicador "showTopMessage:true" en su almacenamiento local o almacenamiento de sesión en función de un mensaje único al usuario o cada vez que lo visite. respectivamente.
En el icono Cruzar/cerrar, haga clic en establecer la bandera "showTopMessage:false".
const showTopBar = "SHOW_TOP_BAR"; const[showTopBar,setShowTopBar] = useState(true); useEffect(()=>{ const saveState = localstorage.getItems(showTopBar); if(saveState) setShowTopBar(saveState); else localstorage.setItem(showTopBar, true); },[]); const handleTopBarClose = () => { setShowTopBar(false); localstorage.setItem(showTopBar, false); } return( <div> { showTopBar && <TopBarComponent onClose={handleTopBarClose}/> } </div> )