Cookie Notices and Cookie Consent | Cookiepedia

1. 法律法规要求

许多国家和地区的隐私法律要求网站在存储或处理用户数据（包括 Cookies）之前必须获得用户的明确同意：

GDPR（欧盟通用数据保护条例）

• 要求： 如果网站面向欧盟用户，使用 Cookies（尤其是非必要的追踪 Cookies）时必须获得用户同意。
• 影响： 用户需要明确接受或拒绝 Cookies（通常通过弹窗或横幅实现）。

CCPA（加州消费者隐私法）

• 要求： 网站需告知用户其数据如何被收集，并提供选择退出数据出售或共享的功能。
• 影响： 通常会显示隐私声明通知用户，提供隐私设置入口。

---

2. 浏览器角色

浏览器并没有主动弹出 Cookies 和隐私的确认框，但它们：

• 提供了 API 支持： 浏览器支持存储 Cookies、localStorage、sessionStorage 等技术，网站通过这些工具实现数据存储。
• 内置隐私功能： 现代浏览器（如 Chrome、Firefox、Safari）提供隐私设置，允许用户阻止第三方 Cookies 或清理 Cookies。
• 监控隐私规范： 浏览器厂商（如 Google Chrome 的计划）正在逐步限制第三方 Cookies 的使用（如 Privacy Sandbox 项目）。

---

3. 开发者实现

Cookies 和隐私确认是由网站开发者实现的。常见实现方式：

• Cookies 横幅通知： 页面底部或顶部显示通知，提示用户网站使用 Cookies。
• 选择同意/拒绝： 用户点击同意后，网站才会存储非必要 Cookies。
• 动态加载： 网站在用户同意之前，不加载追踪代码或营销工具。

实现时通常会用到以下技术：

• JavaScript Cookies 库： 例如 js-cookie。
• 专用插件或服务： 如 OneTrust、Cookiebot 等，专门用于管理隐私和 Cookies 合规。

---

4. 为什么需要用户确认

用户确认的原因在于：

1. 保护用户隐私： 避免未经同意收集用户数据。
2. 法律合规： 遵守 GDPR、CCPA 等隐私法规。
3. 增强信任： 让用户了解网站如何处理其数据。

---

5. 用户可以选择的方式

用户可以通过浏览器隐私设置，进一步控制 Cookies：

• 禁用第三方 Cookies： 阻止跨网站追踪。
• 清理 Cookies： 定期清除浏览器存储的 Cookies。
• 隐身模式： 浏览器不会保存 Cookies 等数据。

弹窗确认后的常见逻辑

1. 获取用户选择

   • 用户选择 “接受” 或 “拒绝”。
   • 根据用户选择调用对应的处理函数。

2. 存储用户选择

   • 将用户选择存储在浏览器的 localStorage、sessionStorage 或 Cookies 中，以避免重复弹窗。

3. 加载相关功能

   • 接受： 如果用户同意，加载相关 Cookies 或服务（如追踪代码、分析工具等）。
   • 拒绝： 如果用户拒绝，阻止非必要的 Cookies 或功能。

4. 更新页面状态

   • 根据用户的选择动态调整页面状态或显示通知。

实现示例

1、vue3

<template>
  <div v-if="!userChoice" class="cookie-banner">
    <p>We use cookies to improve your experience. By continuing, you accept our privacy policy.</p>
    <button @click="handleAccept">Accept</button>
    <button @click="handleReject">Reject</button>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";

// 存储用户选择的键名
const COOKIE_CONSENT_KEY = "cookieConsent";

// 用户选择状态
const userChoice = ref<string | null>(null);

// 检查用户选择是否已经存储
onMounted(() => {
  userChoice.value = localStorage.getItem(COOKIE_CONSENT_KEY);
});

// 接受逻辑
const handleAccept = () => {
  localStorage.setItem(COOKIE_CONSENT_KEY, "accepted");
  userChoice.value = "accepted";
  enableCookies(); // 启用相关功能
};

// 拒绝逻辑
const handleReject = () => {
  localStorage.setItem(COOKIE_CONSENT_KEY, "rejected");
  userChoice.value = "rejected";
  disableCookies(); // 阻止相关功能
};

// 启用 Cookies 和相关功能
function enableCookies() {
  console.log("Cookies enabled");
  // 示例：加载 Google Analytics
  window.dataLayer = window.dataLayer || [];
  function gtag() {
    window.dataLayer.push(arguments);
  }
  gtag("js", new Date());
  gtag("config", "YOUR_GOOGLE_ANALYTICS_ID");
}

// 禁用 Cookies 和相关功能
function disableCookies() {
  console.log("Cookies disabled");
  // 清除所有非必要的 Cookies
  document.cookie.split(";").forEach((cookie) => {
    const [name] = cookie.split("=");
    document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
  });
}
</script>

<style scoped>
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 1rem;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1000;
}
button {
  margin-left: 10px;
  padding: 0.5rem 1rem;
  border: none;
  cursor: pointer;
}
</style>

直接把他挂载到 App.vue

<template>
  <div id="app">
    <!-- 页面内容 -->
    <h1>Welcome to Our Website</h1>
    <p>Enjoy browsing our application!</p>

    <!-- 引入 CookieConsent 组件 -->
    <CookieConsent />
  </div>
</template>

<script lang="ts" setup>
import CookieConsent from "./components/CookieConsent.vue";
</script>

<style>
/* App 全局样式 */
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

2、 纯Html 

<div id="cookie-consent" class="cookie-banner">
  <p>We use cookies to improve your experience. By continuing, you accept our privacy policy.</p>
  <button id="accept-cookies">Accept</button>
  <button id="reject-cookies">Reject</button>
</div>

document.addEventListener("DOMContentLoaded", () => {
  const cookieConsentBanner = document.getElementById("cookie-consent");

  // 检查用户是否已经做出选择
  const userChoice = localStorage.getItem("cookieConsent");
  if (userChoice) {
    cookieConsentBanner.style.display = "none";
    return;
  }

  // 用户点击“接受”按钮
  document.getElementById("accept-cookies").addEventListener("click", () => {
    localStorage.setItem("cookieConsent", "accepted");
    cookieConsentBanner.style.display = "none";
    enableCookies(); // 启用相关功能
  });

  // 用户点击“拒绝”按钮
  document.getElementById("reject-cookies").addEventListener("click", () => {
    localStorage.setItem("cookieConsent", "rejected");
    cookieConsentBanner.style.display = "none";
    disableCookies(); // 阻止相关功能
  });
});

// 启用 Cookies 和相关功能
function enableCookies() {
  console.log("Cookies enabled");
  // 示例：加载 Google Analytics
  window.dataLayer = window.dataLayer || [];
  function gtag() {
    dataLayer.push(arguments);
  }
  gtag("js", new Date());
  gtag("config", "YOUR_GOOGLE_ANALYTICS_ID");
}

// 禁用 Cookies 和相关功能
function disableCookies() {
  console.log("Cookies disabled");
  // 清除所有非必要的 Cookies
  document.cookie.split(";").forEach((cookie) => {
    const [name] = cookie.split("=");
    document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
  });
}