Cookies JavaScript


Les cookies sont utilisés pour stocker des informations sur les utilisateurs sur les pages Web.

Que sont les cookies ?

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 la 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 suit :

username=John Doe

Lorsque le navigateur Lorsqu'un page Web est demandée au serveur, les cookies appartenant à cette page sont ajoutés à la demande. 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 suit :

document.cookie="username=John Doe";

Vous pouvez également ajouter une expiration heure (en heure UTC ou GMT). 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 utiliser le paramètre path pour indiquer au navigateur le chemin d'accès au cookie. Par défaut, le cookie appartient à la page actuelle.

document.cookie="username=John Doe; expires=jeudi 18 décembre 2013 12:00:00 GMT; path=/";

Lire les cookies à l'aide de JavaScript

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

var x = document.cookie;

Notedocument.cookie 将以字符串的方式返回所有的 cookies，类型格式： cookie1=value; cookie2=value; cookie3=value;

Modifier les cookies à l'aide de JavaScript

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

document.cookie="username= John Smith; expires=Jeudi 18 décembre 2013 12:00:00 GMT;

L'ancien cookie sera écrasé.

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éfini sur jeu. 01 janvier 1970 00:00:00 GMT :

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

Notez que vous n'êtes pas obligé de spécifier la valeur du cookie lorsque vous le supprimez.

Cookie String

document L'attribut .cookie ressemble à une chaîne de texte ordinaire, mais ce n'est pas le cas

Même si vous écrivez une chaîne de cookie complète dans document.cookie, le cookie sera perdu lorsque vous le relisez. informations. Les informations sont affichées sous 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 celle-ci :

cookie1=value; cookie2=value;

si vous en avez besoin pour trouver une valeur de cookie spécifique, vous devez créer une fonction JavaScript pour trouver la valeur du cookie dans la chaîne du 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 :

  1. Fonction pour définir la valeur du cookie

  2. Obtenir la valeur du cookie Fonction

  3. Fonction pour détecter la valeur du cookie

Fonction pour définir la valeur du cookie

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

fonction 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 + "; " + expire ;
}

Analyse de la fonction :

Dans 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 expire 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 user 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 :

Le paramètre du nom du cookie 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<ca.length;i++), puis lisez chaque valeur du tableau et supprimez les espaces de début et de fin (c=ca[i].trim()) .

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 a été créé

Si le cookie est défini, il sera affiché. Un message de bienvenue

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

function checkCookie()
{
var username=getCookie("username");
if (username!="")
{
alert("Bienvenue à nouveau " + nom d'utilisateur);
}
else
{
username = prompt("Veuillez entrer votre nom :","");
if (username!="" && nom d'utilisateur!=null)
{
setCookie("nom d'utilisateur",nom d'utilisateur,365);
}
}
}

Instance complète

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
</head>
<head>
<script>
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(';');
	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("Welcome again " + user);
	}
	else {
		user = prompt("Please enter your name:","");
  		if (user!="" && user!=null){
    		setCookie("username",user,30);
    	}
	}
}
</script>
</head>
	
<body onload="checkCookie()"></body>
	
</html>

Exécuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

L'exemple suivant exécute la fonction checkCookie() lorsque la page est chargée.