Local storage no funciona en móviles

[JUMASOL]

Hola.

¿Me podéis decir por qué esta solución de Local storage no me funciona en ningún móvil?

Un div (caja) debe mostrarse sólo una vez a lo largo de la web se entre por dónde se entre en ella:

Código:

  <div id="caja">
    <p>Aquí se muestra un mensaje.</p>
  </div>

Este es el javascript:

Código:

 <script>
window.onload=function(){
(function() {
    var visited = localStorage.getItem('visited');
    if (!visited) {
        document.getElementById("caja").style.display = "block";
        localStorage.setItem('visited', true);
    }
})();
}

</script>

El funcionamiento es absolutamente perfecto en navegadores en ordenador y tablets. Pero cuando te vas a móviles, no funciona. La caja se muestra una y otra vez.

He probado Android, IPhone y Windows Mobile.

¿Sabéis por qué?

[IsaBelM]

Para tener esa compattibilidad has de usar cookies https://developer.mozilla.org/es/doc...Almacenamiento

[JUMASOL]

No entiendo la respuesta. ¿Me lo aclaras? ¿Insertar código en el script para que sea compatible con los navegadores móviles?

[Alexis88]

Checa la sección de compatibilidad del enlace que te ha dado IsaBelM e impleméntalo. El almacenamiento local aún no está disponible en todos los navegadores.

[JUMASOL]

Según ese enlace parece que la compatibilidad de móviles es desconocida.

[Alexis88]

Precisamente por eso debes de implementar el script que se muestra en la sección mencionada.

[JUMASOL]

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.

[MaNuX0218]

Si no quieres agregar display:none en tu html puedes agregarlo al id #caja o añadir una clase .caja y en tu hoja de estilos añadirle el display:none.

Saludos.

[JUMASOL]

Hola MaNuX0218.

Ya he explicado que eso no funciona. Me estás diciendo que haga lo que ya he probado.

Si quito el estilo del html y lo pongo en el css, parece como si el javascript no pudiera formar el estilo en el div caja.

????????