0

Hice un agregado funcional a un script, y no puedo (no sé hacerlo, la verdad), agregarle un LocalStorage al siguiente script para mantener al div #regalo visible cuando recargo la página.

El div #regalo es visible sólo cuando el valor del input #total está entre 999 y 2999, pero aunque el script original ya tiene su propio LocalStorage para otras funciones, no puedo mantener visible al div #regalo después de una recarga.

La función está presente, ok, pero el div desaparece de la pantalla...

¿Cómo agrego LocalStorage al siguiente script para mantener visible a #regalo si recargo la página...?

SCRIPT:

    $(document).ready(function(){
  function manageRegalo() {
    const total = Number($("#total").val().replace(".",""));

    if(total > 999 && total < 2999) {
      $('#regalo').show();
    }
    else{
      $('#regalo').hide();
    }
  }

  $(document).on('click', function (event) {
      const target = event.target;
      if (target.matches('.comp-clone') || target.matches('.bbp')) {
        manageRegalo();
      }
    });
  manageRegalo();
});

2 respuestas 2

2

Podrías guardar el valor de #total en tu localStorage, para después usarlo en tu función, así al recargar la pagina, le asignara el valor de totalStorage a total.

$(document).ready(function(){
      function manageRegalo() {
        //Cachas el valor de tu storage
        var totalStorage = Number(localStorage.getItem("total"));
        var total = Number($("#total").val().replace(".",""));
        if(totalStorage != null && total === 0) {
        /*Si hay valor en el Storage y el input de captura viene vacio,
          entonces le asigna totalStorage a total*/
            total = totalStorage;
        }

        if(total > 999 && total < 2999) {
          $('#regalo').show();
        }
        else{
          $('#regalo').hide();
        }
      }

      $(document).on('click', function (event) {
          const target = event.target;
          if (target.matches('.comp-clone') || target.matches('.bbp')) {
            manageRegalo();
            //Cuando haces click en tu elemento, guarda el #total en el storage
            localStorage.setItem('total', Number($("#total").val().replace(".","")));
          }
        });
      manageRegalo();
    });
1
  • 1
    Muchas gracias Ricardo. Funciona de maravillas. Testado en todos los browser, escritorio y móvil. Muchas gracias!... +10 ...
    – Pablo_Web
    Commented el 24 abr. 2019 a las 16:17
1

Mira ver si asi puedes solucionar tu pregunta:

$(document).ready(function(){
 function manageRegalo() {
  const total = Number($("#total").val().replace(".",""));
  //Si esta en el intervalo o esta en localStorage almacenado con la clave "mostrar"
  if(total > 999 && total < 2999 || !!localStorage.getItem('mostrar')) {
    $('#regalo').show();
    //Si aun no esta almacenado en localStorage lo guardo
    if(!!localStorage.getItem('mostrar') === false) {
        localStorage.setItem('mostrar', true)
    }
  }
  else{
    $('#regalo').hide();
  }
}

$(document).on('click', function (event) {
    const target = event.target;
    if (target.matches('.comp-clone') || target.matches('.bbp')) {
      manageRegalo();
    }
});

manageRegalo();
});
1
  • Muchas gracias Daniel. Algo pasa, que con tu script el div #regalo se queda persistente en pantalla aunque limpie toda la caché y borre todos los datos de los navegadores (el script no tira errores en ningún inspector). De todas formas el usuario @Ricardo publicó una respuesta que sí me funciona, y veo que es algo diferente a la tuya. Vale, estoy aprendiendo desde cero, y me cuesta asimilar algunos conceptos. Muchas gracias...
    – Pablo_Web
    Commented el 24 abr. 2019 a las 16:16

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.