1

Estoy trabajando en una pagina la cual quiero que cuando el usuario pulse 'versión completa', fuerce el width del meta para que se vea como si fuera la web real, el script hace algo así:

((function ( $ ) {

    var mobile = true;

    var targetWidth = 1100;

    $('.mobile-to-desktop').click(function(e) {
        e.preventDefault();
        $('meta[name="viewport"]').attr('content', 'width=' + targetWidth);
        $('.watch-mobile').addClass('active');
        window.sessionStorage.setItem("mobile", "false");
    });

    $(function() {
        if (window.sessionStorage.getItem("mobile") === false) {
            $('meta[name="viewport"]').attr('content', 'width=' + targetWidth);
            $('.watch-mobile').addClass('active');
        }
    });

})(jQuery));

Esto funciona perfectamente, el problema es que cuando cambio de php, el width vuelve a cambiar, y quería ver si se puede guardar de alguna manera.

he probado con el sessionStorage y localStorage, pero no me funciona, igual es porque estoy usando algo mal.

3
  • deberías incluir el código que intentaste para localStorage de forma que te ayudemos a resolverlo, no tiene sentido empezar de cero. Commented el 7 abr. 2016 a las 10:05
  • utilice lo mismo que pone con el sessionStorage, que si que lo pone arriba. Lo que no se si se define así, o falta algo, porque normalmente utiizó variables de session en php, pero aquí no puedo.
    – Imanol
    Commented el 7 abr. 2016 a las 10:27
  • Podrías enviar la variable mediante post a un php para que haga el set de $_SESSION, pero deberías tener cuidado con la seguridad de esa implementación.
    – Alan
    Commented el 7 abr. 2016 a las 11:58

1 respuesta 1

1

El método sessionStorage.getItem retorna un DOMString (es básicamente lo mismo que String en javascript) por lo que la comparación window.sessionStorage.getItem("mobile") === false siempre retornará false ya que estas usando el operador de comparación estricta ===.

Puedes usar el operador de comparación relajada == pero esto por lo general no es recomendado ya que es una fuente de bugs muy difíciles de encontrar. En su lugar debes comparar con el valor exacto que pusiste "false" como un string.

(function($) {

  $(function() {
     var mobile = true;

     var targetWidth = 1100;

     function setDesktopMode() {
       $('meta[name="viewport"]').attr('content', 'width=' + targetWidth);
       $('.watch-mobile').addClass('active');
     }

     $('.mobile-to-desktop').click(function(e) {
       e.preventDefault();
       setDesktopMode();
       window.sessionStorage.setItem("mobile", "false");
     });

     if (window.sessionStorage.getItem("mobile") === "false") {
       setDesktopMode();
       mobile = false;
     }

  });

}(jQuery));

La primera vez te funciona porque lo estás cambiando con jquery pero la segunda el valor no es comparado correctamente y no funciona.

En mi ejemplo envolví todo el código en el evento DOMReady de jquery ya que no se deben establecer manejadores de eventos ni buscar elementos hasta que el DOM no se ha cargado completamente.

También eliminé los paréntesis redundantes en el IIFE

((function() {
   //código
})());

functiona igual que

(function() {
   // código
} ());

// o

(function() {
   //código
})();

excepto que te quedan par de paréntesis redundantes que pueden hacer más difícil leer el código.

1
  • perfecto!! funciona correctamente, muchas gracias!!!
    – Imanol
    Commented el 7 abr. 2016 a las 14:28

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.