Cookie Guard：GDPR/CCPA Consent Manager（无依赖，12.8 kB，22 种语言）

Source: Dev.to

（请提供您希望翻译的正文内容，我将为您翻译成简体中文，并保留原始的格式、Markdown 语法以及技术术语。）

概述

Cookie Guard 🛡️ 是一个轻量级、无依赖的 GDPR/CCPA 同意管理器。它提供了一个简单、可定制的解决方案，用于在 22 种语言中处理 cookie 同意，并具备完全响应式、移动优先的 UI。

功能

• 法律合规 – 完全符合 GDPR/CCPA（2026 年标准）的工作流。
• 混合模式 – 支持完整的第三方同意以及信息性的 “无 Cookie” 模式。
• 智能执行 – 自动激活分析/营销脚本（处理 type="text/plain"）。
• 零依赖 – 纯原生 JavaScript；不需要 jQuery 或其他外部库。
• 隐私按钮 – 可选的持久悬浮按钮，用于重新打开设置。
• 法律条款 – 可选的接受和法律链接处理。
• 全球覆盖 – 支持 22 种语言（包括 LTR 与 RTL），自动检测浏览器语言。
• 性能 – 超轻量（约 12.8 kB，已压缩）。
• 可访问性 – 实现 ARIA 标准，兼容屏幕阅读器。
• 封装性 – 在 IIFE 中构建，避免全局命名空间污染。
• 可定制 – 灵活配置过期时间、链接颜色、按钮圆角等。
• 开发者 API – 提供公共的 toggle、open、reset 方法供外部控制。

安装

在关闭 </body> 标签之前添加压缩后的脚本并初始化它：

<script src="cookie-guard.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => CookieGuard.init());
</script>

配置选项

默认设置（JavaScript）

const defaults = {
    locale: 'auto',
    consent: true,
    url: null,
    reopen: true,
    radius: 12,
    delay: 800,
    link: "#3b82f6",
    hover: "#10b981",
    separator: "•",
    expiration: 365,
};

使用示例

基本初始化（English，自定义颜色）

document.addEventListener('DOMContentLoaded', () => 
    CookieGuard.init({
        locale: 'en',
        url: "/legal",
        link: "#ff0000",   // red links
        radius: 8,         // button radius
    })
);

仅信息模式（auto‑detect language，无第三方 cookies）

document.addEventListener('DOMContentLoaded', () => 
    CookieGuard.init({
        locale: 'auto',
        consent: false,
    })
);

管理脚本

要让 Cookie Guard 控制脚本，请将 type="text/plain" 设置为该属性，并添加 data-cg-category（analytics | marketing）。

<script type="text/plain" data-cg-category="analytics">
    console.log('Analytics script executed');
</script>

<script type="text/plain" data-cg-category="marketing">
    console.log("Facebook pixel is legally enabled.");
    fbq('init', '123456789');
    fbq('track', 'PageView');
</script>

API 方法

• Toggle – 打开/关闭同意模态框：

  <a href="javascript:void(0)" onclick="CookieGuard.toggle()">Privacy</a>

• Open – 直接打开模态框：

  <a href="javascript:void(0)" onclick="CookieGuard.open()">Open Privacy</a>

• Reset – 重置同意状态（快捷键：CTRL + SHIFT + X）：

  <a href="javascript:void(0)" onclick="CookieGuard.reset()">Reset Privacy</a>

实时演示

尝试 Cookie Guard 实际运行效果: Cookie Guard Demo – 查看同意处理、语言支持以及第三‑方脚本拦截。

由 Joseba Mirena 用 ❤️ 制作