Discussion :

[Lucas63]

Bonjour. Je crée une page où on coche des images puis où le "disabled" s'enregistre dans des cookies. Chaque image a un id. Seulement, ma page contient plus de 500 images différentes et les navigateurs comme Chrome limitent l'enregistrement des cookies (150 pour ce dernier) et donc, on ne retrouve pas toutes les images cochées après rafraîchissement de la page. Je cherche donc une solution où on pourrait enregistrer toutes les images dans un seul cookie. Par ailleurs, je cherche aussi à savoir comment on met une date de fin aux cookies, ils s'arrêtent lorsqu'on quitte la session. Voici le code du fichier 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
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
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);
  });
 
});

Et voici un exemple du fichier HTML :

Code HTML :

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

1
2
3
4
<div class="test">
                <span class="disabled pictures" id="f1"><img src="img/f1.png"></span>
                <span class="disabled pictures" id="f2"><img src="img/f2.png"></span>
</div>

Merci d'avance pour votre aide.

[Watilin]

Bonjour,
dans une conversation précédente, je t’avais suggéré d’utiliser localStorage. As-tu considéré cette piste ?

[Lucas63]

Bonsoir. J'ai testé cette fonction lors de mon précédent problème (j'ai par ailleurs oublié de vous remercier de votre réponse, excusez-moi) et ça ne l'avait pas réglé, ça n'affichait d'ailleurs plus les images, peut-être que j'avais mal utilisé la fonction.