Cookie 同意横幅增强版 - 带偏好设置面板

Cookie 同意横幅是网站向访问者展示的提示栏，用于告知网站使用了 Cookie 技术，并在必要时征得用户同意。根据GDPR（欧盟通用数据保护条例）和CCPA（加州消费者隐私法案）等隐私法规，网站必须在设置非必要 Cookie 之前获得用户明确同意。合规的横幅应包含清晰的选项：接受全部、拒绝非必要、以及自定义偏好设置。这不仅是法律要求，也有助于建立用户信任。

Cookie 通常分为四类：

① 必要 Cookie：网站运行所必需，如会话保持、购物车功能、安全验证。无需用户同意即可使用。
② 功能 Cookie：记住用户偏好，如语言选择、地区设置，提供个性化体验。需要用户同意。
③ 分析/性能 Cookie：收集匿名访问数据，帮助改进网站内容和性能。需要用户同意。
④ 广告/营销 Cookie：追踪用户行为以展示相关广告，可能涉及第三方数据共享。需要用户明确同意。

了解这些分类有助于您在偏好设置面板中做出明智的选择。

GDPR 要求 Cookie 同意必须满足以下条件：
• 明确告知：清楚说明使用了哪些 Cookie 及其用途。
• 主动同意：不能使用预选框，用户必须主动做出选择（Opt-in）。
• 细化选择：用户应能按类别选择接受或拒绝不同类型的 Cookie。
• 易于撤回：用户应能随时更改偏好，撤回同意与给予同意一样简单。
• 记录保存：网站应保存用户的同意记录以备审查。
• 不捆绑服务：不能因为用户拒绝非必要 Cookie 而拒绝提供服务。

是的！生成的代码是一个独立的完整 HTML 文件，包含 CSS 样式和 JavaScript 逻辑。它使用 Bootstrap 5.3 CDN 作为样式基础，并实现了完整的 Cookie 同意流程：横幅展示、偏好设置面板、用户选择存储（localStorage）、以及选择后的行为处理。您可以直接将代码嵌入到您的网站中，并根据需要调整文案、颜色和 Cookie 类别。代码中的window.applyCookiePreferences函数是一个钩子，您可以扩展它来实际控制网站中的 Cookie 加载逻辑。

在生成的代码中，Cookie 类别定义在 JavaScript 的cookieCategories数组中。您可以修改每个类别的id、name、description和required属性。HTML 模态框中的类别卡片也需要同步更新。此外，CSS 变量（--ct-primary等）可用于快速调整配色方案以匹配您的品牌。工具预览区上方的配置选项（位置、主题、主色调）也能帮助您在生成代码前预览效果。

不会。一旦用户做出选择（接受全部、拒绝非必要或保存自定义偏好），系统会将选择记录存储到浏览器的localStorage中。在记录有效期内（默认365天），Cookie 横幅将不再显示。用户可以通过网站底部通常提供的"Cookie 设置"链接重新打开偏好设置面板来修改选择。如果用户清除浏览器数据，横幅会重新出现以重新获取同意。本工具也提供了"重置演示"按钮来模拟这一行为。

本工具生成的 Cookie 横幅完全响应式。在移动设备上，横幅会自动切换为垂直布局：图标和文字在上方，操作按钮在下方以堆叠方式排列，确保在小屏幕上也能清晰展示所有选项。偏好设置面板在移动端会以接近全屏的方式展示，保证良好的触控体验。您可以在预览区调整浏览器窗口大小来测试响应式效果。

不会影响网站的基本功能。必要 Cookie（如会话管理、安全令牌）始终启用，确保网站正常运行。拒绝的只是非必要类别：功能 Cookie（偏好记忆）、分析 Cookie（流量统计）和广告 Cookie（个性化广告）。这意味着某些增强功能（如记住语言偏好）将不可用，但核心浏览体验不受影响。这符合隐私优先设计（Privacy by Design）的原则。