Gestion des cookies du navigateur dans React avec useCookie Hook

Cet article montre la construction d'un crochet de réaction personnalisé, useCookie, pour la gestion des cookies du navigateur rationalisé. Les cookies du navigateur offrent une méthode simple pour stocker des données persistantes entre les sessions ou les sections d'application.

---

1. Fonctions d'utilité des cookies

Avant de créer le crochet, nous définirons les fonctions d'assistance pour les opérations de cookies communes: définir, récupérer et retirer les cookies.

---

setCookie: définir ou mettre à jour un cookie

Cette fonction enregistre une paire de valeurs de clé, spécifiant éventuellement un temps d'expiration.

<code class="language-typescript">export function setCookie(key: string, value: unknown, expireDays = 1): void {
  const d = new Date();
  d.setTime(d.getTime() + expireDays * 24 * 60 * 60 * 1000);
  document.cookie = `${key}=${value}; expires=${d.toUTCString()}; path=/`;
}</code>

• Fonctionnalité: accepte une clé, une valeur et une expiration facultative (défaut à 1 jour). Il calcule la date d'expiration et définit le cookie en conséquence.
• Exemple: setCookie("theme", "dark", 7); // Définit un cookie durant 7 jours

---

getCookie: Récupération d'une valeur cookie

Cette fonction récupère la valeur d'un cookie en utilisant sa clé.

<code class="language-typescript">export function getCookie(key: string): string | undefined {
  const name = `${key}=`;
  const decodedCookie = decodeURIComponent(document.cookie);
  const ca = decodedCookie.split(";");
  for (let i = 0; i < ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) === " ") {
      c = c.substring(1);
    }
    if (c.indexOf(name) === 0) {
      return c.substring(name.length, c.length);
    }
  }
  return undefined;
}</code>

• Mécanisme: Décode document.cookie, le divise dans un tableau et recherche la clé spécifiée. Renvoie la valeur ou undefined.
• Exemple: const theme = getCookie("theme"); // récupère la valeur "thème"

---

removeCookie: Suppression d'un cookie

Cette fonction supprime un cookie en l'écrassant avec une valeur vide et aucune expiration.

<code class="language-typescript">export function removeCookie(key: string): void {
  document.cookie = `${key}=; path=/; expires=Thu, 01 Jan 1970 00:00:00 UTC;`;
}</code>

• Exemple: removeCookie("theme"); // Supprime le "thème" cookie

---

2. Le useCookie crochet

Le Hook useCookie intègre les fonctions d'utilité avec la gestion élégante des cookies de React useState pour la gestion des cookies.

---

Initialisation du crochet

<code class="language-typescript">import { useState } from "react";
import { getCookie, setCookie, removeCookie } from "@/utils/cookie";

export default function useCookie<T>(key: string, initialValue: T): [T | undefined, (action: T | ((prevState: T) => T)) => void, () => void] {
  const [value, setValue] = useState(() => getCookie(key) as T || initialValue);
  // ...rest of the hook implementation
}</code>

• Paramètres: key (clé de cookie), initialValue (valeur par défaut si le cookie n'existe pas).
• Initialisation de l'état: récupère la valeur des cookies ou utilise initialValue.

---

Dépasser les modifications de l'état

La fonction handleDispatch met à jour l'état et le cookie.

<code class="language-typescript">  const handleDispatch = (action: T | ((prevState: T) => T)) => {
    if (typeof action === "function") {
      setValue((prevState) => {
        const newValue = (action as (prevState: T) => T)(prevState);
        setCookie(key, newValue);
        return newValue;
      });
    } else {
      setValue(action);
      setCookie(key, action);
    }
  };</code>

• Mécanisme: gère les mises à jour de la valeur directe et les mises à jour fonctionnelles (pour les transformations d'état). Il assure la synchronisation des cookies.

---

Effacer l'état

La fonction clearState supprime le cookie et réinitialise l'état.

<code class="language-typescript">export function setCookie(key: string, value: unknown, expireDays = 1): void {
  const d = new Date();
  d.setTime(d.getTime() + expireDays * 24 * 60 * 60 * 1000);
  document.cookie = `${key}=${value}; expires=${d.toUTCString()}; path=/`;
}</code>

• Fonctionnalité : Supprime le cookie et définit l'état sur undefined.

---

Renvoi de l'API du Hook

Le hook renvoie un tableau : valeur actuelle, fonction du répartiteur et fonction d'effacement.

<code class="language-typescript">export function getCookie(key: string): string | undefined {
  const name = `${key}=`;
  const decodedCookie = decodeURIComponent(document.cookie);
  const ca = decodedCookie.split(";");
  for (let i = 0; i < ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) === " ") {
      c = c.substring(1);
    }
    if (c.indexOf(name) === 0) {
      return c.substring(name.length, c.length);
    }
  }
  return undefined;
}</code>

---

3. Utiliser le useCookie Crochet

Exemple d'utilisation dans un composant React :

<code class="language-typescript">export function removeCookie(key: string): void {
  document.cookie = `${key}=; path=/; expires=Thu, 01 Jan 1970 00:00:00 UTC;`;
}</code>

• Aspects clés : Le theme est stocké dans un cookie, persiste au fil des sessions et se met à jour de manière synchrone. clearTheme supprime le cookie et réinitialise l'état.

---

4. Avantages du useCookieCrochet

• Gestion simplifiée des cookies : Encapsule la logique des cookies.
• Synchronisation de l'état : Maintient l'état de React et les cookies synchronisés.
• Gestion des erreurs : Inclut des mécanismes de décodage et de gestion des cookies.

---

Conclusion

Le hook useCookie simplifie la gestion des cookies dans React, favorisant la sécurité des types et un code propre. Il rationalise la gestion de l'état basée sur les cookies, en éliminant le code répétitif.

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!