网站备案幕布拍照,上海seo整站优化,权威的手机网站制作,汕头网站建设公司哪个好Cookie Notices and Cookie Consent | Cookiepedia 1. 法律法规要求
许多国家和地区的隐私法律要求网站在存储或处理用户数据#xff08;包括 Cookies#xff09;之前必须获得用户的明确同意#xff1a;
GDPR#xff08;欧盟通用数据保护条例#xff09;
要求#xff…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
templatediv v-if!userChoice classcookie-bannerpWe use cookies to improve your experience. By continuing, you accept our privacy policy./pbutton clickhandleAcceptAccept/buttonbutton clickhandleRejectReject/button/div
/templatescript langts setup
import { ref, onMounted } from vue;// 存储用户选择的键名
const COOKIE_CONSENT_KEY cookieConsent;// 用户选择状态
const userChoice refstring | 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}; expiresThu, 01 Jan 1970 00:00:00 UTC; path/;;});
}
/scriptstyle 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
templatediv idapp!-- 页面内容 --h1Welcome to Our Website/h1pEnjoy browsing our application!/p!-- 引入 CookieConsent 组件 --CookieConsent //div
/templatescript langts setup
import CookieConsent from ./components/CookieConsent.vue;
/scriptstyle
/* App 全局样式 */
#app {font-family: Avenir, Helvetica, Arial, sans-serif;text-align: center;color: #2c3e50;margin-top: 60px;
}
/style2、 纯Html
div idcookie-consent classcookie-bannerpWe use cookies to improve your experience. By continuing, you accept our privacy policy./pbutton idaccept-cookiesAccept/buttonbutton idreject-cookiesReject/button
/divdocument.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}; expiresThu, 01 Jan 1970 00:00:00 UTC; path/;;});
}
