与UseCookie Hook React中管理浏览器cookie-js教程-PHP中文网

与UseCookie Hook React中管理浏览器cookie

霞舞

发布： 2025-01-27 16:42:18

原创

675人浏览过

与usecookie hook react中管理浏览器cookie

本文介绍如何在React应用中创建自定义Hook useCookie，方便地管理浏览器Cookie。我们将构建辅助函数处理Cookie的常用操作：设置、获取和删除。

1. Cookie辅助函数

首先，创建三个函数：setCookie、getCookie和removeCookie。

setCookie：添加或更新Cookie

<code class="javascript">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天）作为参数，计算过期日期，并创建一个Cookie字符串。

getCookie：检索Cookie值

<code class="javascript">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，将Cookie拆分成数组，并搜索指定的键。如果找到，返回对应的值；否则返回undefined。

removeCookie：删除Cookie

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

登录后复制

该函数通过设置过期日期为过去的时间来删除Cookie。

2. useCookie Hook

useCookie Hook结合了useState和Cookie辅助函数，提供优雅的Cookie管理方式。

Hook初始化

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

export default function useCookie<T>(key: string, initialValue: T) {
  const [value, setValue] = useState(() => {
    const data = getCookie(key);
    return (data || initialValue) as T;
  });

  // ...additional logic
}</code>

登录后复制

Hook接受Cookie键和初始值作为参数，使用getCookie获取Cookie的当前值，若不存在则使用初始值。

PHPOA开源协同OA办公系统源码

PHPOA办公系统是适用于中小型企业的通用型协同OA管理软件，融合了PHPOA长期从事管理软件开发的丰富经验与先进技术，该系统采用领先的B/S(浏览器/服务器)操作方式，使得网络办公不受地域限制PHPOA使用敏捷MVC开发框架，支持多种模块分布式开发，统一布局，界面简洁不失严肃。

2632

查看详情

状态变化处理

<code class="javascript">function handleDispatch(action: DispatchAction<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>

登录后复制

handleDispatch函数更新本地状态和Cookie。如果action是函数，则应用于当前状态；否则直接设置新值。setCookie确保浏览器Cookie与状态同步。

清除状态

<code class="javascript">function clearState() {
  removeCookie(key);
  setValue(undefined as T);
}</code>

登录后复制

clearState函数删除Cookie并重置状态。

Hook API返回

<code class="javascript">return [value, handleDispatch, clearState] as const;</code>

登录后复制

Hook返回一个数组，包含当前值、调度函数和清除函数。

3. 使用useCookie Hook

示例：

<code class="javascript">import useCookie from "@/hooks/useCookie";

function ThemeSwitcher() {
  const [theme, setTheme, clearTheme] = useCookie<string>("theme", "light");

  return (
    <div>
      <h1>Current Theme: {theme}</h1>
      <button onClick={() => setTheme("light")}>Light Mode</button>
      <button onClick={() => setTheme("dark")}>Dark Mode</button>
      <button onClick={clearTheme}>Clear Theme</button>
    </div>
  );
}</code>

登录后复制

主题值存储在Cookie中，并在会话中保持。更改主题会更新状态和Cookie。clearTheme函数重置主题并删除Cookie。

4. 优点