Retourne le code ASCII d'un caractère
Apprenez à utiliser les cookies avec ExpressJS dans ce tutoriel pas à pas pour débutants. Exemples simples et exécutables inclus
Dans ce tutoriel, nous allons découvrir comment utiliser les cookies avec ExpressJS. Ce guide est fait pour les Débutants : nous irons doucement, étape par étape, avec des explications simples et un exemple que vous pourrez tester vous-même. Vous apprendrez à stocker et lire des informations comme le nom d’un visiteur.
Un cookie est une petite information que votre serveur envoie au navigateur de l’utilisateur (comme Chrome ou Firefox). Le navigateur le garde et le renvoie à chaque visite. Avec ExpressJS, les cookies peuvent servir à se souvenir d’un utilisateur, par exemple pour afficher "Bienvenue, Marie" à chaque fois qu’elle revient. Nous allons utiliser un outil appelé cookie-parser pour rendre ça facile.
Avant de coder, préparons tout ce qu’il faut. Si vous avez suivi les tutoriels précédents, vous avez déjà Node.js et ExpressJS. Sinon, voici les étapes :
node -v. Si vous voyez une version (ex. : v16.13.0), c’est bon. Sinon, téléchargez Node.js sur nodejs.org.cd chemin/vers/cookies-express, puis tapez npm init -y. Cela crée un fichier package.json.npm install express cookie-parser. Express est pour le serveur, et cookie-parser nous aide à gérer les cookies.Commençons par un exemple où le serveur envoie un cookie au visiteur et affiche un message avec ce cookie.
Créez un fichier nommé index.js dans votre dossier "cookies-express" et ajoutez ce code. Il définit un cookie avec un nom et le lit.
var express = require('express');
var cookieParser = require('cookie-parser');
var app = express();
// Activer la gestion des cookies
app.use(cookieParser());
// Route principale
app.get('/', function(req, res) {
// Vérifier si un cookie "nom" existe
var nom = req.cookies.nom;
if (!nom) {
// Si pas de cookie, en définir un
res.cookie('nom', 'Visiteur');
res.send(`
<html>
<body>
<h1>Bienvenue !</h1>
<p>Un cookie a été créé pour vous appeler "Visiteur". Rechargez la page pour voir.</p>
</body>
</html>
`);
} else {
// Si le cookie existe, l'utiliser
res.send(`
<html>
<body>
<h1>Bienvenue de nouveau, ${nom} !</h1>
<p>Votre cookie a été lu.</p>
</body>
</html>
`);
}
});
app.listen(3000, function() {
console.log("Serveur démarré sur http://localhost:3000");
});
Voici chaque ligne expliquée très simplement pour les débutants :
cookie-parser, un outil qui lit et écrit des cookies facilement.cookie-parser. C’est un "middleware" (un assistant) qui ajoute des fonctions pour gérer les cookies.req.cookies contient tous les cookies envoyés par le navigateur.Pour exécuter : Sauvegardez index.js, tapez node index.js dans le terminal, puis ouvrez <a href="http://localhost:3000" title="Tester les cookies">http://localhost:3000</a> dans votre navigateur. La première fois, vous verrez "Un cookie a été créé". Rechargez la page (F5), et vous verrez "Bienvenue de nouveau, Visiteur !".
Allons plus loin : ajoutons un formulaire pour que l’utilisateur définisse son propre nom dans un cookie.
Mettez à jour index.js avec ce code. Il ajoute un formulaire pour définir un cookie personnalisé.
var express = require('express');
var cookieParser = require('cookie-parser');
var app = express();
// Activer la gestion des cookies et des formulaires
app.use(cookieParser());
app.use(express.urlencoded({ extended: false }));
// Route principale
app.get('/', function(req, res) {
var nom = req.cookies.nom || "Visiteur";
res.send(`
<html>
<body>
<h1>Bienvenue, ${nom} !</h1>
<form method="POST" action="/definir-nom">
<label>Changer votre nom : </label>
<input type="text" name="nom">
<button type="submit">Définir</button>
</form>
</body>
</html>
`);
});
// Route pour définir un nouveau cookie
app.post('/definir-nom', function(req, res) {
var nouveauNom = req.body.nom;
res.cookie('nom', nouveauNom);
res.send(`
<html>
<body>
<h1>Nouveau nom défini : ${nouveauNom} !</h1>
<p><a href="/" title="Retour à la page principale">Retour</a></p>
</body>
</html>
`);
});
app.listen(3000, function() {
console.log("Serveur démarré sur http://localhost:3000");
});
Voici chaque nouvelle partie expliquée pour les débutants :
Pour exécuter : Sauvegardez index.js, tapez node index.js, allez à <a href="http://localhost:3000" title="Tester le formulaire">http://localhost:3000</a>. Vous verrez "Bienvenue, Visiteur !". Entrez un nom (ex. : "Marie"), cliquez sur "Définir", puis revenez à la page principale. Vous verrez "Bienvenue, Marie !".
Les cookies ne servent pas seulement à stocker un nom. Ils peuvent aussi garder des informations utiles, comme la date de la dernière visite d’un utilisateur. Dans cet exemple, nous allons utiliser un cookie pour enregistrer quand quelqu’un visite la page, puis calculer combien de temps s’est écoulé depuis sa dernière visite. Suivez ces étapes pour voir comment faire.
Ajoutez ce code à votre fichier index.js existant ou remplacez la partie précédente. Ce code définit un cookie avec la date actuelle et affiche un message personnalisé avec le temps écoulé depuis la dernière visite.
var express = require('express');
var cookieParser = require('cookie-parser');
var app = express();
// Activer la gestion des cookies
app.use(cookieParser());
app.use(express.urlencoded({ extended: false }));
// Route principale
app.get('/', function(req, res) {
var nom = req.cookies.nom || "Visiteur";
var derniereVisite = req.cookies.derniereVisite;
var messageVisite = "";
// Si un cookie de dernière visite existe, calculer le temps écoulé
if (derniereVisite) {
var dateDerniere = new Date(parseInt(derniereVisite));
var dateActuelle = new Date();
var differenceMs = dateActuelle - dateDerniere;
var jours = Math.floor(differenceMs / (1000 * 60 * 60 * 24));
var heures = Math.floor((differenceMs % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
messageVisite = `Votre dernière visite était il y a ${jours} jour(s) et ${heures} heure(s).`;
} else {
messageVisite = "C’est votre première visite !";
}
// Définir ou mettre à jour le cookie de dernière visite avec la date actuelle
res.cookie('derniereVisite', Date.now());
// Afficher la page avec le message
res.send(`
<html>
<body>
<h1>Bonjour, ${nom} !</h1>
<p>${messageVisite}</p>
<form method="POST" action="/definir-nom">
<label>Changer votre nom : </label>
<input type="text" name="nom">
<button type="submit">Définir</button>
</form>
</body>
</html>
`);
});
// Route pour définir un nouveau cookie de nom
app.post('/definir-nom', function(req, res) {
var nouveauNom = req.body.nom;
res.cookie('nom', nouveauNom);
res.send(`
<html>
<body>
<h1>Nouveau nom défini : ${nouveauNom} !</h1>
<p><a href="/" title="Retour à la page principale">Retour</a></p>
</body>
</html>
`);
});
app.listen(3000, function() {
console.log("Serveur démarré sur http://localhost:3000");
});
Voici chaque partie expliquée très simplement pour les débutants:
parseInt convertit le texte en nombre.Math.floor.%) de la division.Date.now() donne ce nombre.Pour exécuter : Sauvegardez index.js, tapez node index.js dans le terminal, puis ouvrez <a href="http://localhost:3000" title="Tester les cookies">http://localhost:3000</a>. La première fois, vous verrez "C’est votre première visite !". Rechargez la page après quelques secondes ou minutes, et vous verrez un message comme "Votre dernière visite était il y a 0 jour(s) et 0 heure(s)". Attendez plus longtemps (ex. : 1 heure ou 1 jour) et rechargez pour voir le temps mis à jour.
Félicitations ! Vous savez maintenant utiliser les cookies avec ExpressJS pour stocker et lire des informations. C’est utile pour personnaliser l’expérience des utilisateurs. Essayez ce code dans utiliser-cookies-expressjs.html. Pour aller plus loin, découvrez notre prochain tutoriel sur Gérer les Sessions dans ExpressJS ou consultez la documentation ExpressJS.