Comment utiliser les cookies dans React

Dans cet article, nous passons en revue quelques exemples de configuration et d’utilisation de cookies dans une application React pour stocker et récupérer des données, notamment comment créer, lire, mettre à jour et supprimer des cookies, ainsi que gérer le consentement aux cookies à l’aide d’une barre de cookies.

Biscuits sont un moyen courant de stocker et de récupérer des données côté client dans les applications Web. Les cookies peuvent être utilisés pour stocker des informations telles que les préférences de l’utilisateur, les données de session et d’autres données qui doivent persister sur différentes sessions ou pages.

Pour en savoir plus sur ce que sont les cookies et comment ils se comparent aux autres mécanismes de stockage du navigateur, assurez-vous de consulter l’article précédent que j’ai écrit intitulé Les trois mécanismes de stockage du navigateur.

Dans cet article, nous passerons en revue quelques exemples de configuration et d’utilisation de cookies dans React, notamment comment créer, lire, mettre à jour et supprimer des cookies, ainsi que gérer le consentement aux cookies à l’aide d’une barre de cookies.

Configuration des cookies dans React

Bien que les cookies puissent être gérés en JavaScript par des moyens personnalisés, l’utilisation d’une bibliothèque tierce bien entretenue pour gérer les cookies peut contribuer à garantir la compatibilité du navigateur, à fournir des fonctionnalités de sécurité intégrées et à nous faire gagner du temps. De nombreuses bibliothèques JavaScript populaires existent lorsqu’il s’agit de gérer les cookies, notamment js-cookie, cookie-universel et cookie de réaction. Pour cet article, nous utiliserons le js-cookie bibliothèque, mais toutes les différentes bibliothèques obtiendront un résultat très similaire.

Pour faire usage de js-cookienous devons d’abord installer la bibliothèque en utilisant npm ou yarn:

npm install js-cookie

Une fois la bibliothèque installée, nous pouvons l’importer dans notre composant React et commencer à l’utiliser pour interagir avec les cookies. Par exemple, disons que nous souhaitons définir un cookie pour stocker la langue préférée d’un utilisateur. Nous pouvons utiliser le Cookies.set() méthode fournie par le js-cookie bibliothèque pour faire ceci:

import React from 'react';
import Cookies from 'js-cookie';

function App() {
  
  const setLanguageCookie = (language) => {
    Cookies.set('language', language);
  }

  return (
    
  );
}

export default App;

Dans l’exemple ci-dessus, nous définissons un setLanguageCookie() fonction qui prend un paramètre de langue et utilise le Cookies.set() méthode pour définir un cookie avec le nom 'language' et la valeur du paramètre de langue.

Lecture des cookies

Une fois qu’un cookie est installé, nous pouvons lire sa valeur à l’aide du Cookies.get() méthode fournie par le js-cookie bibliothèque. Nous pouvons récupérer la langue préférée d’un utilisateur à partir du cookie que nous avons défini précédemment et l’afficher dans notre composant React comme suit :

import React from "react";
import Cookies from "js-cookie";

function App() {
  
  const getLanguageCookie = () => {
    return Cookies.get("language");
  };

  const language = getLanguageCookie();

  return (
    <div>
      <p>Preferred Language: {language}</p>
      {}
    </div>
  );
}

export default App;

Dans l’exemple ci-dessus, nous définissons un getLanguageCookie() fonction qui utilise le Cookies.get() méthode pour récupérer la valeur du 'language' biscuit. Nous affichons ensuite la valeur de langue récupérée dans notre composant React.

Suppression des cookies

Pour supprimer un cookie, nous pouvons utiliser le Cookies.remove() méthode fournie par le js-cookie bibliothèque et nous pouvons supprimer le 'language' cookie que nous avons défini précédemment avec les éléments suivants :

import React from 'react';
import Cookies from 'js-cookie';

function App() {
  
  const clearLanguageCookie = () => {
    Cookies.remove('language');
  }

  

  return (
    
  );
}

export default App;

Dans l’exemple ci-dessus, nous définissons un clearLanguageCookie() fonction qui utilise le Cookies.remove() méthode pour supprimer le 'language' biscuit.

Gérer le consentement aux cookies avec une barre de cookies

Dans de nombreuses applications Web, il est parfois nécessaire d’obtenir le consentement de l’utilisateur avant de définir des cookies. Une manière courante de gérer cela consiste à afficher une barre de cookies qui informe l’utilisateur de l’utilisation des cookies et lui demande son consentement. Avec React, nous pouvons implémenter cela facilement avec État et rendu conditionnel.

Voici un exemple de création d’un simple composant de barre de cookies qui affiche un message et deux boutons pour permettre à l’utilisateur d’accepter ou de refuser les cookies.

import React, { useState } from "react";
import Cookies from "js-cookie";

function CookieBar() {
  const [isCookieSet, setCookie] = useState(Cookies.get("cookieConsent"));

  
  const handleAcceptCookies = () => {
    Cookies.set("cookieConsent", true);
    setCookie(true);
  };

  
  const handleRejectCookies = () => {
    Cookies.remove("cookieConsent");
    setCookie(false);
  };

  return (
    <div>
      <div>
        <p>
          This website uses cookies to improve your experience. Do you accept
          cookies?
        </p>
        <button onClick={handleAcceptCookies}>Accept</button>
        <button onClick={handleRejectCookies}>Reject</button>
      </div>
      <sub>Cookie set: {isCookieSet ? <b>Yes</b> : <b>No</b>}</sub>
    </div>
  );
}

export default CookieBar;

Dans l’exemple ci-dessus, nous utilisons le React useState() hook pour gérer l’état du composant barre de cookies. Le isCookieSet la variable d’état est définie sur true si la 'cookieConsent' le cookie est présent sinon aura une valeur de false.

Lorsque l’utilisateur clique sur le bouton « Accepter » ou « Rejeter », le 'cookieConsent' le cookie est défini ou supprimé avec le Cookies.set() ou Cookies.remove() méthodes respectivement.

Dans le Biscuits section de nos outils de développement de navigateur, nous pourrons voir le 'cookieConsent' le cookie soit ajouté et supprimé chaque fois que les boutons respectifs sont cliqués et que la page est ensuite actualisée.

L’exemple ci-dessus peut être consulté dans ce CodeSandbox.

Conclure

Dans cet article, nous avons couvert les bases de l’utilisation des cookies dans React en apprenant comment définir, lire, mettre à jour et supprimer les cookies à l’aide de l’outil js-cookie bibliothèque. Nous avons également vu un exemple simple sur la façon dont le consentement aux cookies peut être géré avec un composant barre de cookies dans React.

Les cookies sont un outil utile pour stocker et récupérer des données côté client dans les applications Web, mais il est important de les gérer correctement et d’obtenir le consentement de l’utilisateur si nécessaire !