JavaScript et cookies
Que sont les cookies?
Les navigateurs Web et les serveurs utilisent le protocole HTTP pour communiquer et HTTP est un protocole sans état. Mais pour un site Web commercial, il est nécessaire de conserver les informations de session entre différentes pages. Par exemple, l'enregistrement d'un utilisateur se termine après avoir terminé de nombreuses pages. Mais comment conserver les informations de session des utilisateurs sur toutes les pages Web.
Dans de nombreuses situations, l'utilisation de cookies est la méthode la plus efficace pour se souvenir et suivre les préférences, les achats, les commissions et d'autres informations nécessaires pour une meilleure expérience des visiteurs ou des statistiques du site.
Comment ça fonctionne ?
Votre serveur envoie certaines données au navigateur du visiteur sous la forme d'un cookie. Le navigateur peut accepter le cookie. Si tel est le cas, il est stocké sous forme d'enregistrement en texte brut sur le disque dur du visiteur. Désormais, lorsque le visiteur arrive sur une autre page de votre site, le navigateur envoie le même cookie au serveur pour récupération. Une fois récupéré, votre serveur sait / se souvient de ce qui a été stocké précédemment.
Les cookies sont un enregistrement de données en texte brut de 5 champs de longueur variable -
Expires- La date d'expiration du cookie. Si ce champ est vide, le cookie expirera lorsque le visiteur quittera le navigateur.
Domain - Le nom de domaine de votre site.
Path- Le chemin d'accès au répertoire ou à la page Web qui a défini le cookie. Cela peut être vide si vous souhaitez récupérer le cookie à partir de n'importe quel répertoire ou page.
Secure- Si ce champ contient le mot «sécurisé», alors le cookie ne peut être récupéré qu'avec un serveur sécurisé. Si ce champ est vide, une telle restriction n'existe pas.
Name=Value - Les cookies sont définis et récupérés sous la forme de paires clé-valeur
Les cookies ont été initialement conçus pour la programmation CGI. Les données contenues dans un cookie sont automatiquement transmises entre le navigateur Web et le serveur Web, de sorte que les scripts CGI sur le serveur peuvent lire et écrire les valeurs de cookie qui sont stockées sur le client.
JavaScript peut également manipuler les cookies en utilisant le cookie propriété du Documentobjet. JavaScript peut lire, créer, modifier et supprimer les cookies qui s'appliquent à la page Web actuelle.
Stockage des cookies
Le moyen le plus simple de créer un cookie est d'attribuer une valeur de chaîne à l'objet document.cookie, qui ressemble à ceci.
document.cookie = "key1 = value1;key2 = value2;expires = date";Ici le expiresl'attribut est facultatif. Si vous fournissez à cet attribut une date ou une heure valide, le cookie expirera à une date ou une heure donnée et par la suite, la valeur des cookies ne sera pas accessible.
Note- Les valeurs des cookies ne peuvent pas inclure de points-virgules, de virgules ou d'espaces. Pour cette raison, vous pouvez utiliser le JavaScriptescape()pour encoder la valeur avant de la stocker dans le cookie. Si vous faites cela, vous devrez également utiliser leunescape() fonction lorsque vous lisez la valeur du cookie.
Exemple
Essayez ce qui suit. Il définit un nom de client dans un cookie d'entrée.
<html>
<head>
<script type = "text/javascript">
<!--
function WriteCookie() {
if( document.myform.customer.value == "" ) {
alert("Enter some value!");
return;
}
cookievalue = escape(document.myform.customer.value) + ";";
document.cookie = "name=" + cookievalue;
document.write ("Setting Cookies : " + "name=" + cookievalue );
}
//-->
</script>
</head>
<body>
<form name = "myform" action = "">
Enter name: <input type = "text" name = "customer"/>
<input type = "button" value = "Set Cookie" onclick = "WriteCookie();"/>
</form>
</body>
</html>Production
Maintenant, votre machine a un cookie appelé name. Vous pouvez définir plusieurs cookies à l'aide de plusieurs paires clé = valeur séparées par une virgule.
Lire les cookies
La lecture d'un cookie est aussi simple que l'écriture d'un cookie, car la valeur de l'objet document.cookie est le cookie. Vous pouvez donc utiliser cette chaîne chaque fois que vous souhaitez accéder au cookie. La chaîne document.cookie conservera une liste de paires nom = valeur séparées par des points-virgules, oùname est le nom d'un cookie et la valeur est sa valeur de chaîne.
Vous pouvez utiliser des chaînes ' split() fonction pour diviser une chaîne en clé et valeurs comme suit -
Exemple
Essayez l'exemple suivant pour obtenir tous les cookies.
<html>
<head>
<script type = "text/javascript">
<!--
function ReadCookie() {
var allcookies = document.cookie;
document.write ("All Cookies : " + allcookies );
// Get all the cookies pairs in an array
cookiearray = allcookies.split(';');
// Now take key value pair out of this array
for(var i=0; i<cookiearray.length; i++) {
name = cookiearray[i].split('=')[0];
value = cookiearray[i].split('=')[1];
document.write ("Key is : " + name + " and Value is : " + value);
}
}
//-->
</script>
</head>
<body>
<form name = "myform" action = "">
<p> click the following button and see the result:</p>
<input type = "button" value = "Get Cookie" onclick = "ReadCookie()"/>
</form>
</body>
</html>Note - Ici length est une méthode de Arrayclasse qui renvoie la longueur d'un tableau. Nous discuterons des tableaux dans un chapitre séparé. À ce moment-là, essayez de le digérer.
Note- Il se peut que d'autres cookies soient déjà installés sur votre ordinateur. Le code ci-dessus affichera tous les cookies définis sur votre machine.
Définition de la date d'expiration des cookies
Vous pouvez prolonger la durée de vie d'un cookie au-delà de la session actuelle du navigateur en définissant une date d'expiration et en enregistrant la date d'expiration dans le cookie. Cela peut être fait en réglant le‘expires’ attribuer à une date et une heure.
Exemple
Essayez l'exemple suivant. Il montre comment prolonger la date d'expiration d'un cookie d'un mois.
<html>
<head>
<script type = "text/javascript">
<!--
function WriteCookie() {
var now = new Date();
now.setMonth( now.getMonth() + 1 );
cookievalue = escape(document.myform.customer.value) + ";"
document.cookie = "name=" + cookievalue;
document.cookie = "expires=" + now.toUTCString() + ";"
document.write ("Setting Cookies : " + "name=" + cookievalue );
}
//-->
</script>
</head>
<body>
<form name = "myform" action = "">
Enter name: <input type = "text" name = "customer"/>
<input type = "button" value = "Set Cookie" onclick = "WriteCookie()"/>
</form>
</body>
</html>Production
Supprimer un cookie
Parfois, vous souhaiterez supprimer un cookie afin que les tentatives ultérieures de lecture du cookie ne renvoient rien. Pour ce faire, il vous suffit de définir la date d'expiration sur une heure du passé.
Exemple
Essayez l'exemple suivant. Il illustre comment supprimer un cookie en définissant sa date d'expiration à un mois après la date actuelle.
<html>
<head>
<script type = "text/javascript">
<!--
function WriteCookie() {
var now = new Date();
now.setMonth( now.getMonth() - 1 );
cookievalue = escape(document.myform.customer.value) + ";"
document.cookie = "name=" + cookievalue;
document.cookie = "expires=" + now.toUTCString() + ";"
document.write("Setting Cookies : " + "name=" + cookievalue );
}
//-->
</script>
</head>
<body>
<form name = "myform" action = "">
Enter name: <input type = "text" name = "customer"/>
<input type = "button" value = "Set Cookie" onclick = "WriteCookie()"/>
</form>
</body>
</html>