Qu’est-ce qu’un cookie ?
Un cookie est une information sous forme de fichier texte enregistré sur votre ordinateur. Ce fichier peut contenir n’importe quelle valeur et sa durée de vie est limitée.
Pourquoi un cookie ?
Lorsqu’on visite par exemple un site web, une requête est envoyée au serveur pour demander la page voulue. Le serveur retourne cette page et par la suite, en principe, le serveur oublie cette communication qui vient de se passer. Pour résoudre ce problème, des informations peuvent être enregistrées dans un cookie comme par exemple l’adresse ip ou d’autres informations afin de reconnaître le visiteur à une prochaine visite.
En javascript, contrairement à PHP, la création de cookie peut se faire n’importe où dans le document.
Création d’un cookie
Pour créer un cookie, la syntaxe est la suivante :
<script>
document.cookie = "nom_cookie=valeur_cookie; expires=expiration; path=chemin";
</script>
nom_cookie : nom du cookie (obligatoire)
valeur_cookie : valeur du cookie
expires : date d’expiration du cookie
path : chemin du cookie
Sans le paramètre expires, le cookie a une durée de vie très limitée c’est-à-dire qu’il est supprimé à la fermeture du navigateur. Le paramètre path attribue comme chemin par défaut celui de la page en cours (la page où le script est exécuté).
Exemple de cookies créés :
<script>
document.cookie = "nom=Balo Ziétin; expires=Mon, 06 Oct 2025 00:00:00 GMT; path=/";
document.cookie = "hobbie=internet; expires=Mon, 06 Oct 2025 00:00:00 GMT; path=/";
</script>
Lecture d’un cookie
Pour lire un cookie, il faudra le chercher. En effet la syntaxe document.cookie seul retourne tous les cookies disponibles sous forme de chaîne.
Essayons ce code :
<script>
let allcookies = document.cookie;
alert(allcookies);
</script>
Nous aurons à l’affichage tous les cookies disponibles et ceux que nous avons créé :
PHPSESSID=lq9vivgtr961jl589325v1l8f2; _ga=GA1.1.1333336507.154000191; shareMessage=true; nom=Balo Ziétin; hobbie=internet
Concrètement, pour retrouver un cookie, nous allons d’abord vérifier si des cookies existent en tapant ce code :
<script>
if (document.cookie.length > 0){
}
</script>
Ensuite, s’il en existe, nous allons mettre dans un tableau tous les cookies existant avec la méthode split() qui permet de former un tableau à partir d’une chaîne en définissant le séparateur.
Dans notre cas, le séparateur est point-virgule (;) :
<script>
if (document.cookie.length > 0){
let tablecookie = document.cookie.split(';');
}
</script>
Chaque cellule de notre tableau contiendra les informations de chaque cookie par exemple PHPSESSID=lq9vivgtr961jl589325v1l8f2. Alors pour rechercher un cookie, nous allons utiliser le nom du cookie suivi de = donc PHPSESSID= si nous voulons la valeur du cookie PHPSESSID. Pour ce faire, nous allons parcourir notre tableau pour rechercher la valeur du cookie concerné. Mettons le code et expliquons après :
<script>
if (document.cookie.length > 0){
let tablecookie = document.cookie.split(';');
let nomcookie = "hobbie=";
let valeurcookie = "";
for (i=0;i<tablecookie.length;i++){
if(tablecookie[i].indexOf(nomcookie) != -1){
valeurcookie = tablecookie[i].substring(nomcookie.length + tablecookie[i].indexOf(nomcookie), tablecookie[i].length);
}
}
console.log(valeurcookie);
}
</script>Dans le code ci-dessus, on cherche le cookie qui a pour nom « hobbie ».
Nous parcourons la table avec la boucle for. A chaque tour de boucle, on vérifie si notre cookie a été trouvé en utilisant la fonction indexOf qui donne une valeur supérieur à -1 si la recherche a été fructueuse.
Alors si le cookie a été trouvé, la valeur du cookie prendra la sous-chaine qui vient après le nom du cookie ajouté à =. Donc dans notre code, il s’agira de la sous-chaine qui vient après « hobbie= ». Pour retrouver cette sous-chaine, on utilisera la fonction substring qui retourne une sous-chaine entre deux positions.
Modification d’un cookie
Modifier un cookie est en fait une création avec le même nom et des valeurs différentes. Modifions notre cookie hobbie en lui mettant lecture comme valeur et une date d’expiration au 07 Oct 2030.
<script>
document.cookie = "hobbie=lecture; expires=Mon, 07 Oct 2030 01:00:00 GMT; path=/";
</script>
Suppression d’un cookie
Pour supprimer un cookie, il suffit d’utiliser la syntaxe de la création avec une date antérieure.On n’est pas obligé aussi d’attribuer une valeur. Essayons de supprimer le cookie hobbie :
<script>
document.cookie = "hobbie=; expires=Mon, 02 Oct 2000 01:00:00 GMT; path=/";
</script>
NB: Il est impossible à javascript d’avoir accès aux cookies sécurisés avec l’attribut HttpOnly.