Exemple d'apprentissage de JavaScript pour lire et écrire des cookies-js tutoriel-php.cn

Maison

interface Web

js tutoriel

Exemple d'apprentissage de JavaScript pour lire et écrire des cookies

PHPz

May 16, 2016 pm 03:49 PM

cookie javascript 写入读取

Cet article présente principalement les points de connaissances pertinents sur la lecture et l'écriture de cookies JavaScript à travers des exemples. Les amis qui en ont besoin peuvent s'y référer.

Tout d'abord, comprenons brièvement les cookies.

Dans le processus de création de pages Web, nous devons souvent transférer des informations d'une page à une autre. JavaScript Le mécanisme des cookies dans . En termes simples, les cookies constituent un moyen pratique de sauvegarder de petites quantités de données sur l'ordinateur de l'utilisateur et de les obtenir à distance, permettant aux sites Web d'enregistrer des détails tels que les paramètres d'habitudes de l'utilisateur ou l'heure de la dernière visite sur le site Web. Le cookie lui-même est un court élément d'information qui peut être enregistré sur l'ordinateur de l'utilisateur par la page et ensuite lu par d'autres pages. Les cookies expirent généralement après une certaine période de temps.

Bien entendu, les cookies ont également des limites : les navigateurs ont des limites quant au nombre de cookies pouvant être enregistrés, généralement quelques centaines ou plus. Dans des circonstances normales, 20 cookies sont autorisés par nom de domaine, et chaque domaine peut enregistrer jusqu'à 4 Ko de cookies. Outre les problèmes pouvant être causés par les restrictions de taille, de nombreuses raisons peuvent également entraîner l'apparition de cookies sur le disque dur. disparaître, comme l'atteinte de la date d'expiration, ou l'utilisateur a effacé les informations du cookie ou est passé à un autre navigateur. Par conséquent, les cookies ne conviennent pas au stockage de données importantes. Lors de l’écriture du code, vous devez également réfléchir à la manière de gérer les exceptions d’acquisition de cookies.

En JavaScript, utilisez l'attribut cookie de l'objet document pour stocker et récupérer les cookies. Habituellement, les informations contenues dans document.cookie sont une chaîne composée de paires de noms et de valeurs, et chaque paire de données se trouve dans le fichier. form :

name=value;

Copier après la connexion

Ci-dessous, nous utiliserons un exemple simple pour montrer comment lire et écrire des cookies en JavaScript.

Le premier est createCookie.html, dans lequel une page sera créée cookie , le code complet est le suivant :

<html>
<head>
  <title>createCookie</title>
  <script>
    function createCookie(){
      //get name and password
      var name = document.getElementById("name").value;
      var pwd = document.getElementById("pwd").value;
      //create cookie
      document.cookie = name+&#39;|&#39;+pwd;
      //go to showCookie.html page
      window.location.href = "showCookie.html";
    }
  </script>
</head>
<body>
  Userame:  <input id="name" type="text" /><br><br>
  Password:  <input id="pwd" type="password" /><br><br>
  <button onclick="createCookie()">Submit</submit>
</body>
</html>

Copier après la connexion

Une capture d'écran de la page est la suivante :

Cliquez sur le bouton Soumettre et un cookie sera créé. Les informations de nom d'utilisateur et de mot de passe y sont enregistrées et elles seront redirigées vers la page showCookie.html. Parmi eux, le code complet de la page showCookie.html est le suivant :

<html>
<head>
  <title>showCookie</title>
  <script>
    function showCookie(){
      //document.cookie is a string, using split() function to get cookie date in array form 
      var arr = document.cookie.split(&#39;|&#39;);
      //processing data in cookie
      var cookie_info = &#39;Data in cookie:<br>username is:  &#39;+arr[0]+"<br>password is:  "+arr[1]+&#39;<br>&#39;;
      //set content of element of id "res"
      document.getElementById("res").innerHTML = cookie_info;
    }
  </script>
</head>
<body>
  <button onclick="showCookie()">Show Cookie</button>
  <p id="res"></p>
</body>
</html>

Copier après la connexion

La capture d'écran de la page est la suivante :