Verwalten von Browser -Cookies in React mit Usecookie Hook

Dieser Artikel zeigt, dass ein benutzerdefiniertes React -Hook, useCookie für optimiertes Browser -Cookie -Management erstellt wird. Browser -Cookies bieten eine einfache Methode zum Speichern anhaltender Daten über Sitzungen oder Anwendungsabschnitte hinweg.

---

1. Cookie Utility -Funktionen

Bevor wir den Haken erstellen, definieren wir Helferfunktionen für gemeinsame Cookie -Operationen: Setzen, Abrufen und Entfernen von Cookies.

---

setCookie: Einstellen oder Aktualisieren eines Cookies

Diese Funktion speichert ein Schlüsselwertpaar und gibt optional eine Ablaufzeit an.

<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>

• Funktionalität: Akzeptiert einen Schlüssel, einen Wert und optionalen Ablauf (Defaugung von 1 Tag). Es berechnet das Ablaufdatum und legt den Cookie entsprechend fest.
• Beispiel: setCookie("theme", "dark", 7); // legt einen Cookie fest, der 7 Tage dauerte

---

getCookie: Abrufen eines Cookie -Wertes

Diese Funktion ruft den Wert eines Cookies mit seinem Schlüssel ab.

<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>

• Mechanismus: decodiert document.cookie, teilt es in ein Array und sucht nach dem angegebenen Schlüssel. Gibt den Wert oder undefined.
zurück
• Beispiel: const theme = getCookie("theme"); // ruft den Wert "themen" ab

---

removeCookie: Löschen eines Cookie

Diese Funktion entfernt ein Cookie, indem er ihn mit einem leeren Wert und ohne Ablauf überschreibt.

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

• Beispiel: removeCookie("theme"); // löscht das "Thema" Cookie

---

2. Der useCookie haken

Der useCookie Hook integriert die Dienstprogrammfunktionen mit Reacts useState für die elegante Cookie -Verwaltung in Komponenten.

---

Hakeninitialisierung

<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>

• Parameter: key (Cookie -Schlüssel), initialValue (Standardwert, wenn Cookie nicht existiert).
• Zustandsinitialisierung: ruft den Cookie -Wert ab oder verwendet initialValue.

---

Versandstatusänderungen

Die Funktion handleDispatch aktualisiert sowohl den Status als auch das 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>

• Mechanismus: verarbeitet sowohl direkte Wertaktualisierungen als auch funktionale Updates (für Zustandstransformationen). Es sorgt für die Synchronisation von Cookie.

---

Löschen des Zustands

Die clearState -Funktion entfernt den Cookie und setzt den Zustand zurück.

<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>

• Funktionalität: entfernt den Cookie und legt den Status auf undefined.
fest

---

Die API des Hooks zurückgeben

Der Haken gibt ein Array zurück: Stromwert, Dispatcher -Funktion und Löschfunktion.

<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. Verwenden Sie den useCookie Hook

Beispiel Verwendung in einer React -Komponente:

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

• Schlüsselaspekte: Der theme wird in einem Keks gespeichert, bleibt über Sitzungen hinweg bestehen und aktualisiert synchron. clearTheme entfernt den Keks und setzt den Zustand zurück.

---

4. Vorteile des useCookie Hook

• vereinfachtes Cookie -Management: Kapuliert Cookie Logic.
• Zustandsynchronisation: Hält React -Zustand und Cookies synchronisiert
• Fehlerbehandlung: Enthält Mechanismen zum Dekodieren und Umgang mit Cookies.

---

Schlussfolgerung

Der useCookie Hook vereinfacht das Cookie -Management in React und fördert die Sicherheitstypsicherheit und sauberen Code. Es optimiert Cookie-basierte staatliche Verwaltung und eliminiert sich wiederholte Code.

Das obige ist der detaillierte Inhalt vonVerwalten von Browser -Cookies in React mit Usecookie Hook. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!