如何在React站点实现可自定义Cookie权限的弹窗组件？

核心实现思路 #

做一个常驻页面底部的弹窗，默认展示「接受全部」「自定义设置」两个主按钮；点击「自定义设置」展开细分选项，让用户单独控制 Functional、Performance、Marketing 三类 Cookie 的开关；用户的选择要持久化存储，下次访问时自动应用。

完整组件代码示例 #

import { useState, useEffect } from 'react';
import './CookieConsent.css';

const CookieConsent = () => {
  // 弹窗显示状态
  const [isOpen, setIsOpen] = useState(false);
  // 自定义面板展开状态
  const [showDetails, setShowDetails] = useState(false);
  // Cookie 偏好状态
  const [cookiePreferences, setCookiePreferences] = useState({
    functional: false,
    performance: false,
    marketing: false,
  });

  // 初始化：检查是否已有保存的偏好，没有则显示弹窗
  useEffect(() => {
    const savedPrefs = localStorage.getItem('cookiePreferences');
    if (!savedPrefs) {
      setIsOpen(true);
    } else {
      setCookiePreferences(JSON.parse(savedPrefs));
      // 应用已保存的偏好（比如加载对应脚本）
      applyCookiePreferences(JSON.parse(savedPrefs));
    }
  }, []);

  // 保存偏好到 localStorage 并应用
  const saveAndApplyPreferences = (prefs) => {
    localStorage.setItem('cookiePreferences', JSON.stringify(prefs));
    applyCookiePreferences(prefs);
    setIsOpen(false);
  };

  // 应用 Cookie 偏好逻辑
  const applyCookiePreferences = (prefs) => {
    // 处理 Functional Cookie：比如启用站点功能相关的存储
    if (prefs.functional) {
      document.cookie = 'functional_cookie_enabled=true; path=/; max-age=31536000';
    } else {
      document.cookie = 'functional_cookie_enabled=false; path=/; max-age=0';
    }

    // 处理 Performance Cookie：比如启用 analytics 工具
    if (prefs.performance) {
      const script = document.createElement('script');
      script.src = '/path/to/performance-analytics.js';
      script.async = true;
      document.body.appendChild(script);
    }

    // 处理 Marketing Cookie：比如启用广告跟踪脚本
    if (prefs.marketing) {
      const script = document.createElement('script');
      script.src = '/path/to/marketing-tracking.js';
      script.async = true;
      document.body.appendChild(script);
    }
  };

  // 一键接受所有
  const acceptAll = () => {
    const allAccepted = {
      functional: true,
      performance: true,
      marketing: true,
    };
    saveAndApplyPreferences(allAccepted);
  };

  // 保存自定义设置
  const saveCustomSettings = () => {
    saveAndApplyPreferences(cookiePreferences);
  };

  // 切换单个 Cookie 类型
  const toggleCookieType = (type) => {
    setCookiePreferences(prev => ({
      ...prev,
      [type]: !prev[type],
    }));
  };

  if (!isOpen) return null;

  return (
    <div className="cookie-consent-overlay">
      <div className="cookie-consent-container">
        <h3>Cookie 偏好设置</h3>
        <p>我们使用不同类型的 Cookie 来提升你的体验，你可以选择启用或禁用特定类型。</p>
        
        {!showDetails ? (
          <div className="cookie-consent-actions">
            <button className="btn btn-primary" onClick={acceptAll}>接受全部</button>
            <button className="btn btn-secondary" onClick={() => setShowDetails(true)}>自定义设置</button>
          </div>
        ) : (
          <div className="cookie-consent-details">
            <div className="cookie-type">
              <label>
                <input
                  type="checkbox"
                  checked={cookiePreferences.functional}
                  onChange={() => toggleCookieType('functional')}
                />
                <span>Functional Cookie</span>
              </label>
              <p>用于保存你的站点偏好，比如语言设置、登录状态等。</p>
            </div>
            <div className="cookie-type">
              <label>
                <input
                  type="checkbox"
                  checked={cookiePreferences.performance}
                  onChange={() => toggleCookieType('performance')}
                />
                <span>Performance Cookie</span>
              </label>
              <p>用于分析站点访问数据，帮助我们优化性能和用户体验。</p>
            </div>
            <div className="cookie-type">
              <label>
                <input
                  type="checkbox"
                  checked={cookiePreferences.marketing}
                  onChange={() => toggleCookieType('marketing')}
                />
                <span>Marketing Cookie</span>
              </label>
              <p>用于展示个性化广告，跟踪广告效果。</p>
            </div>
            <div className="cookie-consent-actions">
              <button className="btn btn-primary" onClick={saveCustomSettings}>保存设置</button>
              <button className="btn btn-secondary" onClick={() => setShowDetails(false)}>返回</button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

export default CookieConsent;

配套样式示例（CookieConsent.css） #

.cookie-consent-overlay {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.8);
  padding: 20px;
  z-index: 1000;
}

.cookie-consent-container {
  max-width: 800px;
  margin: 0 auto;
  background: white;
  padding: 24px;
  border-radius: 8px;
}

.cookie-consent-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.btn-primary {
  background: #2563eb;
  color: white;
}

.btn-secondary {
  background: #e5e7eb;
  color: #111827;
}

.cookie-consent-details {
  margin-top: 16px;
}

.cookie-type {
  margin-bottom: 16px;
}

.cookie-type label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

.cookie-type p {
  margin: 8px 0 0 28px;
  font-size: 14px;
  color: #6b7280;
}

关键注意事项 #

• 持久化存储：用localStorage保存用户偏好，确保刷新或重新访问时自动应用设置
• 脚本加载时机：第三方脚本（比如分析、广告工具）必须在用户同意对应类型后再动态加载，避免提前注入
• 合规性：确保文案符合GDPR等隐私法规要求，清晰说明每种Cookie的用途
• 可访问性：添加合适的ARIA属性，确保键盘导航和屏幕阅读器可正常使用

内容的提问来源于stack exchange，提问作者SlugLord