Les Cookies vous permettent de stocker des informations utilisateur dans les pages Web.
Quels sont les Cookies ?
Les Cookies sont des données, stockées dans de petits fichiers texte, sur votre ordinateur.
Quand un serveur web a envoyé une page Web à un navigateur, la connexion est fermée, et le serveur oublie tout ce qui concerne l'utilisateur.
Les Cookies ont été inventés pour résoudre le problème "comment mémoriser des informations sur l'utilisateur":
- Lorsqu'un utilisateur visite une page Web, son nom peut être stocké dans un cookie .
- La prochaine fois que l'utilisateur visite la page, le cookie " se souvient" de son nom.
Les cookies sont enregistrés par paires nom-valeur comme:
username = John Doe
Lorsqu'une requête de navigateur d' une page web depuis un serveur, les cookies appartenant à la page est ajoutée à la demande. De cette façon, le serveur reçoit les données nécessaires pour «se souvenir» des informations sur les utilisateurs.
Créer a Cookie avec JavaScript
JavaScript peut créer, lire et supprimer les cookies avec le document.cookie propriété.
Avec JavaScript, a cookie peut être créé comme ceci:
document.cookie = "username=John Doe";Vous pouvez également ajouter une date d'expiration (en heure UTC). Par défaut, the cookie est supprimé lorsque le navigateur est fermé:
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC";Avec un paramètre de chemin, vous pouvez indiquer au navigateur quel chemin the cookie appartient. Par défaut, the cookie appartient à la page en cours.
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";Lire a Cookie avec JavaScript
Avec JavaScript, les cookies peuvent être lus comme ceci:
var x = document.cookie;document.cookie retournera tous les cookies dans une chaîne semblable: cookie1=value; cookie2=value; cookie3=value; cookie1=value; cookie2=value; cookie3=value;
Changer a Cookie avec JavaScript
Avec JavaScript, vous pouvez modifier a cookie de la même façon que vous créez:
document.cookie = "username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";
Le vieux cookie est écrasé.
Supprimer a Cookie avec JavaScript
Suppression d' a cookie est très simple. Il suffit de régler le paramètre expire à une date passée:
document.cookie = "username=; expires=Thu, 01
Jan 1970 00:00:00 UTC";
Notez que vous ne devez pas spécifier a cookie valeur lorsque vous supprimez a cookie .
Le Cookie cordes
La document.cookie propriété ressemble à une chaîne de texte normal. Mais ce n'est pas.
Même si vous écrivez tout un cookie chaîne à document.cookie , quand vous le lisez à nouveau, vous ne pouvez voir la paire de ce nom-valeur.
Si vous définissez un nouveau cookie , plus âgés les cookies ne sont pas écrasés. Le nouveau cookie est ajouté à document.cookie , donc si vous lisez document.cookie à nouveau , vous obtiendrez quelque chose comme:
cookie1 = value; cookie2 = value;
les
Si vous voulez trouver la valeur de celui spécifié cookie , vous devez écrire une fonction JavaScript qui recherche le cookie valeur dans le cookie chaîne.
JavaScript Cookie Exemple
Dans l'exemple à suivre, nous allons créer a cookie qui stocke le nom d'un visiteur.
La première fois qu'un visiteur arrive sur la page Web, il sera demandé de remplir en son nom. Le nom est ensuite stockée dans a cookie .
La prochaine fois que le visiteur arrive à la même page, il recevra un message de bienvenue.
Pour l'exemple, nous allons créer 3 fonctions JavaScript:
- Une fonction pour définir un cookie valeur
- Une fonction pour obtenir un cookie valeur
- Une fonction pour vérifier un cookie valeur
Une fonction pour définir a Cookie
Tout d' abord, nous créons une fonction qui stocke le nom du visiteur dans a cookie de variable:
Exemple
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var
expires = "expires="+ d.toUTCString();
document.cookie =
cname + "=" + cvalue + "; " + expires;
}
Exemple expliqué:
Les paramètres de la fonction sont au- dessus du nom du cookie (cname) , la valeur du the cookie (cvalue) , et le nombre de jours jusqu'à ce que le cookie doit expirer (exdays).
La fonction définit a cookie en additionnant le cookiename , the cookie valeur, et expire chaîne.
Une fonction pour obtenir a Cookie
Ensuite, nous créons une fonction qui renvoie la valeur d'un spécifié cookie :
Exemple
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i = 0; i <ca.length; i++) {
var c = ca[i];
while (c.charAt(0)=='
') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length,c.length);
}
}
return "";
}
Fonction expliqué:
Prenez the cookiename comme paramètre (cname).
Créer une variable (nom) avec le texte à rechercher (cname + "=").
De Split document.cookie sur des points - virgules dans un tableau appelé ca (ca = document.cookie.split(';')) .
Boucle à travers le ca array (i=0;i<ca.length;i++) , et lu chaque valeur c=ca[i]) .
Si the cookie est trouvé (c.indexOf(name) == 0) , retourner la valeur du the cookie (c.substring(name.length,c.length) .
Si the cookie est introuvable, le retour "."
Une fonction pour vérifier a Cookie
Enfin, nous créons la fonction qui checks si a cookie est réglé.
Si the cookie est défini , il affiche un message d' accueil.
Si the cookie est pas défini, il affichera une boîte rapide, demandant le nom de l'utilisateur, et stocke le nom d' utilisateur cookie pendant 365 jours, en appelant la setCookie fonction:
Exemple
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);
}
}
}
Tous ensemble maintenant
Exemple
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+d.toUTCString();
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];
while (c.charAt(0) == '
') {
c = c.substring(1);
}
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, 365);
}
}
} Essayez - le vous - même » L'exemple ci - dessus utilise le checkCookie() fonction chargement de la page.