手把手教你实现美观易用的Cookie同意弹窗

仅对于开放全球访问的站点来说这个有用，但仅允许国内访问的站点来说没有用，因为国内目前还没有这个需求，大部人都不知道有这个。

为什么突然开始折腾Cookie同意弹窗？

上周我的邮箱里多了一封来自Clarity官方的邮件，原本以为是常规的产品更新通知，打开一看，好家伙，内容直接把我CPU干烧了！邮件重点提到，从2025年10月31日起，Microsoft Clarity将在欧洲经济区、英国、瑞士这些地区强制执行Cookie同意要求。这意味着，如果我的网站想在这些地区正常收集数据，使用Clarity的会话录制、漏斗分析等功能，就必须给用户安排上Cookie同意信号。我这小破站虽然流量不算大，但用户群体不是还有华人吗嘛。毕竟没了统计信息啥的也不太好。

Microsoft Clarity是什么？

下图是wordpress中的一款插件，可以查看用户行为热力图，最强大功能是记录访客在你的网站做了什么操作，很接近录屏了

其实，在收到这封邮件之前，我就知道Cookie弹窗是个迟早要面对的问题。随着全球对用户隐私保护的重视程度不断提高，像欧盟的GDPR、加州的CCPA这些法律法规，都对网站使用Cookie提出了严格的要求。简单来说，就是网站不能再偷偷摸摸地收集用户的Cookie信息了，必须先得到用户的明确同意。​比如统计，广告，各种三方涉及用户隐私的功能 等。

但问题来了，怎么设计这个Cookie弹窗，才能既满足法规要求，又不让用户觉得烦呢？我可不想因为一个弹窗，把用户都吓跑了。于是，我开启了漫长的找模板之旅，终于，让我发现了这个宝藏！它的样式清新简洁，没有那些花里胡哨的设计，看起来就很舒服。而且，代码结构也比较清晰，对于我这种开发半吊子来说，稍微修改一下就能适配我的博客风格。于是，我果断把它扒了下来，准备大干一场！

弹窗实现代码

代码来自：https://www.codingnepalweb.com/popup-cookies-consent-box-html-css-javascript/

HTML：原始的SVG图标是谷歌图标，由于部分地区可能拦截，所以直接放在HTML中了

CSS：我去除了字体控制，弹窗改为左下角显示及弹出收入抽屉

JS：这部分主要负责实现Cookie弹窗的显示、隐藏以及Cookie的设置逻辑。原始代码的逻辑很简单，就是在页面加载完成后，检查浏览器的Cookie中是否已经存在codinglab这个标识，如果不存在，就显示Cookie弹窗；当用户点击接受或取消按钮时，隐藏弹窗，并且如果用户点击的是接受按钮，就设置一个名为cookieBy的Cookie，有效期为1个月。

不过，这里要说明一下，这个版本的JS代码实现的功能比较简单，只能控制弹窗的显示和隐藏，以及记录用户是否接受Cookie。对于一些更复杂的场景，比如根据用户的选择禁用非必要的Cookie，或者和后端进行交互，验证用户的同意状态等，它就力不从心了。如果你只是像我一样，做一个简单的个人博客，这个版本的代码基本够用了；但如果你的网站功能比较复杂，涉及到大量的用户数据收集和处理，建议还是结合后端逻辑，或者使用专业的 Cookie管理平台工具来实现更完善的Cookie控制功能。

关键提醒

1. 隐私政策链接要真实可访问，不然不合规
2. 移动端建议为wrapper加max-width: 90%;，避免超宽
3. 代码没有控制其它cookie脚本的功能，需要自己开发，比如依据codinglab的cookie是否存在，决定是否运行指定cookie脚本

偷懒方案推荐

开源神器：CookieConsent（推荐！）地址：https://github.com/orestbida/cookieconsent

为想节省开发时间的开发者，强烈推荐开源项目CookieConsent。其核心优势突出：支持多语言切换，适配全球用户；可按功能/重要性配置层级Cookie（如必要、分析、广告类），平衡用户隐私掌控与网站合规；自带隐私政策生成器，能自动生成合规模板，省去专业撰写的麻烦。它尤其适合需精细化Cookie管理的中大型网站（如电商、资讯平台），助力站长专注核心业务，无需忧心隐私合规问题。（现成的，可自定义样式，但控制其它脚本是否加载做了优化）

谨慎选择：CookieYes（不推荐免费版）地址：https://www.cookieyes.com/

CookieYes是一款知名的Cookie合规管理工具，以零代码体验为核心优势。其可视化编辑器支持拖拽调整弹窗颜色、按钮位置等样式，搭配GDPR、CCPA等合规模板，让非技术用户也能快速生成符合法规的Cookie弹窗。 免费版提供基础功能，但会显示品牌水印且仅限5000页面浏览量，高级功能如多域名支持、合规报表等需付费解锁。 作为谷歌认证的合规合作伙伴，它能自动同步全球隐私法规更新，生成审计所需的同意日志，适合跨境电商、企业网站等对合规性要求高的场景。个人站长若追求性价比可选择免费开源工具，而预算充足且重视品牌形象与复杂合规需求的用户，付费版比定制开发更具成本优势。（反正我不喜欢，）

写在最后：合规是底线，体验是追求

最后，再提醒大家一下，2025年10月31日这个合规大限马上就要到了，还没部署Cookie同意机制的小伙伴们可得抓紧时间了！避免统计等各种功能失效。

原文链接(非王先生笔记发布均为盗版)：https://wxsnote.cn/6484.html