Menguruskan kuki penyemak imbas di React dengan Usecookie Hook

Artikel ini menunjukkan membina cangkuk React Custom,

, untuk pengurusan cookie penyemak imbas yang diselaraskan. Kuki penyemak imbas menawarkan kaedah mudah untuk menyimpan data yang berterusan di seluruh sesi atau bahagian aplikasi. useCookie

---

1. Fungsi Utiliti Cookie

Sebelum membuat cangkuk, kami akan menentukan fungsi penolong untuk operasi kuki biasa: menetapkan, mengambil, dan mengeluarkan kuki.

---

: Menetapkan atau mengemas kini cookie setCookie

Fungsi ini menjimatkan pasangan nilai utama, secara pilihan menentukan masa tamat tempoh.

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

• Fungsi: Menerima kunci, nilai, dan tamat tempoh pilihan (ingkar hingga 1 hari). Ia mengira tarikh tamat tempoh dan menetapkan kuki dengan sewajarnya.
• Contoh: // menetapkan kuki yang berlangsung selama 7 hari setCookie("theme", "dark", 7);

---

: Mendapatkan nilai kuki getCookie

Fungsi ini mengambil nilai kuki menggunakan kuncinya.

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

• Mekanisme: Decodes , memisahkannya ke dalam array, dan mencari kunci yang ditentukan. Mengembalikan nilai atau document.cookie. undefined
• Contoh: // mengambil nilai "tema" const theme = getCookie("theme");

---

: Memadam cookie removeCookie

Fungsi ini menghilangkan kuki dengan menimpa dengan nilai kosong dan tiada tamat tempoh.

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

• Contoh: // Memadam "Tema" Cookie removeCookie("theme");

---

2. Hook useCookie

Hook

mengintegrasikan fungsi utiliti dengan React's useCookie untuk pengurusan kuki yang elegan dalam komponen. useState

---

Inisialisasi Hook

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

• Inisialisasi Negeri: mengambil nilai cookie atau kegunaan key. initialValue
• Menghantar perubahan keadaan initialValue fungsi
mengemas kini kedua -dua keadaan dan kuki.

---

Mekanisme: handleDispatch Mengendalikan kedua -dua kemas kini nilai langsung dan kemas kini fungsional (untuk transformasi negeri). Ia memastikan penyegerakan 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>

• membersihkan keadaan Fungsi menghilangkan kuki dan menetapkan semula keadaan.

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

• Fungsi: Mengalih keluar kuki dan menetapkan keadaan kepada undefined.

---

Memulangkan API Cangkuk

Cakuk mengembalikan tatasusunan: nilai semasa, fungsi penghantar dan fungsi jelas.

<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. Menggunakan useCookie Cangkuk

Contoh penggunaan dalam komponen 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>

• Aspek Utama: theme disimpan dalam kuki, berterusan merentas sesi dan dikemas kini secara serentak. clearTheme mengalih keluar kuki dan menetapkan semula keadaan.

---

4. Kelebihan useCookie Cangkuk

• Pengurusan Kuki Ringkas: Merangkumi logik kuki.
• Penyegerakan Keadaan: Mengekalkan keadaan React dan kuki dalam penyegerakan.
• Pengendalian Ralat: Termasuk mekanisme untuk menyahkod dan mengendalikan kuki.

---

Kesimpulan

Cangkuk useCookie memudahkan pengurusan kuki dalam React, mempromosikan keselamatan jenis dan kod bersih. Ia memperkemas pengurusan negeri berasaskan kuki, menghapuskan kod berulang.

Atas ialah kandungan terperinci Menguruskan kuki penyemak imbas di React dengan Usecookie Hook. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!