Avec le développement d'Internet, nous utilisons de plus en plus de navigateurs pour la navigation sur le Web, les achats, la connexion et d'autres opérations. Dans ces processus, nous entendons souvent un mot : cookie. Alors, que sont exactement les cookies ? Quelle est sa fonction ? Aujourd'hui, nous allons révéler le mystère du stockage des cookies, analyser en détail l'interaction entre le navigateur et le serveur et donner des exemples de code spécifiques.
1. Que sont les cookies ?
En termes simples, un cookie est un petit élément de données envoyé par le serveur au navigateur et enregistré localement. Chaque fois que le navigateur fera une requête au même serveur, il apportera les données des cookies précédemment enregistrées. Dans ce cas, le serveur peut lire les données des cookies dans le navigateur et effectuer les opérations correspondantes en fonction des informations qu'il contient.
2. Le rôle des cookies
Grâce aux cookies, le serveur peut identifier l'utilisateur et maintenir l'état de session de l'utilisateur lorsqu'il visite à nouveau le site Web. Par exemple, lorsque nous nous connectons, le serveur envoie un cookie contenant nos informations de connexion au navigateur, de sorte que lorsque nous visitons à nouveau le site Web, le serveur puisse nous reconnaître comme la dernière fois et se connecter automatiquement.
Grâce aux cookies, le serveur peut obtenir certaines habitudes et préférences personnelles de l'utilisateur ainsi que d'autres informations, fournissant ainsi aux utilisateurs des services et des suggestions plus personnalisés. Par exemple, lorsque nous parcourons un site Web commercial, le serveur recommandera des produits associés en fonction de nos enregistrements d'achats précédents et de notre historique de navigation.
Grâce aux cookies, le serveur peut suivre les habitudes de navigation de l'utilisateur pour effectuer des analyses et des statistiques pertinentes. Par exemple, une société de publicité peut utiliser des cookies pour suivre des informations telles que l'heure et la fréquence des visites des utilisateurs sur différents sites Web, afin de comprendre les intérêts et les désirs d'achat des utilisateurs et de fournir aux annonceurs de meilleurs services de promotion publicitaire.
3. Interaction entre le navigateur et le serveur
L'enregistrement et l'acquisition des cookies s'effectuent entre le navigateur et le serveur. L'ensemble du processus d'interaction peut être divisé en quatre étapes suivantes :
Pour mieux comprendre ce processus, regardons un exemple spécifique.
(1) Exemple de code de serveur
Ce qui suit est un code de serveur écrit à l'aide du framework Node.js pour envoyer une réponse contenant des informations sur les cookies au navigateur.
const http = require('http'); http.createServer((req, res) => { //设置cookie res.writeHead(200, { 'Set-Cookie': 'name=cookie_test; max-age=60' }); //发送响应 res.end('Hello World! '); }).listen(8080); console.log('Server running at http://localhost:8080/');
Analyse du code :
(2) Exemple de code de navigateur
Ce qui suit est un code de navigateur écrit en JavaScript pour envoyer une requête au serveur ci-dessus et afficher des informations sur les cookies lorsque la réponse est reçue.
// 发送请求 fetch('http://localhost:8080') .then(response => { // 读取cookie console.log(response.headers.get('Set-Cookie')); return response.text(); }) .then(data => { console.log(data); }) .catch(error => console.error(error));
Analyse du code :
4. Attributs communs des cookies
En plus de l'attribut max-age utilisé dans l'exemple ci-dessus, les cookies ont de nombreux autres attributs. Les attributs communs sont les suivants :
Cet attribut spécifie le chemin du cookie. Lorsque le navigateur lance une requête, le cookie ne sera introduit que si le chemin de la requête correspond exactement au chemin du cookie.
res.writeHead(200, { 'Set-Cookie': 'name=value; Path=/test' });
Cet attribut précise le nom de domaine du cookie. Lorsque le navigateur lance une demande, le cookie sera inclus uniquement si le nom de domaine demandé correspond exactement au nom de domaine du cookie.
res.writeHead(200, { 'Set-Cookie': 'name=value; Domain=.example.com' });
Cet attribut précise la durée de validité du cookie. Une fois cet attribut défini, le cookie expirera automatiquement à l'heure spécifiée et sera supprimé par le navigateur.
res.writeHead(200, { 'Set-Cookie': 'name=value; Expires=Wed, 18 Nov 2020 08:51:29 GMT' });
Cet attribut précise si le cookie ne peut être envoyé que via le protocole https. Après avoir défini cet attribut, le cookie ne sera apporté que lorsqu'une requête https est effectuée.
res.writeHead(200, { 'Set-Cookie': 'name=value; Secure' });
Cet attribut précise si le cookie ne peut être envoyé que via le protocole http. Après avoir défini cet attribut, le navigateur ne peut pas obtenir les informations sur les cookies via JavaScript, améliorant ainsi la sécurité des cookies.
res.writeHead(200, { 'Set-Cookie': 'name=value; HttpOnly' });
5. Résumé
Grâce à l'introduction de cet article, nous avons découvert la définition, la fonction, la méthode de stockage et les attributs communs des cookies. Dans le même temps, nous avons également appris le modèle d'interaction des cookies entre le navigateur et le serveur et approfondi notre compréhension des cookies grâce à des exemples de code spécifiques. En tant qu'ingénieur front-end, nous devons avoir une compréhension et une maîtrise approfondies des connaissances liées aux cookies afin de les appliquer de manière plus flexible et plus efficace dans le développement réel.
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!