Utilisation des cookies

Version imprimable

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 :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
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.

Bonjour. J'ai tenté de réparer le code mais maintenant, les cookies ne veulent plus s'enregistrer. Voici le code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
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 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();
    }
 
    function getCookie(name){
        let data=RegExp(name+"[^;]+").exec(document.cookie);
        return decodeURIComponent(!!data?data.toString().replace(/^[^=]+./,""):"");
    }
 
    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
              }
      });
    }
  }
});

Merci d'avance si vous voyez d'où vient l'erreur.

02/03/2019, 23h04
Watilin

Bonsoir,
dans le code que tu as donné, tu déclares une fonction createCookie mais tu ne l’appelles jamais.

Sinon, une suggestion : comme tu as pu en faire l’expérience, la manipulation des cookies est fastidieuse, avec ces path et domain et date d’expiration à gérer. Quand tu n’as pas besoin d’envoyer des données au serveur, localStorage est bien plus pratique. Il suffit d’écrire :

Code:

localStorage.setItem(name, value);