Cookies en JS

Résolu
Lucas63 -  
 Lucas63 -
Bonjour. Je tente actuellement de créer une fonction qui permet d'afficher une image lorsqu'on appuie dessus et de la cacher lorsque ce n'est pas le cas, puis de laisser les images comme telles après rechargement de la page. Seulement, lorsque je rafraîchis la page, certaines images que j'ai coché se décochent et d'autre que je n'avais pas coché se cochent. Voici le code en JS : 

jQuery(document).ready(function($) { 
    $('.disabled').click(function () {
        $(this).each(function(){
            var classes = ['disabled','enabled'];
            this.className = classes[($.inArray(this.className, classes)+1)%classes.length];
        });
    });
  
    function createCookie(name,disabled,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days * 365));// Sans date d'expiration il disparaît à la fin de la session(normalement), ce qui est pas mal aussi
        var expires = "; expires="+date.toGMTString();
    }
  
    function getCookie(name){
        let data=RegExp(name+"[^;]+").exec(document.cookie);
        return decodeURIComponent(!!data?data.toString().replace(/^[^=]+./,""):"");
    }
  
    function setCookie(name,value,days) {
        var date = new Date();
        date.setTime(date.getTime()+(days * 365));// Sans date d'expiration il disparaît à la fin de la session(normalement), ce qui est pas mal aussi
        document.cookie = name + "=" + value + ";path=/;expires=" + d.toGMTString();
    }
  
    let img=document.querySelectorAll('img');
  
    for(let i=0;i<img.length;i++){
  
                    if(getCookie('spanD'+i)==='1'){// Teste cookie spanD+Number
                        img[i].parentElement.className='enabled';// Met la classe du parent de l'image à disabled
                    }else{
                        img[i].parentElement.className='disabled';// Met la classe du parent de l'image à enabled
                    }
  
  
                    img[i].addEventListener('click',
                        function(e){
  
                            if(getCookie('spanD'+i)==='1'){// Teste cookie spanD+Number
                                img[i].parentElement.className='enabled';// Met la classe du parent de l'image à disabled
                                document.cookie='spanD'+i+'=0;';// Création du cookie spanD+Number=0
                            }else{
                                img[i].parentElement.className='disabled';// Met la classe du parent de l'image à enabled
                                document.cookie='spanD'+i+'=1;';// Création du cookie spanD+Number=1
                            }
                        }
                    );
                }
            });


Merci d'avance pour votre aide.

3 réponses

Réponse 1 / 3
Jithel Messages postés 843 Date d'inscription   Statut Membre Dernière intervention   171
 
Je suspecte que la valeur "i" de "spanD" + i ne varient pas entre les bonnes valeurs (ici de 0 à img.length).

Je ne vois pas, sauf erreur de ma part, de code qui appelle set et getCookie. En particulier, j'aurais besoin du code qui appelle setCookie(…)
1
Lucas63
 
J'ai testé en inversant les valeurs et ça n'a pas pas fonctionné. Pour le setCookie, je comprends pas ce que vous voulez dire, j'ai mis le code complet en JS. Je vous mets si vous en avez besoin le code HTML : 

<!DOCTYPE html>
<html>
    <head>
        <title>Test Disable</title>
        <link rel="stylesheet" href="styles.css">
        <script
                src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
                integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
                crossorigin="anonymous"></script>
        <script src="script.js"></script>
        <link rel="shortcut icon" href="img/icon1.png">
    </head>

    <body class="list">
                <span class="disabled"><img src="img/test.png"></span>
    </body>
</html>
0
Réponse 2 / 3
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Bonjour,
Visiblement ta fonction CreateCookie n'est pas fermée (tu as oublié une accolade )

