Introduction à l'utilisation et aux inconvénients des cookies en JS

Le cookie est un tel mécanisme. Cela peut compenser les lacunes du protocole HTTP sans état. Avant l’apparition de Session, pratiquement tous les sites Web utilisaient des cookies pour suivre les sessions. Cet article vous présentera l'utilisation et les défauts des cookies en JS. Les amis qui en ont besoin peuvent s'y référer

Qu'est-ce que le cookie

Cookie signifie « Sweet cookie » et est un mécanisme proposé par l'organisation W3C et développé pour la première fois par la communauté Netscape. Actuellement, les cookies sont devenus un standard et tous les navigateurs grand public tels que IE, Netscape, Firefox, Opera, etc. prennent en charge les cookies.

Étant donné que HTTP est un protocole sans état, le serveur n'a aucun moyen de connaître l'identité du client à partir de la seule connexion réseau. Ce qu'il faut faire? Il suffit de délivrer un laissez-passer aux clients, un pour chaque personne. Peu importe qui visite, ils doivent apporter leur propre laissez-passer. De cette façon, le serveur peut confirmer l'identité du client à partir du pass. C'est ainsi que fonctionnent les cookies.

Le cookie est en fait un court morceau d'information textuelle. Le client demande au serveur. Si le serveur doit enregistrer le statut de l'utilisateur, il utilise la réponse pour émettre un cookie au navigateur client. Le navigateur client enregistrera le cookie. Lorsque le navigateur demande à nouveau le site Web, il soumet l'URL demandée avec le cookie au serveur. Le serveur vérifie ce cookie pour identifier le statut de l'utilisateur. Le serveur peut également modifier le contenu du cookie si nécessaire.

Mécanisme de cookies

Dans le programme, le suivi de session est une chose très importante. Théoriquement, toutes les opérations de requête d'un utilisateur devraient appartenir à la même session, tandis que toutes les opérations de requête d'un autre utilisateur devraient appartenir à une autre session, et les deux ne peuvent pas être confondues. Par exemple, tout produit acheté par l’utilisateur A au supermarché doit être placé dans le panier de l’utilisateur A. Peu importe le moment où l’utilisateur A l’achète, il appartient à la même session et ne peut pas être placé dans le panier de l’utilisateur B ou de l’utilisateur C, ce qui est le cas. n'appartiennent pas à la même session.

Les applications Web utilisent le protocole HTTP pour transmettre des données. Le protocole HTTP est un protocole sans état. Une fois l'échange de données terminé, la connexion entre le client et le serveur sera fermée et une nouvelle connexion devra être établie pour échanger à nouveau des données. Cela signifie que le serveur ne peut pas suivre la session depuis la connexion. Autrement dit, l'utilisateur A achète un article et le place dans le panier. Lorsque l'article est à nouveau acheté, le serveur ne peut pas déterminer si l'achat appartient à la session de l'utilisateur A ou à la session de l'utilisateur B. Pour suivre cette session, un mécanisme doit être mis en place.

Le cookie est un tel mécanisme. Cela peut compenser les lacunes du protocole HTTP sans état. Avant l’apparition de Session, pratiquement tous les sites Web utilisaient des cookies pour suivre les sessions.

JS définit des cookies :

Supposons que dans la page A, vous souhaitiez enregistrer la valeur de la variable nom d'utilisateur ("jack") dans le cookie, la valeur clé est le nom, le code JS correspondant est :

 document.cookie="name="+username;

Les points-virgules (;), les virgules (,), les signes égal (=) et les espaces ne peuvent pas être utilisés dans les noms ou les valeurs des cookies. Il est facile de faire cela au nom du cookie, mais la valeur à enregistrer n'est pas définie. Comment stocker ces valeurs ? La méthode consiste à utiliser la fonction escape() pour encoder, qui peut exprimer certains symboles spéciaux en hexadécimal. Par exemple, les espaces seront codés comme "20%", qui peuvent être stockés dans la valeur du cookie, et utiliser Cette solution peut également éviter l'apparition de caractères chinois tronqués.

document.cookie="str="+escape("I love ajax"); 
// document.cookie="str=I%20love%20ajax";

Lorsque vous utilisez l'encodage escape(), vous devez utiliser unescape() pour décoder après avoir retiré la valeur afin d'obtenir la valeur originale du cookie

