English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Tutoriel de base JavaScript

Objet JavaScript

Fonction JavaScript

HTML DOM JS

BOM du navigateur JS

Tutoriel de base AJAX

Manuel de référence JavaScript

Cookie JavaScript

Les cookies vous permettent de stocker des informations dans le navigateur Web de l'utilisateur.

Qu'est-ce qu'un cookie ?

Un cookie est un petit fichier texte qui vous permet de stocker une petite quantité de données sur le ordinateur de l'utilisateur (près4KB).

Après que le serveur Web a envoyé la page au navigateur, la connexion est fermée et le serveur oublie toutes les informations sur l'utilisateur.

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

Les cookies peuvent être utilisés pour suivre des informations, telles que les préférences de l'utilisateur, afin que le site puisse récupérer cette information lors de la prochaine visite de l'utilisateur pour personnaliser la page.

Les cookies sont sauvegardés sous forme de paires "nom=valeur", par exemple :

username = Seagull

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 sur l'utilisateur.

Attention :Ne pas stocker de données sensibles dans les cookies, telles que les mots de passe ou les informations de carte de crédit, car les utilisateurs malveillants pourraient les manipuler.

Créer un cookie en utilisant JavaScript

En JavaScript, vous pouvez utiliserdocument.cookieCréation, lecture et suppression de cookies .

Vous pouvez créer un cookie ainsi :

  document.cookie = "username=Seagull";

Vous pouvez également ajouter une date d'expiration (en UTC). Par défaut, le cookie est supprimé lorsque le navigateur est fermé :

  document.cookie = "username=Seagull; expires=Mon, 25 Mar 2019 12:00:00 UTC";

En utilisant le paramètre path, vous pouvez informer le navigateur que le cookie appartient à quel chemin. Par défaut, le cookie appartient à la page actuelle :

  document.cookie = "username=Seagull; expires=Mon, 25 Mar 2019 12:00:00 UTC; path=/";

Lire un cookie en utilisant JavaScript

En JavaScript, vous pouvez lire les cookies ainsi :

  var x = document.cookie;

Lire un cookie est un peu plus complexe car ledocument.cookieL'attribut renvoie une chaîne contenant une liste séparée par des espaces de points-virgules et de tous les cookies (par exemple, paires nom = valeur, par exemple cookie1 = value; cookie2 = value; cookie3 = value). Pour obtenir un cookie individuel de cette liste, vous devez utilisersplit()Méthode pour le diviser en paires nom = valeur individuelles et rechercher un nom spécifique.

Cette chaîne ne contient pas d'attributs tels que expires, path, domain, etc., qui pourraient déjà être dans le jeu de cookies.

Changer un cookie en utilisant JavaScript

Le seul moyen de changer ou de modifier un cookie est de créer un cookie avec le même nom et un chemin différent que celui existant.

  document.cookie = "username=Ankit; expires=Mon, 25 Mar 2019 12:00:00 UTC; path=/";

Attention :Créer un cookie avec le même nom mais un chemin cookie différent ne changera pas le cookie existant, mais ajoutera un cookie supplémentaire.

Supprimer un cookie en utilisant JavaScript

Supprimer un cookie est très simple. Supprimer un cookie :

  • Il suffit de réutiliser le même nom de paramètre et de spécifier une valeur vide

  • ou configurez le paramètre expires à la date passée

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

Rappelez-vous, si vous avez spécifié path dans cookie ou d'autres attributs, vous devez également inclure eux dans la suppression.

Exemple JavaScript Cookie

Dans l'exemple suivant, nous allons créer un cookie stockant le nom d'utilisateur.

Lorsque l'utilisateur visite cette page pour la première fois, il sera demandé à l'utilisateur/Elle remplira son nom. Ensuite, ce nom sera stocké dans le cookie.

Lorsque l'utilisateur visite la même page la prochaine fois, il/Elle recevra la valeur stockée dans le cookie.

Pour l'exemple, nous allons créer2Fonction JavaScript :

  • Fonction de définition de la valeur du cookie

  • Fonction de récupération de la valeur du cookie

Stockez le cookie

Tout d'abord, nous créons une fonction stockant le nom de l'visitateur dans la variable cookie.

function setCookie(cname, cvalue) {
  var now = new Date();
  now.setMonth(now.getMonth() + + 1);
  var expires = "expires=";+ now.toUTCString();
  document.cookie = cname; + "==" + cvalue + "; + expires + ";path=/";
}
Voyons voir‹/›

Description de la fonction :

Les paramètres de cette fonction sont le nom du cookie (cname) et la valeur du cookie (cvalue).

Cette fonction définit le cookie en utilisant le nom du cookie, la valeur du cookie et la chaîne expires (1Mois) pour définir le cookie.

Lire le cookie

Ensuite, nous créons une fonction affichant la valeur spécifique du cookie.

function getCookie(cname) {
  var allcookies = document.cookie;
  cookieArr = allcookies.split(';');
  for(var i = 0; i < cookieArr.length; i++) {
     var cookiePair = cookieArr[i].split("=");
     if(cname == cookiePair[0].trim()) {
        document.write("Clé est: " + cookiePair[0] + "et valeur est: " + cookiePair[1]);
     }
  }
}
Voyons voir‹/›

Description de la fonction :

Cette fonction prend le nom du cookie (cname) en paramètre.

Obtenez tous les cookies (allcookies = document.cookie).

Divisez document.cookie avec un point-virgule en array nommé cookieArr (cookieArr = allcookies.split(';')).

Parcourez l'array cookieArr (i = 0; i <cookieArr.length; i ++]), et lisez chaque valeur (cookiePair = cookieArr [i]).

Si vous trouvez le cookie (cname == cookiePair [0]), écrivez la clé et la valeur du cookie (cookiePair [0], cookiePair [1]).

Rassemblez-les ensemble

function setCookie(cname, cvalue) {
  var now = new Date();
  now.setMonth(now.getMonth() + + 1);
  var expires = "expires=";+ now.toUTCString();
  document.cookie = cname; + "==" + cvalue + "; + expires + ";path=/";
}
function getCookie(cname) {
  var allcookies = document.cookie;
  cookieArr = allcookies.split(';');
  for(var i = 0; i < cookieArr.length; i++) {
     var cookiePair = cookieArr[i].split("=");
     if(cname == cookiePair[0].trim()) {
           document.write("Clé est: " + cookiePair[0] + "et valeur est: " + cookiePair[1]);
     }
  }
}
Voyons voir‹/›

Attributs des cookies

Les cookies ont5Enregistrement de données en texte pur pour une propriété :

AttributDescription
Nom=ValeurLes cookies sont définis et récupérés sous forme de paires nom-valeur
ExpiresDate d'expiration du cookie. Si elle est vide, le cookie expirera lorsque l'internaute quittera le navigateur
DomainNom de domaine de votre site Web
PathRépertoire ou chemin d'accès de la page du cookie à configurer. Si vous devez récupérer des cookies à partir de tout répertoire ou page, ce champ peut être laissé vide
SecureSi ce champ contient le mot 'secure', seules les serveurs sécurisés peuvent récupérer les cookies. Si ce champ est vide, il n'existe pas de telles restrictions