Javascript : créer, lire et supprimer un cookie

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 demandée. 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 le nom et/ou l'adresse ip 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 ferméture 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, 03 Oct 2022 00:00:00 GMT; path=/";
    document.cookie = "hobbie=internet; expires=Mon, 03 Oct 2022 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>
    var 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){
        var 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){
        var tablecookie = document.cookie.split(';');
        var nomcookie = "hobbie=";
        var 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);
                }
        }
        alert(valeurcookie);
    }
</script>

Dans le code ci-dessous, 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 obliger 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>

 

Partager :
comments powered by Disqus

Suivez-moi sur Twitter

Copyright © 2010-2019 Lookman Design, tous droits réservés .