Je n'ai pas testé.. mais ça devrait déjà mieux fonctionner 
jQuery(document).ready(function($) { 
    $('.disabled').click(function () {
        $(this).each(function(){
            var classes = ['disabled','enabled'];
            this.className = classes[($.inArray(this.className, classes)+1)%classes.length];
        });
    });
  
    function getCookie(name){
        let data=RegExp(name+"[^;]+").exec(document.cookie);
        return decodeURIComponent(!!data?data.toString().replace(/^[^=]+./,""):"");
    }
  
    function setCookie(name,value,days) {
        var date = new Date();
        date.setTime(date.getTime()+(days * 365));// Sans date d'expiration il disparaît à la fin de la session(normalement), ce qui est pas mal aussi
        document.cookie = name + "=" + value + ";path=/;expires=" + d.toGMTString();
    }
    
    let img = $('img');  
    for(let i=0;i<img.length;i++){
      if(getCookie('spanD'+i)==='1'){// Teste cookie spanD+Number
        img[i].parentElement.className='enabled';// Met la classe du parent de l'image à disabled
      }else{
        img[i].parentElement.className='disabled';// Met la classe du parent de l'image à enabled
      }

      img[i].click(function(e){
              if(getCookie('spanD'+i)==='1'){// Teste cookie spanD+Number
                  img[i].parentElement.className='enabled';// Met la classe du parent de l'image à disabled
                   setCookie('spanD'+i,0);
              }else{
                  img[i].parentElement.className='disabled';// Met la classe du parent de l'image à enabled
                  setCookie('spanD'+i,1);// Création du cookie spanD+Number=1
              }
      });
    }
});

1
Lucas63
 
Merci d'avoir corrigé mon code, je n'avais même pas remarqué l'accolade non fermée. J'ai testé et ça n'enregistre pas les cookies. J'ai ensuite fait plusieurs tests dans le code en inversant les valeurs mais rien n'y fait. J'ai aussi été voir dans la console où apparemment, ça serait le getCookie le problème et ça aurait un lien avec jQuery, mais je vois pas trop le problème : 

