Comprendre et utiliser les cookies JavaScript

Le cookie JavaScript joue un rôle important dans la mise en cache. Cet article en donnera une introduction.

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

Lorsque le serveur Web envoie une page Web au navigateur, le serveur n'enregistrera pas les informations de l'utilisateur une fois la connexion fermée.

Le rôle des cookies est de résoudre « comment enregistrer les informations de l'utilisateur côté client » :

Lorsqu'un utilisateur visite une page Web, son nom peut être enregistré dans le cookie.

La prochaine fois que l'utilisateur visitera cette page, l'enregistrement d'accès de l'utilisateur pourra être lu dans le cookie.

Les cookies sont stockés sous forme de paires nom/valeur, comme indiqué ci-dessous :

username=John Doe

Lorsque le navigateur demande une page Web au serveur, le cookie appartenant à la page sera ajouté au demande au milieu. Le serveur obtient ainsi les informations sur les utilisateurs.

Utilisez JavaScript pour créer des cookies

JavaScript peut utiliser l'attribut document.cookie pour créer, lire et supprimer des cookies.

En JavaScript, créez un cookie comme celui-ci :

document.cookie="username=John Doe";

Vous pouvez également ajouter une heure d'expiration (en heure UTC ou GMT) au cookie. Par défaut, les cookies sont supprimés à la fermeture du navigateur :

document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT";

Vous pouvez indiquer au navigateur le chemin d'accès au cookie à l'aide du paramètre path. Par défaut, le cookie appartient à la page actuelle.

document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";

Utilisez JavaScript pour lire les cookies

En JavaScript, vous pouvez utiliser le code suivant pour lire les cookies :

var x = document.cookie;

document.cookie renverra tous les cookies au format chaîne : cookie1=value; cookie2=value;

Utiliser JavaScript pour modifier le cookie

En JavaScript, la modification des cookies est similaire à la création de cookies, comme suit :

document.cookie="username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";

Les anciens cookies seront écrasés.

Supprimer les cookies à l'aide de JavaScript

La suppression des cookies est simple. Il vous suffit de définir le paramètre expires sur l'heure précédente, comme indiqué ci-dessous, définissez-le sur jeu. 01 janvier 1970 00:00:00 GMT :

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

Notez que vous n'avez pas besoin de spécifier le cookie lorsque vous supprimez sa valeur.

Cookie String

La propriété document.cookie ressemble à une chaîne de texte normale, mais ce n'est pas le cas.

Même si vous écrivez une chaîne de cookie complète dans document.cookie, lorsque vous relisez les informations du cookie, les informations du cookie sont affichées sous la forme de paires nom/valeur.

Si vous définissez un nouveau cookie, l'ancien cookie ne sera pas écrasé. Le nouveau cookie sera ajouté à document.cookie, donc si vous relisez document.cookie, vous obtiendrez des données comme ceci :

cookie1=value;

afficher tous les cookies Créer un cookie 1 Créer un cookie 2 Supprimer le cookie 1 Supprimer le cookie 2

Si vous avez besoin de trouver une valeur de cookie spécifique, vous devez créer une fonction JavaScript pour trouver la valeur du cookie dans la chaîne de cookie.

Exemple de cookie JavaScript

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

Dans un premier temps, le visiteur visite la page web, il lui sera demandé de renseigner son nom. Ce nom sera stocké dans le cookie.

La prochaine fois que le visiteur visitera la page, il verra un message de bienvenue.

Dans cet exemple, nous allons créer 3 fonctions JavaScript :

Fonction pour définir la valeur du cookie

Fonction pour obtenir la valeur du cookie

Détecter la valeur du cookie Fonction

Fonction pour définir la valeur du cookie

Tout d'abord, nous créons une fonction pour stocker le nom du visiteur :

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

Analyse de la fonction :

Parmi les paramètres de fonction ci-dessus , le nom du cookie est cname, la valeur du cookie est cvalue et le délai d'expiration du cookie est défini.

Cette fonction définit le nom du cookie, la valeur du cookie et le délai d'expiration du cookie.

Fonction pour obtenir la valeur du cookie

Ensuite, nous créons une fonction utilisateur pour renvoyer la valeur du cookie spécifié :

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

Analyse de la fonction :

nom du cookie Le paramètre est cname.

Créez une variable texte pour récupérer le cookie spécifié : cname + "=".

Utilisez des points-virgules pour diviser la chaîne document.cookie et attribuez le tableau de chaînes divisées à ca (ca = document.cookie.split(';')).

Parcourez le tableau ca (i=0;i

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

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

Fonction pour détecter la valeur du cookie

Enfin, nous pouvons créer une fonction qui détecte si le cookie est créé

Si un cookie est créé. est défini, un message de bienvenue s'affichera.

Si aucun cookie n'est défini, une fenêtre contextuelle s'affichera demandant le nom du visiteur et la fonction setCookie sera appelée pour stocker le nom du visiteur. 365 jours :

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

Exemple complet

Exemple

function setCookie(cname,cvalue,exdays){
    var d = new Date();    d.setTime(d.getTime()+(exdays*24*60*60*1000));    var expires = "expires="+d.toGMTString();    document.cookie = cname+"="+cvalue+"; "+expires;}function getCookie(cname){
    var name = cname + "=";    var ca = document.cookie.split(&#39;;&#39;);    for(var i=0; i<ca.length; i++) {
        var c = ca[i].trim();        if (c.indexOf(name)==0) { return c.substring(name.length,c.length); }
    }
    return "";}function checkCookie(){
    var user=getCookie("username");    if (user!=""){
        alert("欢迎 " + user + " 再次访问");    }
    else {
        user = prompt("请输入你的名字:","");          if (user!="" && user!=null){
            setCookie("username",user,30);        }
    }}

本篇对相关cookie的相关知识做出了一些了解，更多的学习资料清关注php中文网即可观看。

相关推荐：

JavaScript 弹窗事件的相关知识

JavaScript typeof, null, 和 undefined的相关知识

JavaScript RegExp 对象的使用介绍

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!