当前位置：首页 > article >正文

浏览器要求用户确认 Cookies Privacy（隐私相关内容）是基于隐私法规的要求,VUE 实现，html 代码

article 2024/12/21 23:47:59

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. 为什么需要用户确认

用户确认的原因在于：

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

5. 用户可以选择的方式

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

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

弹窗确认后的常见逻辑

获取用户选择
- 用户选择 “接受” 或 “拒绝”。
- 根据用户选择调用对应的处理函数。
存储用户选择
- 将用户选择存储在浏览器的 localStorage、sessionStorage 或 Cookies 中，以避免重复弹窗。
加载相关功能
- 接受： 如果用户同意，加载相关 Cookies 或服务（如追踪代码、分析工具等）。
- 拒绝： 如果用户拒绝，阻止非必要的 Cookies 或功能。
更新页面状态
- 根据用户的选择动态调整页面状态或显示通知。

实现示例

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=/;`;
  });
}

查看全文

http://www.kler.cn/a/445732.html