jQuery.Deferred exception: getCookie is not defined ReferenceError: getCookie is not defined
    at HTMLDocument.<anonymous> (script.js:31:21)
    at j (https://code.jquery.com/jquery-3.2.1.slim.min.js:2:30203)
    at k (https://code.jquery.com/jquery-3.2.1.slim.min.js:2:30517) undefined
jquery-3.2.1.slim.min.js:2 Uncaught ReferenceError: getCookie is not defined
    at HTMLDocument.<anonymous> (script.js:31)
    at j (jquery-3.2.1.slim.min.js:2)
    at k (jquery-3.2.1.slim.min.js:2)


Merci beaucoup si vous voyez de quoi il s'agit.
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752 > Lucas63
 
Il t'indique qu'il ne trouve pas la fonction getCookie
Sûrement une erreur de code avant cette fonction qui l'empèche de trouver la fonction...
Déplace les fonctions 
    function getCookie(name){
        let data=RegExp(name+"[^;]+").exec(document.cookie);
        return decodeURIComponent(!!data?data.toString().replace(/^[^=]+./,""):"");
    }
  
    function setCookie(name,value,days) {
        var date = new Date();
        date.setTime(date.getTime()+(days * 365));// Sans date d'expiration il disparaît à la fin de la session(normalement), ce qui est pas mal aussi
        document.cookie = name + "=" + value + ";path=/;expires=" + d.toGMTString();
    }

avant la ligne 
jQuery(document).ready(function($) {
0
Lucas63
 
J'ai essayé de mettre les fonctions au-dessus de la première ligne mais cette fois, rien ne se passe quand j'appuie sur l'image. J'ai tenté plusieurs essais en déplaçant et en modifiant le code des cookies mais impossible de les faire fonctionner, est-ce que la fonction createCookie est utile ?
0
Réponse 3 / 3
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
  

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title> ACCUEIL - PROSTAGE </title>
 <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
                integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
                crossorigin="anonymous"></script>
     <link rel="shortcut icon" href="img/icon1.png">
</head>
<body class="list">
 
<span class="disabled pictures" id='spanD01'><img src="img/test.png" ></span>
<span class="disabled pictures" id='spanD02'><img src="img/test2.png" ></span>
</body>
<script type="text/javascript">

var getCookie = function(name) {
	var getCookieValues = function(cookie) {
		var cookieArray = cookie.split('=');
		return cookieArray[1].trim();
	};

	var getCookieNames = function(cookie) {
		var cookieArray = cookie.split('=');
		return cookieArray[0].trim();
	};

	var cookies = document.cookie.split(';');
	var cookieValue = cookies.map(getCookieValues)[cookies.map(getCookieNames).indexOf(name)];

	return (cookieValue === undefined) ? null : cookieValue;
};

/**
 * alternative: get cookie by name with using a regular expression
 */
var getCookiebyName = function(name){
	var pair = document.cookie.match(new RegExp(name + '=([^;]+)'));
	return !!pair ? pair[1] : null;
};

/**
 * [Gets the cookie value if the cookie key exists in the right format]
 * @param  {[string]} name [name of the cookie]
 * @return {[string]}      [value of the cookie]
 */
var getCookie = function (name) {
    return parseCookies()[name] || '';
};

/**
 * [Parsing the cookieString and returning an object of the available cookies]
 * @return {[object]} [map of the available objects]
 */
var parseCookies = function () {
	var cookieData = (typeof document.cookie === 'string' ? document.cookie : '').trim();
	return (cookieData ? cookieData.split(';') : []).reduce(function (cookies, cookieString) {
		var cookiePair = cookieString.split('=');
		cookies[cookiePair[0].trim()] = cookiePair.length > 1 ? cookiePair[1].trim() : '';
		return cookies;
	}, {});
};

function setCookie(name,value) {
    var newCookie = name + "=" + value + ';';
    console.log('Nouveau cookie :',newCookie);
    return document.cookie = newCookie;
}

function toggleClassEnable(curr){
  if(curr.hasClass('disabled')){
    setEnable(curr);
  }else{
    setDisable(curr);
  }   
}

function setEnable(curr){
  curr.addClass('enabled');
  curr.removeClass('disabled'); 
}

function setDisable(curr){
  curr.addClass('disabled');
  curr.removeClass('enabled');
}

function setClassByCookie(curr){
  var cookieEnable = getCookie(curr.attr('id'));
  console.log('cookieEnable',cookieEnable);
  if(cookieEnable=='true'){
    setEnable(curr);  
  }else{
    setDisable(curr);
  }
}

jQuery(document).ready(function($) { 
  $('.disabled').click(function () {
    var curr = $(this);
    toggleClassEnable(curr);
    var valCook = getCookie(curr.attr('id')) == 'true' ? 'false' : 'true';
    setCookie(curr.attr('id'), valCook);
  });
  
  $('.pictures').each(function(i,el){
     var curr = $(this);
     setClassByCookie(curr);
  });
  
});

</script>

</body>
</html>

1
Lucas63
 
Merci beaucoup pour votre aide, tout marche correctement. Juste une question, savez-vous combien de temps ça sauvegarde ?
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752 > Lucas63
 
Pour gérer les cookies correctement et specifier une durée de vie, je pense que tu peux t'orienter vers ça
https://github.com/js-cookie/js-cookie/blob/master/README.md
0
Lucas63
 
Merci porur votre lien, ça va m'être utile pour gérer leur durée. J'aurais juste une dernière question, j'ai cherché sur l'API et Google mais j'ai rien trouvé à ce sujet et je pense connaître la réponse : peut-on augmenter le nombre maximum de cookies enregistrées par page sur un navigateur (150 pour Chrome) ? Si non, peut-on réunir tout en un ? Merci encore pour votre aide.
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752 > Lucas63
 
Tu peux stocker les etats de tes images dans un array et mettre cet array dans ton cookie.
Faudra ensuite modifier un peu ton code en conséquence
0
Lucas63
 
D'accord je vous remercie pour tout, je vais voir comment tout stocker dans un cookie.
0

Discussions similaires

Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
comment activer les cookies
fetteh -
evedupas -

31 réponses
Firefox, problèmes avec les cookies
essem -
bg62 -

18 réponses
Problème cookies sur le site Canal +
pistouri -
pistouri -

16 réponses
'JS/Agent.TS' Qu'est ce que c'est ?
TheFastBoost -
TheFastBoost -

17 réponses