Only pop up 1x every 24h per user

2

I'm trying to manipulate cookies here with javascript, so I'm trying to put it in, which only pops up once every 24h per user, but it pops up every time I enter the page.

Here's my code, where am I going wrong? Is my logic wrong?

function checkLoading(e){
    d = new Date();
    document. cookie = "visto= true; expires = " + d.toUTCString() + ";path=/";
    d.setDate(d.getDate() + 1*24*60*60);

    if ( popupFormSubmitting == true ) {
        if(document.cookie == null){
            signupFormLoader.style.display = 'block'; 

        }
    }else{

        signupFormLoader.style.display = 'none'; 
    }
}
    
asked by anonymous 02.12.2018 / 21:34

2 answers

3

It's not totally wrong to manipulate it, but you'd better do it in a simpler way like this:

if (document.cookie.indexOf("popupShown=true") == -1) {
    document.cookie = "popupShown=true; max-age=86400"; //86400: segundos em um dia
    // Faça o restante logo aqui abaixo
}

So, after the cookie wins (after these 24H), the next time the page loads the popup will pop up! See the cookie documentation for too many questions or leave the comment here there are more doubts about it! :)

Since the previous code did not work for you, let's try something different ... According to this answer in Stack , you should do it this way so you can actually set / read your cookie by JavaScript and adapting to what you want:

function createCookie(name,value) {
    var date = new Date();
    date.setTime(date.getTime()+(3600*24));
    var expires = "; expires="+date.toGMTString();
    document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

And once you've done that, you just add this:

jQuery(document).ready(function() {
    var visto = readCookie('visto');
    if (!visto || visto !== "true") {
        createCookie('visto', "true");
        // Código do popup e demais códigos aqui
    }
});

Let's see if it works now! Haha

    
02.12.2018 / 21:45
1

You can use LocalStorage (LS), which is also a cookie. Just save the primitive value from the current date and create another date by adding +24 hours to the current date and then make the comparison. If the LS does not exist it shows the popup and sets its value to +24 hours. If it exists, make the comparison, if it is smaller it shows the popup and it redefines the time.

Considering that the id of your popup is #popup , type:

<div id="popup">
  CONTEÚDO DA POPUP
</div>

Hide the popup div in CSS:

#popup{ display: none }

And it would look like this:

document.addEventListener("DOMContentLoaded", function(){

   // pega o elemento da popup
   var popup = document.getElementById("popup");

   // atribui o LS a uma vaviável
   var ls = localStorage.getItem("popup");

   // pega a data atual
   var data = new Date();

   // variável para guardar a data atual
   var data_atual = data.valueOf();

   // adiciona 24 horas à data atual
   var data24 = data.setHours(data.getHours()+24);

   // verifica se o LS é menor do que a data atual
   // ou se o LS for inexistente
   if(ls < data_atual){

      // mostra a popup
      popup.style.display = "block";

      // cria/redefine o LS com o nome "popup" com a data +24 horas
      localStorage.setItem("popup", data24);

   }

});

5-second test:

Because here in the sandbox LS does not work, change the line:

var data24 = data.setHours(data.getHours()+24);

To

var data24 = data.setSeconds(data.getSeconds()+5);

Please reload your page within 5 seconds and you will see that the popup will not appear. After 5 seconds it will appear 1 time, and so on.

  

I'll leave the leaked code below without comment:

document.addEventListener("DOMContentLoaded", function(){
   var popup = document.getElementById("popup");
   var ls = localStorage.getItem("popup");
   var data = new Date();
   var data_atual = data.valueOf();
   var data24 = data.setHours(data.getHours()+24);

   if(ls < data_atual){
      popup.style.display = "block";
      localStorage.setItem("popup", data24);
   }
});
    
03.12.2018 / 02:31