recherche

Maison >interface Web >js tutoriel >Tutoriel sur l'utilisation des Cookies en JavaScript_Connaissances de base

Tutoriel sur l'utilisation des Cookies en JavaScript_Connaissances de base

WBOY
WBOYoriginal
2016-05-16 15:56:411225parcourir

Que sont les cookies ?

Les navigateurs Web et les serveurs communiquent à l'aide du protocole HTTP, et HTTP est un protocole sans état. Mais pour un site Web commercial, il doit conserver les informations de session entre les différentes pages. Par exemple, après avoir complété plusieurs pages, l'enregistrement d'un utilisateur prend fin. Mais comment conserver les informations de session pour tous les utilisateurs Web.

Dans de nombreux cas, l'utilisation de cookies est le moyen le plus efficace de mémoriser et de suivre des informations telles que les préférences, les achats, les commissions et les demandes pour une meilleure expérience de visite ou les statistiques du site Web.
Comment ça marche ?

Le serveur envoie certaines données au navigateur du visiteur sous la forme d'un cookie. Ce navigateur peut accepter les cookies. Si tel est le cas, il s’agit d’un enregistrement texte uniquement stocké sur le disque dur du visiteur. Désormais, lorsqu'un visiteur atteint une autre page de votre site, le navigateur envoie le même cookie au serveur pour la récupération. Une fois récupéré, le serveur sait/se souvient de ce qui vient d'être stocké.

Les cookies ont des enregistrements de données en texte brut avec 5 champs de longueur variable :

  • Expire : la date à laquelle le cookie expirera. Si ce champ est vide, le cookie expirera lorsque le visiteur quittera le navigateur.
  • Domaine : Le nom de domaine du site Web.
  • Chemin : répertoire de cookies de configuration du chemin ou page Web. Si vous souhaitez effectuer une recherche à partir de n'importe quel répertoire ou page, le cookie est vide.
  • Sécurisé : Si ce champ contient le mot « sécurisé », alors le cookie ne peut récupérer qu'un serveur sécurisé. Si ce champ est vide, aucune limite n'existe.
  • Nom=Valeur : Les paramètres des cookies sont obtenus sous forme de paires clé et valeur.

Les cookies ont été initialement conçus pour être utilisés dans la programmation CGI et les données des cookies sont automatiquement transférées entre les navigateurs Web et les serveurs Web, de sorte que les scripts CGI sur le serveur peuvent lire et écrire les cookies stockés sur la valeur client.

JavaScript peut également fonctionner en utilisant l'attribut cookie de l'objet document. JavaScript peut lire, créer, modifier et supprimer des cookies ou des cookies applicables à la page Web actuelle.
Enregistrer les cookies :

La façon la plus simple de créer un cookie est d'attribuer une valeur de chaîne à l'objet document.cookie, qui ressemble à ceci :
Grammaire

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

Ici, expire l'option d'attribut. Si cet attribut est fourni avec une date ou une heure valide, le cookie expirera à la date ou à l'heure indiquée, et la valeur du cookie sera alors inaccessible.

Remarque : les valeurs des cookies ne peuvent pas inclure de points-virgules, de virgules ou d'espaces. Pour cette raison, il peut être nécessaire d'utiliser la fonction escape() de JavaScript pour encoder la valeur stockée avant le cookie. Si vous faites cela, vous devez également utiliser la fonction unescape() correspondante lors de la lecture de la valeur du cookie.
Lire les cookies :

La lecture des cookies est aussi simple que l'écriture car la valeur de document.cookieobject est le cookie. Ainsi, chaque fois que vous souhaitez accéder au cookie, vous pouvez utiliser cette chaîne.

La chaîne document.cookie sera continuée par un point-virgule, où nom est le nom d'un cookie et valeur est une liste de paires nom=valeur séparées par sa valeur de chaîne.
Définir la date d'expiration des cookies :

Il est possible de prolonger la durée de vie d'un cookie au-delà de la session en cours du navigateur en définissant la date d'expiration et la date d'expiration dans le cookie enregistré. Cela peut être fait en définissant la date et l'heure de l'attribut expires.
Exemple :

L'exemple suivant montre comment configurer un cookie pour qu'il expire après 1 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() + ";"
  alert("Setting Cookies : " + "name=" + cookievalue );
}
//-->
</script>
</head>
<body>
<form name="formname" action="">
Enter name: <input type="text" name="customer"/>
<input type="button" value="Set Cookie" onclick="WriteCookie()"/>
</form>
</body>
</html>

Supprimer les cookies :

Parfois, si vous souhaitez supprimer un cookie, ce qui sera renvoyé lorsque vous essaierez de lire le cookie plus tard. Pour ce faire, il vous suffit de fixer la date d’expiration à une date antérieure.
Exemple :

L'exemple suivant montre comment supprimer un cookie en fixant la date d'expiration il y a 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() + ";"
  alert("Setting Cookies : " + "name=" + cookievalue );
}
//-->
</script>
</head>
<body>
<form name="formname" action="">
Enter name: <input type="text" name="customer"/>
<input type="button" value="Set Cookie" onclick="WriteCookie()"/>
</form>
</body>
</html>

Remarque : sans définir la date, vous pouvez utiliser la fonction setTime() pour voir la nouvelle valeur.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Méthode JS pour simuler le mouvement de la souris lors du chargement des compétences window_javascriptArticle suivant：Méthode JS pour simuler le mouvement de la souris lors du chargement des compétences window_javascript

Articles Liés

Voir plus