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

embedded/2024/12/23 21:05:57/

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 Analyticswindow.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");// 清除所有非必要的 Cookiesdocument.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 Analyticswindow.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");// 清除所有非必要的 Cookiesdocument.cookie.split(";").forEach((cookie) => {const [name] = cookie.split("=");document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;});
}


http://www.ppmy.cn/embedded/148169.html

相关文章

libilibi项目总结（18）FFmpeg 的使用

libilibi项目总结（18）FFmpeg 的使用

FFmpeg工具类 import com.easylive.entity.config.AppConfig; import com.easylive.entity.constants.Constants; import org.springframework.stereotype.Component;import javax.annotation.Resource; import java.io.File; import java.math.BigDecimal;Component public c…
阅读更多...
Docker核心概念总结

Docker核心概念总结

容器介绍 Docker 是世界领先的软件容器平台&#xff0c;所以想要搞懂 Docker 的概念我们必须先从容器开始说起。 什么是容器? 先来看看容器较为官方的解释 一句话概括容器&#xff1a;容器就是将软件打包成标准化单元&#xff0c;以用于开发、交付和部署。 容器镜像是轻量…
阅读更多...
使用C语言连接MySQL

使用C语言连接MySQL

库的准备 要使用C语言连接mysql&#xff0c;需要使用mysql官网提供的connect库&#xff0c;可以去官网下载&#xff0c;由于我们要下载到 Linux 操作系统中&#xff0c;也可以使用如下指令进行安装库 sudo apt-get install libmysqlclient-dev MySQL连接C/C的库通常会安装在/us…
阅读更多...
FPGA 16 ，Verilog中的位宽：深入理解与应用

FPGA 16 ，Verilog中的位宽：深入理解与应用

目录 前言 一. 位宽的基本概念 二. 位宽的定义方法
阅读更多...
【Mybatis-Plus】使用步骤 条件构造器 分页模型

【Mybatis-Plus】使用步骤 条件构造器 分页模型

文章目录 Mybatis-Plus使用步骤条件构造器分页模型 Mybatis-Plus MyBatis-Plus&#xff08;简称 MP&#xff09;是一个 MyBatis 的增强工具&#xff0c;在 MyBatis 的基础上只做增强不做改变&#xff0c;为简化开发、提高效率而生。 需要快速搭建 CRUD 接口的应用程序。对于已…
阅读更多...
【Linux打怪升级记 | 问题01】安装Linux系统忘记设置时区怎么办？3个方法教你回到东八区

【Linux打怪升级记 | 问题01】安装Linux系统忘记设置时区怎么办？3个方法教你回到东八区

&#x1f5fa;️博客地图 &#x1f4cd;方法一、timedatectl 命令 &#x1f4cd;方法二、手动链接 /etc/localtime &#x1f4cd;方法三、修改时区变量 在 Linux 系统中&#xff0c;可以通过以下3种方式将系统时区修改为 CST&#xff08;中国标准时间&#xff0c;GMT8 或称 …
阅读更多...
小程序快速实现大模型聊天机器人

小程序快速实现大模型聊天机器人

需求分析&#xff1a; 基于大模型&#xff0c;打造一个聊天机器人&#xff1b;使用开放API快速搭建&#xff0c;例如&#xff1a;讯飞星火&#xff1b;先实现UI展示&#xff0c;在接入API。 最终实现效果如下&#xff1a; 一.聊天机器人UI部分 1. 创建微信小程序&#xff0c…
阅读更多...
设计模式——建造者模式

设计模式——建造者模式

设计模式——建造者模式 目录 设计模式——建造者模式介绍实现结构及工作流程经典实现示例优缺点使用场景 扩展实现示例 总结 介绍 建造者模式&#xff08;Builder Pattern&#xff09;是一种创建型设计模式&#xff0c;它通过将一个复杂对象的构建过程分解成多个简单的步骤&a…
阅读更多...
最新文章

Copyright @ 2022~2023