JavaScriptCookies Javascript
Javascript et les cookies
Créer un cookie temporaire
<script>
document.cookie = "nom_utilisateur=john wayne";
alert(document.cookie);
</script> 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>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> 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> 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> 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)
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>