Source : Un exemple d'utilisation des cookies pour un créer un historique de navigation.
Code : Voici un exemple avec 3 pages HTML (page1.htm, page2.htm, page3.htm) :
page1.htm
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 <html> <head> <title>Page 1</title> <script type="text/javascript" src="historique.js"> </script> </head> <body onload="lireCookie()"> <a href="javascript:ecrireCookie('page2.htm')">page 2</a><br /> <a href="javascript:ecrireCookie('page3.htm')">page 3</a><br /> <br /><br /> <input type="button" value="Supprimer cookie" onclick="SuppressionCookie()" /> <br /><br /> <div id="divHistorique"></div> </body> </html>
page2.htm
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 <html> <head> <title>page 2</title> <script type="text/javascript" src="historique.js"> </script> </head> <body onload="lireCookie()"> <a href="javascript:ecrireCookie('page1.htm')">page 1</a><br /> <a href="javascript:ecrireCookie('page3.htm')">page 3</a><br /> <br /><br /> <input type="button" value="Supprimer cookie" onclick="SuppressionCookie()" /> <br /><br /> <div id="divHistorique"></div> </body> </html>
page3.htm
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 <html> <head> <title>page 3</title> <script type="text/javascript" src="historique.js"> </script> </head> <body onload="lireCookie()"> <a href="javascript:ecrireCookie('page1.htm')">page 1</a><br /> <a href="javascript:ecrireCookie('page2.htm')">page 2</a><br /> <br /><br /> <input type="button" value="Supprimer cookie" onclick="SuppressionCookie()" /> <br /><br /> <div id="divHistorique"></div> </body> </html>
historique.jsCe code est appelé dans chaque page.
Code javascript : 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 function gestionCookie(cookie) { var infosCookie = ""; var nom = "historique"; var n1, n2; n1 = cookie.indexOf(nom); if (n1==-1) { return ""; } else { n2 = cookie.indexOf(";",n1); if (n2==-1) n2 = cookie.length; infosCookie = unescape(cookie.substring(n1+nom.length+1,n2)); } return infosCookie; } function lireCookie() { var cookie = document.cookie; var infosCookie = ""; infosCookie = gestionCookie(cookie); infosCookie = infosCookie.replace(new RegExp(" ","g"),"<br>"); document.getElementById("divHistorique").innerHTML = "<h4>Historique:</h4>"+infosCookie; } function ecrireCookie(url) { var cookie = document.cookie; var nom = "historique"; var expireDate = new Date(); expireDate.setTime(expireDate.getTime() + 3600*1000); cookie = nom+"="+escape(gestionCookie(cookie)+" "+url)+";expires="+expireDate.toGMTString(); document.cookie = cookie; window.location.href=url; } function SuppressionCookie() { var cookie = document.cookie; var nom = "historique"; var expireDate = new Date(); expireDate.setTime(expireDate.getTime() + (-1)*3600*1000); cookie = nom+"="+escape(" ")+";expires="+expireDate.toGMTString(); document.cookie = cookie; lireCookie(); }
Remarques :
- Chaque page contient un div id="divHistorique" qui contient l'url des pages visitées (le contenu du div est mis à jour lors de chaque changement de page).
- Le code fonctionne sous Firefox, Internet Explorer (testé sous IE5 et IE7 donc doit logiquement passer sous IE6 )
Partager