Stockage des cookies dans un seul
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:
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:
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.
