Cookies en JS

**Lucas63** · 13/11/2018, 19h54

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, impossible d'activer les cookies pour enregistrer la sélection. Voici le code en JS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
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*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    else var expires = "";
    document.cookie = name+"="+disabled+expires+"; path=/";
    }
});

Merci d'avance pour votre aide.

**shroomsconect** · 15/11/2018, 16h53

Bonjour,

J'ai fait un bout de code pour vous, qui utilise des cookie pour savoir quels images ont était agrandies ou non.

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
    <meta charset="utf-8">
    <title>test</title>
</head>
<body>
       <img width="100" src="https://cdn.ila-france.com/wp-content/uploads/2017/01/french-test-1750x660-1.jpg" alt="image">
       <img width="100" src="https://cdn.ila-france.com/wp-content/uploads/2017/01/french-test-1750x660-1.jpg" alt="image">
       <img width="100" src="https://cdn.ila-france.com/wp-content/uploads/2017/01/french-test-1750x660-1.jpg" alt="image">
       <img width="100" src="https://cdn.ila-france.com/wp-content/uploads/2017/01/french-test-1750x660-1.jpg" alt="image">
       <img width="100" src="https://cdn.ila-france.com/wp-content/uploads/2017/01/french-test-1750x660-1.jpg" alt="image">
       <img width="100" src="https://cdn.ila-france.com/wp-content/uploads/2017/01/french-test-1750x660-1.jpg" alt="image">
</body>
<script>
 
function getCookie(name){
        let data=RegExp(name+"[^;]+").exec(document.cookie);
        return decodeURIComponent(!!data?data.toString().replace(/^[^=]+./,""):"");
}
 
 
let img=document.querySelectorAll('img')
 
for(let i=0;i<img.length;i++){
  if(getCookie('img'+i)==='1'){
        img[i].width='200';
  }
 
  img[i].addEventListener('click',
 
  function(e){
        if(getCookie('img'+i)==='1'){
                img[i].width='100';
                document.cookie='img'+i+'=0;';
        }else{
                img[i].width='200';
                document.cookie='img'+i+'=1;';
      }
  });
}
 
</script>
</html>

Votre code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
jQuery(document).ready(function($) {// jQuery c'est le mal ;)
    $('.disabled').click(function () {
        $(this).each(function(){
            var classes = ['disabled','enabled'];
            this.className = classes[($.inArray(this.className, classes)+1)%classes.length];// Rien compris! Quoi que un peu, modulo, truc.
        });
    });
 
    function createCookie(name,disabled,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));// Sans date d'expiration il disparaît à la fin de la session(normalement), ce qui est pas mal aussi
        var expires = "; expires="+date.toGMTString();
    }
    else/*{*/ var expires = "";// le else n'est pas fermé
    document.cookie = name+"="+disabled+expires+"; path=/";// J'ai essayer avec path=/ mais ça ne fonctionne pas
    }
});

**Lucas63** · 16/11/2018, 20h11

Merci beaucoup pour votre aide, j'ai testé avec une image qui s'agrandit sur mon site et ça enregistre les cookies. Par contre, impossible de les faire fonctionner avec le "disable" malgré beaucoup d'essais, savez-vous ce qu'il faut écrire pour que ça sauvegarde bien ce paramètre ? Je vous mets mon code après l'intégration de celui de shroomsconect :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html>
    <head>
        <title>Test Cookies</title>
        <link rel="stylesheet" href="styles.css">
        <link rel="shortcut icon" href="img/icon1.png">
    </head>
 
    <header><a href="index.html"><img src="img/logo.png" alt="logo"></img></a></header>
 
    <body class="checklist">
        <section class="char-group">
        	<br /><br/>
            <div class="characters">
                <span class="disabled"><img src="https://cdn.ila-france.com/wp-content/uploads/2017/01/french-test-1750x660-1.jpg"></span>
                <span class="disabled"><img src="https://cdn.ila-france.com/wp-content/uploads/2017/01/french-test-1750x660-1.jpg"></span>
                <span class="disabled"><img src="https://cdn.ila-france.com/wp-content/uploads/2017/01/french-test-1750x660-1.jpg"></span>
                <span class="disabled"><img src="https://cdn.ila-france.com/wp-content/uploads/2017/01/french-test-1750x660-1.jpg"></span>
                <span class="disabled"><img src="https://cdn.ila-france.com/wp-content/uploads/2017/01/french-test-1750x660-1.jpg"></span>
                <span class="disabled"><img src="https://cdn.ila-france.com/wp-content/uploads/2017/01/french-test-1750x660-1.jpg"></span>
            </div>
        </section>
    </body>
    <script>
    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(/^[^=]+./,""):"");
}
 
 
let img=document.querySelectorAll('img')
 
