Explication détaillée du fonctionnement des cookies JavaScript_Connaissances de base

Que sont les cookies

"Un cookie est une variable stockée sur l'ordinateur du visiteur. Ce cookie est envoyé chaque fois que le même ordinateur demande une page via un navigateur. Vous pouvez utiliser JavaScript pour créer et récupérer la valeur du cookie." - w3school

Un cookie est un fichier créé par un site Web visité pour stocker des informations de navigation, telles que des informations de profil.

Du point de vue JavaScript, les cookies ne sont que quelques informations sous forme de chaîne. Ces informations sont stockées sur l'ordinateur du client et sont utilisées pour transférer des informations entre l'ordinateur client et le serveur.

Ces informations peuvent être lues ou définies via document.cookie en JavaScript. Étant donné que les cookies sont principalement utilisés pour la communication entre le client et le serveur, outre JavaScript, les langages côté serveur (tels que PHP) peuvent également accéder aux cookies.

Bases des cookies

Les cookies ont une taille limite. Les données stockées dans chaque cookie ne peuvent pas dépasser 4 Ko. Si la longueur de la chaîne du cookie dépasse 4 Ko, cet attribut renverra une chaîne vide.

Étant donné que les cookies sont finalement stockés dans l'ordinateur client sous forme de fichiers, il est très pratique de visualiser et de modifier les cookies. C'est pourquoi on dit souvent que les cookies ne peuvent pas stocker d'informations importantes.

Le format de chaque cookie est le suivant : = ; le nom et la valeur doivent être des identifiants légaux.

Les cookies ont une date d'expiration. Par défaut, le cycle de vie d'un cookie se termine à la fermeture du navigateur. Si vous souhaitez que le cookie soit utilisable après la fermeture du navigateur, vous devez définir une période de validité pour le cookie, qui correspond à la date d'expiration du cookie.

alert(typeof document.cookie) Le résultat est une chaîne. J'ai pensé un jour que c'était un tableau et j'ai fait une blague... 囧

Les cookies ont la notion de domaine et de chemin. Le domaine est le concept de domaine Étant donné que le navigateur est un environnement soucieux de la sécurité, différents domaines ne peuvent pas accéder aux cookies les uns des autres (bien sûr, l'accès entre domaines aux cookies peut être obtenu via des paramètres spéciaux). Le chemin est le concept de routage. Un cookie créé par une page Web n'est accessible que par toutes les pages Web du même répertoire ou sous-répertoire que cette page Web, mais n'est pas accessible par les pages Web d'autres répertoires (cette phrase est un peu déroutante, je vais regarder). nous y reviendrons plus tard) C’est plus facile à comprendre avec un exemple).

En fait, la manière de créer des cookies est quelque peu similaire à la manière de définir des variables. Les deux nécessitent l'utilisation de noms de cookies et de valeurs de cookies. Le même site Web peut créer plusieurs cookies, et plusieurs cookies peuvent être stockés dans le même fichier de cookies.

FAQ sur les cookies

Il existe deux types de cookies :

Cookies définis par le site Web actuel que vous parcourez

Cookies tiers provenant d'autres sources de domaine telles que des publicités intégrées ou des images sur des pages Web (les sites Web peuvent suivre vos informations d'utilisation en utilisant ces cookies)

Les connaissances de base viennent d'évoquer la question du cycle de vie des cookies. En fait, les cookies peuvent être grossièrement divisés en deux états :

Cookies temporaires. Le site Web stockera certaines de vos informations personnelles lors de son utilisation actuelle, et ces informations seront également supprimées de votre ordinateur à la fermeture du navigateur

Définissez les cookies avec un délai d'expiration. Même si le navigateur est fermé, ces informations seront toujours présentes sur l'ordinateur. Tels que le nom de connexion et le mot de passe, vous n'avez donc pas besoin de vous connecter à chaque fois que vous accédez à un site spécifique. Ce cookie peut rester sur votre ordinateur pendant des jours, des mois voire des années

Il existe deux manières d'effacer les cookies :

Effacer les cookies via les outils du navigateur (il existe des outils tiers, et le navigateur lui-même a également cette fonction)

Effacer les cookies en définissant leur date d'expiration

Remarque : La suppression des cookies peut parfois entraîner un dysfonctionnement de certaines pages Web

Les navigateurs peuvent être configurés pour accepter et refuser l'accès aux cookies.

