He solucionado la cuestión con este otro script:
Código:
window.onload=function(){
(function() {
var visited = localStorage.getItem('visited');
if (!visited) {
document.getElementById("caja").style.display = 'block';
localStorage.setItem('visited', true);
}
})();
}
Inserta el elemento en LocalStorage y todo funciona correctamente.
Pero me gustaría comentar un tema y entenderlo.
El script sólo funciona si pones el html así:
Código:
<div style="display:none" id="caja">
<p>Aquí se muestra un mensaje.</p>
</div>
Porque si lo pones como sigue, y luego añades el display: none al archivo css, ya no funciona.
Código:
<div id="caja">
<p>Aquí se muestra un mensaje.</p>
</div>
De lo cual debo sacar la conclusión de que es necesaria la presencia del estilo en el html para que esto funcione:
Código:
document.getElementById("caja").style.display = 'block';
Como comprenderéis, soy neófito en estos temas y me gustaría comprender cómo funciona este último fragmento de código. Veo que lo que hace es sustituir el display del html por el indicado "block".
Me gustaría saber si es posible sustituir esta línea por otra que haga lo mismo y que permita eliminar el estilo del html (<div
style="display:none" id="caja">), por tema de purismo en la inclusión de elementos de estilo en el código.
Un saludo y gracias por vuestra ayuda.