JS. lecture du cookie :

En supposant que le contenu stocké dans le cookie est : name=jack;password=123

, alors le code JS pour obtenir la valeur du nom d'utilisateur variable dans la page B est comme suit :

var username=document.cookie.split(";")[0].split("=")[1];
//JS操作cookies方法!
//写cookies
function setCookie(name,value)
{
var Days = 30;
var exp = new Date();
exp.setTime(exp.getTime() + Days*24*60*60*1000);
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}

Lire les cookies

function getCookie(name)
{
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg))
return unescape(arr[2]);
else
return null;
}
删除cookies
function delCookie(name)
{
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval=getCookie(name);
if(cval!=null)
document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}
//使用示例
setCookie("name","hayden");
alert(getCookie("name"));
//如果需要设定自定义过期时间
//那么把上面的setCookie　函数换成下面两个函数就ok;
//程序代码
function setCookie(name,value,time)
{
var strsec = getsec(time);
var exp = new Date();
exp.setTime(exp.getTime() + strsec*1);
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
function getsec(str)
{
alert(str);
var str1=str.substring(1,str.length)*1;
var str2=str.substring(0,1);
if (str2=="s")
{
return str1*1000;
}
else if (str2=="h")
{
return str1*60*60*1000;
}
else if (str2=="d")
{
return str1*24*60*60*1000;
}
}
//这是有设定过期时间的使用示例：
//s20是代表20秒
//h是指小时，如12小时则是：h12
//d是天数，30天则：d30
setCookie("name","hayden","s20");

Inconvénients des cookies

cookie Bien que la persistance des données client soit pratique et partage la charge du stockage sur le serveur, elle présente encore de nombreuses limites.

Premier : Un maximum de 20 cookies sont générés sous chaque nom de domaine spécifique

1. Un maximum de 20 cookies pour IE6 ou versions inférieures

2.IE7 et versions ultérieures. Il peut y avoir 50 cookies au final.

3. Firefox a un maximum de 50 cookies

4. Chrome et Safari n'ont pas de limites strictes

IE et Opera effaceront les cookies les moins récemment utilisés, et Firefox le fera. nettoyer les cookies au hasard.

La taille maximale d'un cookie est d'environ 4096 octets. Pour des raisons de compatibilité, elle ne peut généralement pas dépasser 4095 octets.

IE fournit un stockage qui peut conserver les données utilisateur, appelé uerData, qui est pris en charge depuis IE5.0. Chaque donnée peut atteindre 128 Ko et chaque nom de domaine peut atteindre 1 Mo. Ces données persistantes sont placées dans le cache Si le cache n'est pas vidé, il existera toujours.

Avantages : Extensibilité et disponibilité extrêmement élevées

1 Grâce à une bonne programmation, contrôlez la taille de l'objet de session stocké dans le cookie.

2. Réduisez la possibilité de piratage des cookies grâce au cryptage et à la technologie de transmission sécurisée (SSL).

3. Seules les données insensibles sont stockées dans le cookie, et il n'y aura aucune perte significative même en cas de vol.

4. Contrôlez la durée de vie des cookies afin qu'ils ne soient pas valables éternellement. Un voleur a peut-être obtenu un cookie expiré.

Inconvénients :

1. Limitation du nombre et de la longueur du `Cookie`. Chaque domaine ne peut avoir qu'un maximum de 20 cookies, et la longueur de chaque cookie ne peut pas dépasser 4 Ko, sinon il sera tronqué.

2. Problèmes de sécurité. Si le cookie est intercepté par quelqu'un, cette personne peut obtenir toutes les informations de session. Même le cryptage n'aidera pas, car l'intercepteur n'a pas besoin de connaître la signification du cookie, il peut atteindre son objectif en transmettant simplement le cookie tel quel.

3. Certains états ne peuvent pas être enregistrés sur le client. Par exemple, pour éviter les soumissions de formulaires en double, nous devons enregistrer un compteur côté serveur. Si nous sauvegardons ce compteur côté client, cela n’aura aucun effet.

【Recommandations associées】

1. Recommandation spéciale : "php Programmer Toolbox" version V0.1 Télécharger

2. Tutoriel vidéo en ligne js gratuit

3. php.cn Dugu Jiujian (3) - Tutoriel vidéo JavaScript

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!