for(let i=0;i<img.length;i++){
  if(getCookie('img'+i)==='1'){
        img[i].width='200';
  }
 
  img[i].addEventListener('click',
 
  function(e){
        if(getCookie('img'+i)==='1'){
                img[i].width='100';
                document.cookie='img'+i+'=0;';
        }else{
                img[i].width='200';
                document.cookie='img'+i+'=1;';
      }
  });
}
</script>
</html>

**shroomsconect** · 17/11/2018, 14h49

Bonjour,

Moi et jQuery c'est un peu compliqué, donc je l'ai mis en commentaire.

ATTENTION :

- La balise IMG ne se ferme pas, donc <img> et pas <img></img>

- La balise HEADER se met dans la balise BODY et non avant

- Met tout le code JavaScript dans la fonction : jQuery(document).ready(function($){

Voici le code retravaillé

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
 
<!DOCTYPE html>
<html>
    <head>
        <title>Test Cookies</title>
        <link rel="stylesheet" href="styles.css">
        <link rel="shortcut icon" href="img/icon1.png">
    </head>
    <body class="checklist">
        <header>
            <a href="index.html">
                <img src="img/logo.png" alt="logo">
            </a>
        </header>
 
        <section class="char-group">
          <br><br>
          <div class="characters">
            <span class="disabled">
              <img src="https://cdn.ila-france.com/wp-content/uploads/2017/01/french-test-1750x660-1.jpg">
            </span>
            <span class="disabled">
              <img src="https://cdn.ila-france.com/wp-content/uploads/2017/01/french-test-1750x660-1.jpg">
            </span>
            <span class="disabled">
              <img src="https://cdn.ila-france.com/wp-content/uploads/2017/01/french-test-1750x660-1.jpg">
            </span>
            <span class="disabled">
              <img src="https://cdn.ila-france.com/wp-content/uploads/2017/01/french-test-1750x660-1.jpg">
            </span>
            <span class="disabled">
              <img src="https://cdn.ila-france.com/wp-content/uploads/2017/01/french-test-1750x660-1.jpg">
            </span>
            <span class="disabled">
              <img src="https://cdn.ila-france.com/wp-content/uploads/2017/01/french-test-1750x660-1.jpg">
            </span>
          </div>
        </section>
 
        <script>
            jQuery(document).ready(function($){
                let img=document.querySelectorAll('img')
 
                function getCookie(name){// Fonction qui récupère le contenu du cookie
                    let data=RegExp(name+"[^;]+").exec(document.cookie);
                    return decodeURIComponent(!!data?data.toString().replace(/^[^=]+./,""):"");
                }
 
 
                /*$('.disabled').click(function(){
                $(this).each(function(){
                var classes = ['disabled','enabled'];
                this.className = classes[($.inArray(this.className, classes)+1)%classes.length];
                console.log(this);
                });
                });*/
 
 
                for(let i=0;i<img.length;i++){
                    if(getCookie('img'+i)==='1'){// Teste cookie img+Number
                        img[i].width='200';// Met la largeur de l'image à 200px
                    }else{
                        img[i].width='100';// Met la largeur de l'image à 100px
                    }
 
                    if(getCookie('spanD'+i)==='1'){// Teste cookie spanD+Number
                        img[i].parentElement.className='disabled';// Met la classe du parent de l'image à disabled
                    }else{
                        img[i].parentElement.className='enabled';// Met la classe du parent de l'image à enabled
                    }
 
 
                    img[i].addEventListener('click',
                        function(e){
                            if(getCookie('img'+i)==='1'){// Teste cookie img+Number
                                img[i].width='100';// Met la largeur de l'image à 100px
                                document.cookie='img'+i+'=0;';// Création du cookie img+Number=0
                            }else{
                                img[i].width='200';// Met la largeur de l'image à 200px
                                document.cookie='img'+i+'=1;';// Création du cookie img+Number=1
                            }
 
                            if(getCookie('spanD'+i)==='0'){// Teste cookie spanD+Number
                                img[i].parentElement.className='disabled';// Met la classe du parent de l'image à disabled
                                document.cookie='spanD'+i+'=1;';// Création du cookie spanD+Number=1
                            }else{
                                img[i].parentElement.className='enabled';// Met la classe du parent de l'image à enabled
                                document.cookie='spanD'+i+'=0;';// Création du cookie spanD+Number=0
                            }
                        }
                    );
                }
            });
        </script>
    </body>
</html>

**Lucas63** · 17/11/2018, 16h42

Merci énormément pour votre aide, les cookies marchent très bien ainsi que les images.

Cookies en JS

JavaScript

Discussions similaires

Partager

Partager