Pour des raisons de fonctionnalité et de performances, il est recommandé de réduire le nombre de cookies utilisés et d'essayer d'utiliser autant que possible des petits cookies.

Les détails de l'encodage des cookies seront introduits séparément dans le chapitre sur les cookies avancés.

S'il s'agit d'une page sur le disque local, la console Chrome ne peut pas utiliser JavaScript pour lire et écrire des cookies. La solution... changer de navigateur^_^.

Utilisation de base des cookies

1. Opération d'accès simple

Lorsque vous utilisez JavaScript pour accéder aux cookies, vous devez utiliser l'attribut cookie de l'objet Document ; une ligne de code décrit comment créer et modifier un cookie :

Copier le code Le code est le suivant :

document.cookie = 'nom d'utilisateur=Darren';

Dans le code ci-dessus, « username » représente le nom du cookie et « Darren » représente la valeur correspondant à ce nom. Si le nom du cookie n'existe pas, alors un nouveau cookie est créé ; s'il existe, la valeur correspondant au nom du cookie est modifiée. Si vous souhaitez créer des cookies plusieurs fois, utilisez simplement cette méthode à plusieurs reprises.

2. Opération de lecture des cookies

Il est en fait très simple de lire les cookies avec précision, il suffit d'opérer sur des chaînes. Copiez ce code de w3school pour analyse :

Copier le code Le code est le suivant :

fonction getCookie(c_name){
　　if (document.cookie.length>0){ 　　//Vérifiez d'abord si le cookie est vide, s'il est vide, retournez ""
　　　c_start=document.cookie.indexOf(c_name "=")　//Vérifiez si ce cookie existe via l'indexOf() de l'objet String. S'il n'existe pas, ce sera -1　
. 　　　if (c_start!=-1){
　　　　c_start=c_start c_name.length 1　//Le dernier 1 représente en fait le nombre "=", de sorte que la position de départ de la valeur du cookie soit obtenue
c_end=document.cookie.indexOf(";",c_start) //En fait, j'étais un peu étourdi lorsque j'ai vu pour la première fois le deuxième paramètre de indexOf(). Plus tard, je me suis souvenu que cela signifiait la position de l'index de départ spécifiée... Ceci. la phrase est pour obtenir la position finale de la valeur. Parce que nous devons déterminer s'il s'agit du dernier élément, nous pouvons le juger selon l'existence du signe ";"
　　　　if (c_end==-1) c_end=document.cookie.length　
Return unescape(document.cookie.substring(c_start,c_end)) //La valeur est obtenue via substring(). Si vous voulez comprendre unescape(), vous devez d'abord savoir ce que fait escape(). C'est une base très importante. Si vous voulez en savoir plus, vous pouvez effectuer une recherche. Les détails de l'encodage des cookies seront également expliqués à la fin. l'article
　　　}
　　}
retourner ""
}　

Bien sûr, il existe de nombreuses façons de lire les cookies, comme les tableaux, les expressions régulières, etc., je n'entrerai donc pas dans les détails ici.

3. Définir la durée de validité des cookies

Le cycle de vie des cookies qui apparaît souvent dans les articles est la durée de validité et la période d'expiration, c'est-à-dire la durée d'existence du cookie. Par défaut, les cookies sont automatiquement effacés à la fermeture du navigateur, mais nous pouvons définir la période de validité du cookie jusqu'à son expiration. La syntaxe est la suivante :

Copier le code Le code est le suivant :

document.cookie = "nom=valeur;expires=date";

La valeur de date dans le code ci-dessus est une chaîne de date au format GMT (Greenwich Mean Time) et est générée comme suit :

Copier le code Le code est le suivant :

var _date = nouvelle Date();
_date.setDate(_date.getDate() 30);
_date.toGMTString();

Les trois lignes de code ci-dessus se décomposent en plusieurs étapes :

Générez une instance Date via new pour obtenir l'heure actuelle

La méthode getDate() obtient un certain jour dans le mois local en cours, puis en ajoute 30. J'espère que ce cookie pourra être enregistré localement pendant 30 jours

Réglez ensuite l'heure via la méthode setDate()

Enfin, utilisez la méthode toGMTString() pour convertir l'objet Date en chaîne et renvoyer le résultat

Utilisez la fonction complète suivante pour illustrer ce à quoi nous devons prêter attention lors du processus de création de cookies - copiée de w3school. Créez une fonction qui stocke des informations dans un cookie :

