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.js
Ce 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 )