[Résolu] Cookie et popup de verification d'age.

Bonsoir à tous, me revoici avec un problème de javascript.
Je souhaite avoir un popup de vérification d'age lorsqu'un visiteur arrive sur le site que je suis en train de créer.

J'ai réussi à faire mon bonheur avec le code suivant:

$(function() {
  $('[data-popup-close]').on('click', function(e) {
    var targeted_popup_class = jQuery(this).attr('data-popup-close');
    $('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
    e.preventDefault();
  });
});
$(function() {
  if (!(document.cookie && document.cookie == "accepted")) {
    $("#popup").show();
  }
  $('[data-popup-close]').on('click', function(e) {
    var targeted_popup_class = jQuery(this).attr('data-popup-close');
    $('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
    document.cookie = "accepted";
    e.preventDefault();
  });
});

Le soucis étant que bien sur, par défaut, le document.cookie reste actif que lorsque le visiteur ne ferme pas son navigateur. Hors, j'aimerai bien que ce dernier soit persistant. Au moins 1 mois (3 serai l'idéal).
J'ai essayé avec la fonction suivante en remplaçant dans mon code précédent document.cookie par setCookie:

function setCookie(cName, cValue, expDays) {
        let date = new Date();
        date.setTime(date.getTime() + (expDays * 90 * 24 * 60 * 60 * 1000));
        const expires = "expires=" + date.toUTCString();
        document.cookie = cName + "=" + cValue + "; " + expires + "; path=/";
}

ou encore:

var a = new Date();
a = new Date(a.getTime() +1000*60*60*24*90);
document.cookie = 'cookie; expires='+a.toGMTString()+';';

Mais sans succès. Même pire, dès que je change de page, ce dernier reparait à l'écran. Que dois je modifier dans mon code du haut pour choisir la durée de vie du cookie. (Je ne sais pas si c'est utile de préciser, mais je suis actuellement en local sous Wamp).

Merci par avance.

edit: Bien sur, je ne sais pas si le javascript et la meilleur manière de gérer les cookies, mais je n'ai trouvé actuellement que cette solution à mon besoin (tout en étant très simple à déployer).
Modifié par westman (24 Jan 2022 - 21:55)

Bonjour,

document.cookie est persistent. Mais il ne contient pas simplement "accepted".

1) Ta fonction setCookie() a l'air de fonctionner.

2) Il faudrait que tu vérifies ce qu'il y a actuellement dans document.cookie quand tu visites ta page. Pour ça, tu ajoutes dans ton code (à la fin) :

console.log(document.cookie);

Tu visites ta page et tu regardes ce qu'il y a dans ta console (click droit dans ta page + inspecter, et cliquer sur l'onglet console). Normalement, il devrait y avoir un message contenant une paire ou une série de paires de valeurs du genre nomDeCookie=valeur séparées par des ;

3) Une fois que tu es sûr de ce qu'il y a dans document.cookie, tu peux alors écrire le code qui va vérifier ce qu'il y a dans document.cookie. Actuellement, tu fais le test suivant dans ton code :

if (!(document.cookie && document.cookie == "accepted")) {
    $("#popup").show();
  }

Ça ne peut pas fonctionner parce que document.cookie ne contient pas simplement la chaine de caractère "accepted". Il faut comparer document.cookie non pas à "accepted", mais à ce que tu vas voir dans la console à l'étape 2, ou à une partie de ce que tu vas voir dans la console à l'étape 2 s'il y a plusieurs cookies dans document.cookie.

Amicalement,

https://i.imgur.com/txQinQC.jpg
qui renvoi effectivement à la ligne:

document.cookie = "accepted";

qui est également marquée comme <empty string>.

Est ce que le soucis sur les propriété du cookie viendrai de la librairie ?

https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js

Modifié par westman (25 Jan 2022 - 00:21)

Bonjour,

1) Ce que tu montres est le "cookie", pas le contenu de document.cookie. As-tu fait le console.log() ?

2) Pour jquery, on en est à la 3.6.0. La 1.9.1 est sorti il y a 9 ans : une éternité dans le monde du web. Tu pourrais envisager effectivement de changer !

Amicalement,

Bonjour,

As-tu mis la ligne suivante à la fin de ton code :

console.log(document.cookie);

Je me demande si on va y arriver !

Amicalement,

Yes bien sur.
Navré, mais je dois avouer que je ne sais pas trop où regarder ni ce qui est sensé s'afficher:
https://i.imgur.com/BiHNJIV.jpg

Bonjour,

Bien. On avance. Il semble que document.cookie soit vide. D'une part, il y a effectivement comme tu le disais un <empty string>, et d'autre part, dans le 3e message, il y a une référence à un cookie "" (donc quelque chose qui n'a pas l'air très rempli).

Tu vas essayer la chose suivante. Tu vas remplacer la ligne suivante :

document.cookie = "accepted";

par

setCookie('accepted',1,60);

Et tu regardes ce que te dit la console.

Amicalement,

https://i.imgur.com/kQC1yx9.jpg
J’envoie des images comme ça au moins, il n'y aura pas de malentendu

Bien écoute ça semble fonctionner . Lorsque je relance le navigateur je n'ai bien plus le popup.
J'ai le code suivant:

function setCookie(cname, cvalue, exdays) {
  const d = new Date();
  d.setTime(d.getTime() + (exdays*90*24*60*60*1000));
  let expires = "expires="+ d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
  let name = cname + "=";
  let decodedCookie = decodeURIComponent(document.cookie);
  let ca = decodedCookie.split(';');
  for(let i = 0; i <ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}
$(function() {
  $('[data-popup-close]').on('click', function(e) {
    var targeted_popup_class = jQuery(this).attr('data-popup-close');
    $('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
    e.preventDefault();
  });
});
$(function() {
  if (!(document.cookie && ((getCookie("accepted")+"")=="1"))) {
    $("#popup").show();
  }
  $('[data-popup-close]').on('click', function(e) {
    var targeted_popup_class = jQuery(this).attr('data-popup-close');
    $('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
    setCookie('accepted',1,60);
    e.preventDefault();
  });
});
console.log(document.cookie);

Dernière question, pour gérer sa durée de péremption (dans mon cas admettons 3 mois), je dois bien renseigner la valeur comme suit:

d.setTime(d.getTime() + (exdays*90*24*60*60*1000));

90j x 24h x 60min x 60sec x 1000ms n'est ce pas? Parce que dans la console je n'ai aucune trace de sa date d'expiration et dans l'onglet stockage il me renseigne:
Fri, 07 Nov 2036 00:59:32 GMT
ça me parait exagéré compte tenu de la valeur indiquée si dessus

Bonjour,

Je n'ai pas vérifié ta fonction setCookie(), mais a priori le 3e paramètre est un nombre de jour. Donc si tu veux qu'il dure 90 jours, tu mets :

setCookie('accepted',1,90);

EDIT: sauf si tu as bricolé la fonction setCookie(), ce qui semble être le cas !
EDIT 2: reprends la fonction setCookie() tel qu'elle était sur le site où tu l'as pris !

Amicalement,
Modifié par parsimonhi (25 Jan 2022 - 02:22)

Super, tout est impeccable.
Merci encore une fois .
Bonne continuation.