Copier le code Le code est le suivant :

function setCookie(c_name, valeur, expiredays){
var exdate=nouvelle Date();
exdate.setDate(exdate.getDate() expiredays);
Document.cookie=c_name "=" escape(value) ((expiredays==null) ? "" : ";expires=" exdate.toGMTString());
>
//Utilisation : setCookie('username','Darren',30)

Maintenant, notre fonction définit la durée de validité du cookie en fonction du nombre de jours. Si vous souhaitez la définir dans d'autres unités (comme les heures), alors modifiez la troisième ligne de code :

Copier le code Le code est le suivant :

exdate.setHours(exdate.getHours() expiredays);

Après avoir défini cette méthode, la durée de validité des cookies sera basée sur des heures.

Il existe deux méthodes pour effacer les cookies mentionnées dans la FAQ. Ce dont nous allons parler maintenant, c'est d'invalider les cookies en définissant la période de validité sur une heure expirée. Maintenant qu'il existe un moyen de définir la période de validité, les amis intéressés sont invités à le faire eux-mêmes ^_^. Continuons avec le sujet plus approfondi des cookies.

Chapitre avancé sur les cookies

1.Concept de chemin de cookie

Dans les connaissances de base, il est mentionné que les cookies ont les notions de domaine et de chemin. Introduisons maintenant le rôle de chemin dans les cookies.

Les cookies sont généralement créés lorsqu'un utilisateur visite une page, mais ce cookie n'est pas accessible uniquement sur la page où le cookie est créé.

Par défaut, seules les pages Web du même répertoire ou sous-répertoire que la page qui a créé le cookie sont accessibles. Cela est dû à des considérations de sécurité, de sorte que toutes les pages ne peuvent pas accéder librement aux cookies créés par d'autres pages. Par exemple :

Créez un cookie sur la page "http://www.jb51.net/Darren_code/", puis la page sous le chemin "/Darren_code/" ressemblera à : "http://www.jb51.net/ Darren_code /archive/2011/11/07/Cookie.html" Cette page peut obtenir des informations sur les cookies par défaut.

Par défaut, "http://www.jb51.net" ou "http://www.jb51.net/xxxx/" ne peut pas accéder à ce cookie (le simple fait de le regarder ne sert à rien, la pratique dira la vérité) ^_^).

Alors, comment rendre ce cookie accessible à d'autres répertoires ou répertoires parents peut être réalisé en définissant le chemin du cookie. Les exemples sont les suivants :

Copier le code Le code est le suivant :

document.cookie = "nom=valeur;chemin=chemin"
document.cookie = "name=value;expires=date;path=path"

Le chemin en rouge est le chemin du cookie. L'exemple le plus courant consiste à placer le cookie dans le répertoire, afin que quelle que soit la sous-page qui crée le cookie, toutes les pages puissent y accéder :

Copier le code Le code est le suivant :

document.cookie = "name=Darren;path=/";

2. Concept de domaine de cookies

Path peut résoudre le problème de l'accès aux cookies dans le même domaine. Passons maintenant au problème des cookies réalisant l'accès entre les mêmes domaines. La syntaxe est la suivante :

Copier le code Le code est le suivant :

document.cookie = "name=value;path=path;domain=domain";

Le domaine rouge est la valeur de l'ensemble de domaines de cookies.

Par exemple, "www.qq.com" et "sports.qq.com" partagent un nom de domaine associé "qq.com". Si nous voulons que le cookie sous "sports.qq.com" soit "www. qq. com" pour y accéder, nous devons utiliser l'attribut domain du cookie et définir l'attribut path sur "/". Exemple :

Copier le code Le code est le suivant :

document.cookie = "username=Darren;path=/;domain=qq.com";

Remarque : Il doit s'agir d'un accès entre le même domaine. La valeur du domaine ne peut pas être définie sur un nom de domaine autre que le domaine principal.

3. Sécurité des cookies

Habituellement, les informations des cookies utilisent des connexions HTTP pour transférer des données. Cette méthode de transfert est facile à visualiser, de sorte que les informations stockées dans les cookies sont faciles à voler. Si le contenu transmis dans le cookie est important, une transmission de données cryptée est requise.

Le nom de cet attribut de cookie est donc "secure", et la valeur par défaut est vide. Si l'attribut d'un cookie est sécurisé, les données sont transférées entre celui-ci et le serveur via HTTPS ou d'autres protocoles sécurisés. La syntaxe est la suivante :

