React で useCookie フックを使用してブラウザー Cookie を管理する-jsチュートリアル-php.cn

React で useCookie フックを使用してブラウザー Cookie を管理する

Barbara Streisand

リリース： 2025-01-27 16:40:09

オリジナル

312 人が閲覧しました

Managing Browser Cookies in React with useCookie Hook

この記事では、合理化されたブラウザクッキー管理用のカスタムReactフック

の構築を示しています。ブラウザクッキーは、セッションまたはアプリケーションセクション全体に永続的なデータを保存するための簡単な方法を提供します。 useCookie

1。 Cookieユーティリティ関数

フックを作成する前に、一般的なCookie操作のヘルパー関数を定義します。クッキーの設定、取得、削除。

：Cookieの設定または更新

この関数はキー価値ペアを保存し、オプションで有効期限を指定します。 `setCookie`

機能：

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

ログイン後にコピー

キー、価値、およびオプションの有効期限を受け入れます（デフォルトは1日になります）。有効期限を計算し、それに応じてクッキーを設定します。

例： // 7日間続くクッキーを設定します
setCookie("theme", "dark", 7);：Cookie値を取得

`getCookie`メカニズム：

デコード

、それを配列に分割し、指定されたキーを検索します。値または

。

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

ログイン後にコピー

を返します

例：//「テーマ」値を取得document.cookie undefined
：cookieを削除します const theme = getCookie("theme");この関数は、空の値と有効期限なしで上書きすることにより、Cookieを削除します。

例：`removeCookie`

//「テーマ」のcookie

を削除します

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

ログイン後にコピー

2。 フック removeCookie("theme");

フックは、ユーティリティ関数をReactの

とコンポーネント内のエレガントなクッキー管理に統合します。 useCookieフックの初期化

useCookieuseStateパラメーター：

（Cookieキー）、

（Cookieが存在しない場合はデフォルト値）。

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

ログイン後にコピー

状態の初期化：

。を使用します key initialValue状態の変更を派遣します
関数は状態とCookieの両方を更新します。 initialValue

メカニズム：直接的な値の更新と機能的更新（状態変換の場合）の両方を処理します。 Cookie同期を保証します

状態のクリアhandleDispatch

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

ログイン後にコピー

関数はCookieを削除し、状態をリセットします。

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

ログイン後にコピー

機能：Cookieを削除して、状態をundefined。

フックのAPIを返してください

フックは配列を返します：現在の値、ディスパッチャー関数、およびクリア関数。

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

hook useCookieを使用します 反応成分での使用の例：

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

ログイン後にコピー