Organiser l'application des objets d'opération de cookies en JavaScript

Cet article vous apporte des connaissances pertinentes sur javascript, qui présente principalement des problèmes liés à l'application des objets d'opération de cookies. Les cookies fournissent une méthode utile pour les applications Web pour enregistrer les informations relatives aux utilisateurs. J'espère que cela aidera tout le monde. .

【Recommandations associées : Tutoriel vidéo Javascript, front-end Web】

Comment utiliser les cookies en Javascript

Les cookies fournissent une méthode utile pour les applications Web pour enregistrer des informations relatives à l'utilisateur. Par exemple, lorsqu'un utilisateur visite notre site, les cookies peuvent être utilisés pour enregistrer les préférences de l'utilisateur ou d'autres informations afin que la prochaine fois que l'utilisateur visite notre site, l'application puisse récupérer les informations précédemment enregistrées.

Qu'est-ce qu'un cookie ?

Un cookie est un petit morceau d'information textuelle qui est transmis entre le serveur Web et le navigateur avec les requêtes et les pages des utilisateurs. Les informations contenues dans le cookie peuvent être lues par l'application web à chaque fois que l'utilisateur visite le site.

Les cookies semblent résoudre le problème de la sauvegarde des informations des utilisateurs. Par exemple

• Lorsqu'un utilisateur visite une page Web, le nom de l'utilisateur peut être stocké dans un cookie.

• La prochaine fois que l'utilisateur visitera la page, le cookie se souviendra du nom d'utilisateur.

Les cookies peuvent mémoriser les informations utilisateur sur toutes les pages Web. Il contient des informations sous forme de chaîne et est enregistré sous forme de paires clé-valeur, c'est-à-dire au format clé=valeur. Chaque cookie est généralement séparé par ";".

username = Daisy Green

Inconvénients des cookies

Les cookies peuvent être désactivés. Lorsqu'un utilisateur accorde une grande attention à la protection de sa vie privée, il est susceptible de désactiver la fonction cookie du navigateur.

Les cookies sont liés au navigateur ; Cela signifie que même si vous visitez la même page, les cookies enregistrés par différents navigateurs ne sont pas accessibles les uns aux autres

les cookies peuvent être supprimés ; Chaque cookie étant un fichier sur le disque dur, il est susceptible d'être supprimé par l'utilisateur.

La sécurité des cookies n'est pas suffisamment élevée. Tous les cookies sont enregistrés dans des fichiers sous forme de texte brut, donc si vous souhaitez enregistrer le nom d'utilisateur, le mot de passe et d'autres informations, il est préférable de les crypter au préalable.

Comment fonctionne Cooke

Le serveur envoie certaines données au navigateur du visiteur sous la forme d'un cookie. Si votre navigateur permet d'accepter les cookies. Il est stocké sur le disque dur du visiteur sous forme d'enregistrement en texte brut.

Lorsqu'un visiteur passe à une autre page, le navigateur envoie le même cookie au serveur pour la récupération. Une fois récupéré, votre serveur sait ou se souvient de ce qui a été précédemment stocké.

Composition du Cookie

Cookie Dans les informations d'en-tête HTTP, le format d'en-tête du HTTP Set-Cookie est le suivant :

Set-Cookie: name=value; [expires=date]; [path=path];
[domain=domainname]; [secure];

Un exemple spécifique dans le code HTTP :

<meta http-equiv="set-cookie" content=" cookieName = cookieValue;
expires=01-Dec-2006 01:14:26 GMT; path=/" />

Comme le montre le format ci-dessus , Le cookie se compose des parties suivantes.

Paires Nom/Valeur

Nom/Valeur sont séparés par des points-virgules. Un cookie comporte un maximum de 20 paires. Chaque page Web contient au maximum un cookie. La longueur de la valeur ne dépasse pas 4K. Pour les valeurs Value, il est préférable de les encoder avec encodeURIComponent.

Domain

Le nom de domaine fait également partie du cookie. Par défaut, le nom de domaine de la page Web visitée par l'utilisateur sera stocké dans le cookie. Si la valeur du nom de domaine de ce cookie est définie, cela signifie que tous les serveurs du nom de domaine, et pas seulement le serveur que vous visitez, peuvent accéder à ce cookie. Généralement, vous ne devriez pas le faire. Le format de définition du nom de domaine est le suivant : domain=http://xyz.com

path

Définissez quelles pages Web de l'annuaire peuvent accéder aux cookies pour un serveur spécifique. Le format de définition du chemin est. : path = /movies

Expires

Définissez la durée de survie du cookie Par défaut, le cookie est automatiquement supprimé lorsque l'utilisateur ferme le navigateur. Si le délai d'expiration du cookie n'est pas défini, le cookie disparaît lorsque l'utilisateur ferme le navigateur. navigateur. Si vous définissez cet élément, vous pouvez prolonger la durée de vie des cookies. Définissez l'heure en js en utilisant le formulaire GMT de l'objet Date. Le format est le suivant : expires = date.toGMTString()

Secure

Prenez la valeur vraie ou fausse. Si c'est vrai, le cookie doit être envoyé via https.

js Cookie

En JS, vous pouvez utiliser l'attribut cookie de l'objet Document pour manipuler les cookies. JS peut lire, créer, modifier et supprimer les cookies de la page Web actuelle. Jetons un coup d'œil aux opérations spécifiques.

Créer un cookie

JS peut créer des cookies en utilisant l'attribut document.cookie. Les cookies peuvent être créés par :

document.cookie = "username=Daisy Green";

Vous pouvez également ajouter une date valide (heure UTC). Par défaut, les cookies sont supprimés à la fermeture du navigateur :

document.cookie = "username=Daisy Green; expires=Mon, 26 Aug 2019 12:00:00 UTC";

Avec le paramètre path, vous pouvez indiquer au navigateur à quel chemin appartient le cookie. Par défaut, le cookie appartient à la page actuelle.

document.cookie = "username=Daisy Green; expires=Mon, 26 Aug 2019 12:00:00 UTC"; path=/";

Read Cookie

Grâce à JS, vous pouvez lire des cookies comme celui-ci :

var x = document.cookie;

document.cookie 会在一条字符串中返回所有 cookie，比如：cookie1=value; cookie2

事例：

<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(&#39;;&#39;);
                
               // Now take key value pair out of this array
               for(var i=0; i<cookiearray.length; i++) {
                  name = cookiearray[i].split(&#39;=&#39;)[0];
                  value = cookiearray[i].split(&#39;=&#39;)[1];
                  document.write ("Key is : " + name + " and Value is : " + value);
               }
            }
         //-->
      </script>      
   </head>
    
   <body>     
      <form name = "myform" action = "">
         <p> click the Button to View Result:</p>
         <input type = "button" value = "Get Cookie" onclick = "ReadCookie()"/>
      </form>      
   </body>
</html>

改变 cookie

通过使用 JS，咱们可以像创建 cookie 一样改变它：

document.cookie = "username=Steve Jobs; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";

这样旧 cookie 会被覆盖。

事例：

<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>

删除 cookie

删除 cookie 非常简单，不必指定 cookie 值：直接把 expires 参数设置为过去的日期即可：

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

应该定义 cookie 路径以确保删除正确的 cookie。如果不指定路径，有些浏览器不会让咱们删除 cookie。

事例：

<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>

【相关推荐：javascript视频教程、web前端】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!