Copier le code Le code est le suivant :

document.cookie = "nom d'utilisateur=Darren;secure"

Définir le cookie comme sécurisé garantit uniquement que le processus de transmission des données entre le cookie et le serveur est crypté et que le fichier cookie stocké localement n'est pas crypté. Si vous souhaitez que les cookies locaux soient cryptés, vous devez crypter les données vous-même.

Remarque : même si l'attribut sécurisé est défini, cela ne signifie pas que les autres ne peuvent pas voir les informations des cookies enregistrées localement sur votre machine, donc en dernière analyse, ne mettez simplement pas d'informations importantes dans les cookies, 囧...

4. Détails de l'encodage des cookies

A l'origine je souhaitais introduire la connaissance de l'encodage des cookies dans la rubrique FAQ, car si vous ne comprenez pas cela, le problème d'encodage est bel et bien un écueil, je vais donc vous l'expliquer en détail.

Lors de la saisie des informations sur les cookies, les symboles spéciaux tels que les espaces, les points-virgules et les virgules ne peuvent pas être inclus. En général, les informations sur les cookies sont stockées de manière non codée. Par conséquent, avant de définir les informations du cookie, vous devez d'abord utiliser la fonction escape() pour encoder les informations sur la valeur du cookie, puis utiliser la fonction unescape() pour reconvertir la valeur lorsque la valeur du cookie est obtenue. Par exemple, lors du paramétrage des cookies :

Copier le code Le code est le suivant :

document.cookie = nom "=" échappement (valeur);

Regardons la phrase à l'intérieur de getCookie() mentionnée dans l'utilisation de base :

Copier le code Le code est le suivant :

return unescape(document.cookie.substring(c_start,c_end));

De cette façon, vous n'avez pas à craindre que les informations des cookies soient incorrectes en raison de symboles spéciaux apparaissant dans la valeur du cookie.

Code personnel

Copier le code Le code est le suivant :

/*Définir le cookie*/

fonction setCookie(c_name, valeur, jours d'expiration, chemin, domaine, sécurisé) {
var exdate = new Date(); //Obtenir l'heure actuelle　
exdate.setDate(exdate.getDate() expiredays); //Délai d'expiration　
document.cookie = c_name "=" //nom du cookie
escape(value) //Encoder la valeur du cookie
((expiredays == null) ? "" : ";expires=" exdate.toGMTString()) //Définir l'heure d'expiration
((path == null) ? '/' : ';path=' path) //Définir le chemin d'accès
((domain == null) ? '' : ';domain=' domain) //Définir le domaine d'accès
((secure == null) ? '' : ';secure=' secure); //Définir s'il faut chiffrer
};
setCookie('test', 'name=sheng;sex=men;lancer=dullbear', 30);
setCookie('bb', 'name=sheng;sex=men', 30);

/*Obtenir un cookie*/

fonction getCookie(c_name, index) {
var cookies = document.cookie; //Obtenir la valeur du cookie
var cookieLen = cookies.length; //Obtenir la longueur du cookie
if (cookieLen > 0) { //Lorsque le cookie n'est pas vide

var c_start = cookies.indexOf(c_name '='); //Trouver la valeur du cookie et le numéro de série dans le cookie
if (c_start > -1) { //Lorsque la valeur du cookie existe
c_start = c_name.length 1; //Obtenir le numéro de séquence de départ de la valeur du cookie

var c_end = cookies.indexOf(';', c_start); //Obtenir le numéro de séquence de fin de la valeur du cookie
If (c_end == -1) { //Quand le cookie est le dernier
c_end = cookieLen; //Définissez le numéro de séquence de fin de la valeur du cookie sur la longueur du cookie
};

var cookieStr = unescape(cookies.substring(c_start, c_end)); //Obtenir la valeur du cookie décodée

var cookieObj = cookieStr.split(';'); // Diviser la valeur du cookie

index = ((index == null) ? 0 : index); // Détermine si l'index reçoit une valeur

var goalObj = cookieObj[index]; //tableau d'index
var goalStr = goalObj.split('=');
var getcook = goalStr[1]; //Obtenir la valeur du cookie requise
Retournez getcook ;
};
} autre {
Console.log('La page n'a pas de cookies');
>
};

alert(getCookie('test', 0)); //Imprimer la valeur du cookie de requête