Stockage de cookies Fermé

Question

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 :

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 du code HTML :

<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.

jordane45 · Answer

Bonjour,

Chaque navigateur dispose de ses propres limitations en terme de cookies...
Par exemple, sur mon chrome

16:55:39.776: Count: Max Cookie count with Character Length 3 and character "1": 180
16:55:41.460: Size: Max Cookie Character Length using character "1": 4096
16:55:42.976: Count: Max Cookie count with Character Length 4096 and character "1": 180
16:55:43.996: Size: Max Cookie Character Length using character "ÿ": 2049
16:55:45.964: Count: Max Cookie count with Character Length 2049 and character "ÿ": 180
16:55:46.490: Count: Max Cookie count with Character Length 100 and character "1": 180
16:55:47.14: Count: Max Cookie count with Character Length 10 and character "1": 180
16:55:47.565: Count: Max Cookie count with Character Length 5 and character "1": 180
16:55:47.769: Guessing Max Cookie Count Per Domain: 180
16:55:47.769: Guessing Max Cookie Size Per Cookie: 4096 bytes


La première question à se poser est ... dois tu créér un cookie par image ou ne peux tu pas toutes les mettres dans un seul ?

Ensuite, si tu as trop de limites avec les cookies.. pourquoi ne pas se tourner vers le stockage local (local storage) ou le stockage via une BDD ?

Stockage de cookies

1 réponse

Discussions similaires