Easy-Micro

LANGAGE JavaScript
Cookies Javascript

Javascript et les cookies

Formation Javascript par Easy-Micro Créer un cookie temporaire

<script>
document.cookie = "nom_utilisateur=john wayne";
alert(document.cookie);
</script>
Note : document.cookie = "nom_du_cookie = valeur_du_cookie"; Par défaut le cookie est détruit à la fermeture du navigateur

Formation Javascript par Easy-Micro Créer un cookie permanent

<script>
let le_nom = "nom_utilisateur";
let ma_valeur = "kiki_le_cookie";
document.cookie = le_nom + "=" + ma_valeur + "; expires="+"Sat,31-Dec-2099 00:00:01 GMT; domaine=www.easy-micro.org; path=/";
</script>
Note: domaine, et path sont des options facultatives.

Un cookie permanent avec expiration dans 30 secondes (soit 30 000 millisecondes)
<script>    
let la_date = new Date();
let expiration = 30000; // en milliseconde, soit 30s
let date_expire = la_date.setTime(la_date.getTime() + (expiration));
    
document.cookie = "mon_cookie=kiki_le_cookie; expires=" + date_expire + "; domain=www.easy-micro.org; path=/";
    
function alertCookie() {
  alert(document.cookie);
}
</script>
<div style="text-align:center"><button onclick="alertCookie()">Affiche les cookies</button></div>
 > Voir cet exemple Easy-Micro

Formation Javascript par Easy-Micro Récupère le login d'un utilisateur

Login : <input type="text" id="lelogin" value="Kiki le cookie">

<script>
let lenom;
function recupelelogin() {
	lenom = window.document.getElementById('lelogin').value;
	document.cookie = "login=" + lenom;
    
	if (lenom) {
        window.alert("Votre login : " + lenom);
    }
}

window.onload = recupelelogin;
</script>
 > Voir cet exemple Easy-Micro

Formation Javascript par Easy-Micro Suppression du cookie

Pour supprimer un cookie, il suffit de le rappeler en lui réaffectant une date d'expiration antèrieure à la date du jour. Une fois le navigateur fermé, le cookie sera supprimé.

<script>
if(document.cookie.length > 0) {
	alert("Cookie présent");
	document.cookie="login=ma_valeur; expires=Thu,01-Jan-1975 00:00:01 GMT; domain=www.easy-micro.org; path=/";
	alert("Mon cookie a été suprimé");
}
else {
	alert("Mon cookie n'est pas présent");
}
</script>

Formation Javascript par Easy-Micro Lecture du cookie

<script>
let debut = document.cookie.indexOf("moncookie");
if( debut == -1) {
	alert("il n'y a pas de cookie");
}
else {
	// calcul de la taille du cookie
	let fin = document.cookie.length;
	// calcul du début et fin de la chaîne de caractère à extraire du cookie
	alert(document.cookie.substring(debut,fin));
}
</script>

Note: la fonction indexOf() recherche dans une chaîne de caractéres la premiére occurrence d'un caractère et retourne quelle est la position du signe dans la chaîne. Il est possible mais facultatif de transmettre comme deuxième paramètre la position à partir de laquelle, dans la chaîne de caractères, la recherche doit commencer.

La réponse de la méthode indexOf() renvoie -1 si la recherche n'a pas abouti.
La fonction substring() permet de rechercher une sous-chaîne de caractères. Syntaxe: substring(début, fin)

Formation Javascript par Easy-Micro Mise à jour du cookie

<script>
// calcul de la taille du cookie
let fin = document.cookie.length;
if(fin > 0) {
   alert("Mon cookie est présent");
   // calcul du début et fin de la chaîne de caractère à extraire du cookie
   // 10 car le nom du cookie = 9 caractères (moncookie)
   let valeur_du_cookie = document.cookie.substring(10,fin));
   // conversion de variable au format texte vers format numérique pour pouvoir être incrémentée
   let cookieenum = parseInt(valeur_du_cookie);
   cookieenum = cookieenum + 1;
   alert("C'est votre "+ cookieenum + "ème visite sur cette page");
   document.cookie = "moncookie="+cookieenum+ "; expiures="+"Sat,31-Dec-2099 00:00:01 GMT; domain=www.easy-micro.org; path=/";
}
else {
	alert("Mon cookie n'est pas là, c'est votre première visite");
	// création du cookie
	let le_nom = "moncookie";
	let ma_valeur = 1;
	document.cookie = le_nom +<+>"=" + ma_valeur + "; expires="+"Sat,31-Dec-2099 00:00:01 GMT; domain=www.easy-micro.org; path=/";
	let debut = document.cookie.indexOf("moncookie");
}
</script>

Flux RSS Easy-Micro - Abonnez-vous Easy-Micro [ François Bisch ]