ES6 - Cookies

Les navigateurs Web et les serveurs utilisent le protocole HTTP pour communiquer. HTTP est un protocole sans état, c'est-à-dire qu'il ne conserve pas les données du client sur plusieurs requêtes faites par le client. Ce cycle complet de requête-réponse entre le client et le serveur est défini comme unsession. Les cookies sont le mécanisme par défaut utilisé par les navigateurs pour stocker les données relatives à la session d'un utilisateur.

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 des enregistrements 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 définit le cookie. Ce champ peut être vide si vous souhaitez récupérer le cookie 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 des valeurs de cookies qui sont stockées côté client.

JavaScript peut également manipuler les cookies à l'aide de la propriété cookie de l'objet Document. 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 consiste à attribuer une valeur de chaîne au document.cookie objet, qui ressemble à ceci.

"document.cookie = "key1 = value1; key2 = value2; expires = date";

Ici, l'attribut «expire» est facultatif. Si vous fournissez à cet attribut une date ou une heure valide, le cookie expirera à la date ou à l'heure indiqué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

<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" onclick = "WriteCookie();"/> 
      </form> 
   </body> 
</html>

La sortie suivante s'affiche lors de l'exécution réussie du code ci-dessus.

Maintenant, votre machine a un cookie appelé nom. 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 tout aussi simple que l'écriture d'un cookie, car la valeur du document.cookiel'objet est le cookie. Vous pouvez donc utiliser cette chaîne chaque fois que vous souhaitez accéder au cookie. ledocument.cookie string conservera une liste de paires nom = valeur séparées par des points-virgules, où le nom est le nom d'un cookie et la valeur est sa valeur de chaîne.

Vous pouvez utiliser des chaînes ' split() pour diviser une chaîne en clé et en valeurs, comme indiqué dans l'exemple suivant.

Exemple

<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 la classe Array qui renvoie la longueur d'un tableau.

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.

La sortie suivante s'affiche lors de l'exécution réussie du code ci-dessus.

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 définissant l'attribut «expire» sur une date et une heure. L'exemple suivant montre comment prolonger la date d'expiration d'un cookie d'un mois.

Exemple

<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 = "formname" action = ""> 
         Enter Cookie Name: <input type = "text" name = "customer"/> 
         <input type = "button" value = "Set Cookie" onclick = "WriteCookie()"/> 
      </form> 
   </body> 
</html>

La sortie suivante s'affiche lors de l'exécution réussie du code ci-dessus.

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é. L'exemple suivant illustre comment supprimer un cookie en définissant sa date d'expiration sur un mois après la date actuelle.

Exemple

<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 = "formname" action = ""> 
         Enter Cookie Name: <input type = "text" name = "customer"/> 
         <input type = "button" value = "Set Cookie" onclick = "WriteCookie()"/> 
      </form> 
   </body> 
</html>

La sortie suivante s'affiche lors de l'exécution réussie du code ci-dessus.