11528 sujets

JavaScript, DOM et API Web HTML5

[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)
Modérateur
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)
Modérateur
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 ! Smiley cligne

Amicalement,
1) J'ai mis cette screenshot car la console ne me semblait pas renvoyer des informations pertinentes, voici ce que j'y trouve:
a écrit :
Le cookie « » a la politique « SameSite » définie sur « Lax » car son attribut « SameSite » n’est pas défini et « SameSite=Lax » est la valeur par défaut de cet attribut.

ainsi qu'<empty string> qui renvoi bien à 
document.cookie = "accepted";

2) Alors j'ai repris le code de base de là ou j'ai trouvé comment faire cette petite fenêtre. Effectivement, dans mon index je suis bien à la 3.6 ^^.
Modifié par westman (25 Jan 2022 - 00:49)
Modérateur
Bonjour,

As-tu mis la ligne suivante à la fin de ton code :
console.log(document.cookie);

Je me demande si on va y arriver ! Smiley lol Smiley lol Smiley lol

Amicalement,
Modérateur
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,
Modérateur
Bonjour,

C'est parfait. On a bien dans document.cookie la trace d'un cookie qui s'appelle "accepted" et qui a la valeur 1.

Maintenant, il va falloir "décoder" document.cookie de manière pérenne. Car pour l'instant, il n'y a qu'un cookie. Mais il pourrait y en avoir d'autres plus tard. Pour cela tu peux par exemple utiliser la fonction getCookie() qui est à https://www.w3schools.com/JS/js_cookies.asp ou tout autre fonction du même genre que tu trouverais ailleurs. Donc tu mets cette fonction dans ton code, et ensuite tu remplaces :
if (!(document.cookie && document.cookie == "accepted")) {
par
if (!(document.cookie && ((getCookie("accepted")+"")=="1"))) {

Ça devrait tomber en marche.

Amicalement,
Modifié par parsimonhi (25 Jan 2022 - 01:49)
Meilleure solution
Bien écoute ça semble fonctionner Smiley smile . 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 Smiley biggol
Modérateur
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 ! Smiley lol
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)
Sujet clos
Aller à