Cookie et variable

**Dev758** · 20/06/2019, 12h39

Bonjour. Je fais actuellement une page où on doit "check" des images puis enregistrer les cookies. Cette partie-là marche très bien mais le problème est que les navigateurs ont une limite de 150 cookies et ma page comporte plus de 600 images pouvant être cochées. J'aimerais donc savoir si on peut pallier à ce problème. De plus, la durée des cookies est limitée à la fin de la session, j'aimerais savoir où mettre une date de fin. Mon 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
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);
  });
 
});

Une partie en

Code HTML :

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

1
2
3
4
5
6
7
8
9
<body class="checklist">
        <section class="char-group">
        	<br /><br/>
            <div class="characters">
                <span class="disabled pictures" id="f0261"><img src="img/f0261.png"></span>
                <span class="disabled pictures" id="f0367"><img src="img/f0367.png"></span>
                <span class="disabled pictures" id="f0416"><img src="img/f0416.png"></span>
            </div>
         </section></body>

Merci beaucoup pour votre aide.

**NoSmoking** · 20/06/2019, 15h01

Bonjour,
il te faut regarder du côté de local/session Storage.

Ressource :
↪ Comprendre le storage en HTML5

**Dev758** · 21/06/2019, 14h06

Bonjour et merci pour votre réponse. J'ai lu la page et j'ai compris le principe mais je ne vois pas trop quoi changer dans mon code pour faire en sorte de faire fonctionner le local storage, avez-vous un conseil sur ce sujet ? Merci d'avance.

**NoSmoking** · 21/06/2019, 16h23

mais je ne vois pas trop quoi changer dans mon code

Tout

Le code en devient beaucoup plus simple.

Pour le localStorage :

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
function updateStorage(key, value, save) {
  if (save) {
    localStorage.setItem(key, value);
  }
  else {
    localStorage.removeItem(key);
  }
}
 
function readStorage(key) {
  return localStorage.getItem(key);
}
 
function readAllStorage() {
  const nbItem = localStorage.length;
  let i;
  let storeKey;
  for (i = 0; i < nbItem; i += 1) {
    storeKey = localStorage.key(i);
    // sortie console juste pour voir
    console.log("%d : %s ->", i, storeKey, readStorage(storeKey));
  }
}

rien de bien compliqué, et pour la mise en oeuvre, sur base de jQuery et de ton code :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
jQuery(document).ready(function($) {
  $('.disabled').on("click", function() {
    // objet jQuery en cours
    const $obj = $(this);
    // si classe disabled présente c'est que l'on va sauvegarder
    const save = $obj.hasClass("disabled");
    // on supprime la classe
    $obj.toggleClass("disabled");
    // on sauve/supprime la key
    updateStorage($obj.attr("id"), $obj.find("img").attr("src"), save);
  });
});

**Dev758** · 21/06/2019, 20h04

Merci beaucoup, ça a marché et les clés s'enregistrent bien dans le local storage. Seul petit problème, si je refresh la page, les clés sont toujours présentes mais les images "enabled" redeviennent "disabled" (si j'appuie dessus la clé disparaît donc ça marche toujours de ce côté là), j'ai fais des tests en modifiant l'ordre mais rien n'y fait. Voyez-vous où est l'erreur ?

**NoSmoking** · 24/06/2019, 10h47

Ce que je t’ais montré n’avait pour but que de te mettre sur la voie concernant de la simplicité d’utilisation du local/session Storage.

Je ne voudrais pas t'influencer mais sémantiquement parlant il me semble plus judicieux d'ajouter une classe « selected », à définir dans le CSS, aux éléments plutôt que de supprimer la classe « disabled ».
Une autre approche aurait été de construire ta page sur base de <input type ="checkbox">, le principe restant le même.
De plus si tu as une grande quantité d’éléments dans ta page le code en sera allégé et de fait plus lisible. Au passage le CSS permet également, via les sélecteurs, d’alléger le code en supprimant les classes inutiles.

L’affectation de l’événement au clic doit se faire que la classe « selected » soit présente ou non.
Il te faut donc cibler les éléments différemment, par exemple en utilisant le conteneur comme référence de ciblage soit $(".characters").children(), ou $(".characters span"), tu auras ainsi la garantie que quelque soit l’état de tes éléments enfants ceux-ci seront affectés par le clic au (re)chargement de la page.
Ici on aurait également pu passer par la délégation d’événement.

D’autres pistes d’améliorations sont encore possibles attendu que l’ID des éléments est reprise dans le numéro de l’image.

Au chargement de la page, la première fois ou les suivantes, il te faut lire les données présentes dans le local/session Storage afin de rétablir la sélection faite précédemment.
La première fois il n’y aura donc aucune sélection.
Cela implique qu'il te faut appeler la fonction readAllStorage() au chargement et qu'elle doit être modifiée pour qu'elle retourne, par exemple, un Array contenant les données stockées sous forme d’objet {"key": xxx, "value" ; yyyy}.

On pourrait écrire

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
 function readAllStorage() {
  const nbItem = localStorage.length;
  const store = [];
  let i;
  let storeKey;
  for (i = 0; i < nbItem; i += 1) {
    storeKey = localStorage.key(i);
    store.push({
      "key" : storeKey,
      "value": readStorage(storeKey)
    });
  }
  // retourne un Arrray d'Object
  return store;
}

Ceci étant il faut bien évidement mettre à jour les éléments fonction du résultat retourné, on va donc créer une fonction qui s'en charge.

Code :

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

1
2
3
4
5
6
7
8
function updatePage() {
  // lecture du storage
  const store = readAllStorage();
  // restaure la classe selected
  $.each(store, function(index, elem) {
    $("#" + elem.key).addClass("selected");
  });
}

On en profite, sur le même principe, pour créer une fonction de ré-initalisation de ta page, un « unselected » en quelque sorte que tu pourrais affecter à un bouton.

Code :

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

1
2
3
4
5
6
7
8
9
10
function resetPage() {
  // lecture du storage
  const store = readAllStorage();
  // supprime la classe selected
  $.each(store, function(index, elem) {
    $("#" + elem.key).removeClass("selected");
  });
  // vide le localStorage
  localStorage.clear();
}

La fonction sur le ready du document change pour tenir compte de ce qui est écrit ci-dessus, elle devient donc :

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
jQuery(document).ready(function($) {
  // restaure état précédent
  updatePage();
 
  // Attention ne pas cibler uniquement la classe selected
  $(".characters span").on("click", function() {
    // objet jQuery en cours
    const $obj = $(this);
    // on bascule la classe selected
    $obj.toggleClass("selected");
    // si classe selected présente c'est que l'on sauvegarde
    const save = $obj.hasClass("selected");
    // on sauve/supprime la key
    updateStorage($obj.attr("id"), $obj.find("img").attr("src"), save);
  });
 
  // bouton annulation éventuel
  $("#clearStore").on("click", function() {
    resetPage();
  });
});

J'ai l'impression d'avoir été complet ou presque !

Nota :
les fonctions updateStorage et readStorage restent inchangées.

**Dev758** · 24/06/2019, 20h44

Merci énormément pour votre aide, votre explication a été très claire et votre méthode est bien plus efficace que la mienne. J'ai donc modifié le CSS vis-à-vis la classe "selected" et effectivement, tout marche à merveille sur mon site. Merci beaucoup et je pense en avoir appris pas mal sur le local storage.

Cookie et variable

JavaScript

Discussions similaires

Partager

Partager