Cookies JavaScript

Les cookies vous permettent de stocker des informations utilisateur sur une page web.

Qu'est-ce qu'un cookie ?

Les cookies sont des données stockées sur votre ordinateur dans de petits fichiers texte.

Après que le serveur web envoie une page au navigateur et que la connexion est fermée, le serveur oublie toutes les informations de l'utilisateur.

Les cookies ont été inventés pour résoudre le problème de "comment se souvenir des informations de l'utilisateur" :

  • Lorsque l'utilisateur visite une page web, son nom peut être stocké dans un cookie.
  • Lorsque l'utilisateur visite à nouveau cette page, le cookie se souviendra de son nom.

Les cookies sont stockés sous forme de paires de noms et de valeurs, par exemple :

username = Bill Gates

Lorsque le navigateur demande une page au serveur, les cookies appartenant à cette page sont ajoutés à la requête. De cette manière, le serveur obtient les données nécessaires pour "se souvenir" des informations de l'utilisateur.

Si le navigateur ne prend pas en charge les cookies locaux, les exemples suivants ne fonctionneront pas.

Création de cookies via JavaScript

JavaScript peut utiliser document.cookie Création, lecture et suppression de cookies via des propriétés.

Vous pouvez créer un cookie de cette manière en utilisant JavaScript :

document.cookie = "username=Bill Gates";

Vous pouvez également ajouter une date de validité (heure UTC). Par défaut, le cookie est supprimé lorsque le navigateur est fermé :

document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC";

En utilisant path Paramètres, vous pouvez informer le navigateur du chemin auquel le cookie appartient. Par défaut, le cookie appartient à la page actuelle.

document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";

Lire cookie via JavaScript

Avec JavaScript, vous pouvez lire le cookie ainsi :

var x = document.cookie;

document.cookie Retournera tous les cookies dans une seule chaîne, par exemple : cookie1=value; cookie2=value; cookie3=value;

Changer cookie via JavaScript

En utilisant JavaScript, vous pouvez le changer comme vous avez créé le cookie :

document.cookie = "username=Steve Jobs; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";

L'ancien cookie est couvert.

Supprimer cookie via JavaScript

La suppression de cookie est très simple.

Lorsque vous supprimez un cookie, vous n'avez pas besoin de spécifier la valeur du cookie :

Directement mettre expires Paramètres de la date passée :

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

Vous devriez définir le chemin du cookie pour vous assurer de supprimer le bon cookie.

Si vous ne spécifiez pas le chemin, certains navigateurs ne vous permettent pas de supprimer le cookie.

Chaîne de cookie

document.cookie L'attribut semble être une chaîne de texte normale. Mais ce n'est pas le cas.

Même si vous avez versé document.cookie Écrire une chaîne de cookie complète, lorsque vous la lirez à nouveau, vous ne verrez que son nom-valeur.

Si un nouveau cookie est configuré, l'ancien cookie ne sera pas couvert. Le nouveau Cookie sera ajouté à document.cookie, donc si vous lisez document.cookie, vous obtiendrez quelque chose comme cela :

cookie1 = value; cookie2 = value;
　 　 　

Si vous souhaitez trouver la valeur d'un cookie spécifique, vous devez écrire une fonction JavaScript pour rechercher la valeur du cookie dans la chaîne de cookie.

Exemple d'utilisation de JavaScript Cookie

Dans l'exemple suivant, nous allons créer un cookie pour stocker le nom de l'visitant.

Lorsque le visiteur arrive pour la première fois sur la page, il lui sera demandé de remplir son nom. Ce nom est ensuite stocké dans le cookie.

Lorsque le visiteur atteindra à nouveau la même page, il recevra un message de bienvenue.

Par exemple, nous allons créer 3 fonctions JavaScript :

  1. Fonction pour configurer la valeur du cookie
  2. Fonction pour obtenir la valeur du cookie
  3. Fonction pour vérifier la valeur du cookie

Fonction pour configurer le cookie

Tout d'abord, nous créons une fonction pour stocker le nom de l'visitant dans la variable cookie :

Exemple

function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+ d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

Explication de l'exemple :

Les paramètres de cette fonction sont : le nom du cookie (cname), la valeur du cookie (cvalue) et le nombre de jours avant l'expiration du cookie (exdays).

En ajoutant le nom du cookie, la valeur du cookie et la chaîne d'expiration, cette fonction configure le cookie.

Fonction pour obtenir le cookie

Ensuite, nous créons une fonction qui renvoie la valeur du cookie spécifié :

Exemple

function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
         }
         if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
         }
     }
    return "";
}

Explication de la fonction :

Utilisez le cookie comme paramètre (cname).

Créez une variable (name) et le texte à rechercher (CNAME”=”).

Décodez la chaîne de cookie, traitez les cookies contenant des caractères spéciaux, par exemple “$”.

Diviser document.cookie en utilisant des points-virgules dans un tableau nommé ca (decodedCookie.split(';')).

Parcourir l'array ca (i = 0; i < ca.length; i++), puis lire chaque valeur c = ca[i].

Si le cookie est trouvé (c.indexOf(name) == 0), retourne la valeur du cookie (c.substring(name.length, c.length)).

Si le cookie n'est pas trouvé, retourne "".

Fonction de détection du cookie

Enfin, nous créons une fonction pour vérifier si le cookie est configuré.

Si le cookie est configuré, un message de salutation apparaîtra.

Si le cookie n'est pas configuré, une boîte de dialogue s'affichera pour demander le nom de l'utilisateur, et le nom d'utilisateur cookie sera stocké pendant 365 jours via l'appel setCookie Fonction :

Exemple

function checkCookie() {
    var username = getCookie("username");
    if (username != "") {
        alert("Bienvenue encore " + username);
    }
        username = prompt("Please enter your name:", "");
        if (username != "" && username != null) {
            setCookie("username", username, 365);
        }
    }
}

Maintenant, combinons-les

Exemple

function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
    var expires = "expires="+d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
         }
        if (c.indexOf(name)  == 0) {
            return c.substring(name.length, c.length);
         }
    }
    return "";
}
function checkCookie() {
    var user = getCookie("username");
    if (user != "") {
        alert("Bienvenue à nouveau " + user);
    }
        user = prompt("Veuillez entrer votre nom:", "");
        if (user != "" && user != null) {
            setCookie("username", user, 365);
        }
    }
}

Essayez-le vous-même

L'exemple suivant exécutera la fonction checkCookie() après le chargement de la page.