网站添加访问时 跳出美观易用的 Cookie同意弹窗
网站要加Cookie
同意弹窗了。起因是收到Microsoft Clarity的邮件，说2025年10月31日起欧洲经济区等地区强制要求Cookie同意。
虽然我的站主要面向国内用户，但毕竟也有海外华人访问，Clarity的统计功能还是要用的。这篇文章记录我给网站加Cookie弹窗的完整过程。
仅对于开放全球访问的站点来说这个有用，但仅允许国内访问的站点来说没有用，因为国内目前还没有这个需求，大部人都不知道有这个。
随着全球对用户隐私保护的重视程度不断提高，像欧盟的GDPR、加州的CCPA这些法律法规，
都对网站使用Cookie提出了严格的要求。简单来说，就是网站不能再偷偷摸摸地收集用户的Cookie信息了，
必须先得到用户的明确同意。比如统计，广告，各种三方涉及用户隐私的功能 等。
但问题来了，怎么设计这个Cookie弹窗，才能既满足法规要求，又不让用户觉得烦呢？我可不想因为一个弹窗，
把用户都吓跑了。于是，我开启了漫长的找模板之旅，终于，让我发现了这个宝藏！它的样式清新简洁，
没有那些花里胡哨的设计，看起来就很舒服。而且，代码结构也比较清晰，对于我这种开发半吊子来说，
稍微修改一下就能适配我的博客风格。
弹窗实现代码
代码来自：https://www.codingnepalweb.com/popup-cookies-consent-box-html-css-javascript/
HTML：原始的SVG图标是谷歌图标，由于部分地区可能拦截，所以直接放在HTML中了
<!-- Cookie Consent弹窗HTML --> <div class="wrapper"> <header> <svg viewBox="0 0 1024 1024" aria-hidden="true"> <path d="M160 256A96 96 0 0 1 256 160h512A96 96 0 0 1 864 256v336.384a38.4 38.4 0 0 0-38.144-8 38.464 38.464 0 0 0-25.856-20.416V384h-576v384a32 32 0 0 0 32 32h307.968c2.56 11.392 10.24 20.8 20.48 25.856a38.4 38.4 0 0 0 7.936 38.144H256A96 96 0 0 1 160 768V256zM256 224a32 32 0 0 0-32 32v64h576V256a32 32 0 0 0-32-32H256z" fill="#6172AC"></path> <path d="M670.464 504.512a96 96 0 0 1-109.952-88.32 179.776 179.776 0 0 0-228.096 172.928 179.584 179.584 0 0 0 230.592 172.224v-42.496a38.4 38.4 0 0 1 21.376-34.432 38.272 38.272 0 0 1-1.152-4.224A115.584 115.584 0 1 1 509.632 473.6a160 160 0 0 0 21.952 36.224 29.632 29.632 0 0 0 44.992 38.528c14.912 8.576 31.36 14.848 48.832 18.24a116.48 116.48 0 0 1-0.384 46.976l19.968-19.904a38.4 38.4 0 0 1 39.424-9.28 38.528 38.528 0 0 1 6.656-9.472 178.56 178.56 0 0 0-20.608-70.4z" fill="#387CFF"></path> <path d="M479.744 581.184a32.064 32.064 0 1 1-64.192 0 32.064 32.064 0 0 1 64.192 0zM583.936 646.4a33.088 33.088 0 1 1-66.176 0 33.088 33.088 0 0 1 66.176 0zM616.32 833.664a6.4 6.4 0 0 0 0 9.024l51.264 51.328a6.4 6.4 0 0 0 9.088 0l24.832-24.832a6.4 6.4 0 0 1 10.944 4.48v35.2a6.4 6.4 0 0 0 6.4 6.4h72.576a6.4 6.4 0 0 0 6.4-6.4v-35.2a6.4 6.4 0 0 1 10.944-4.48l24.896 24.832a6.4 6.4 0 0 0 9.024 0l51.328-51.328a6.4 6.4 0 0 0 0-9.024l-24.832-24.896a6.4 6.4 0 0 1 4.48-10.88h35.2a6.4 6.4 0 0 0 6.4-6.4v-72.64a6.4 6.4 0 0 0-6.4-6.4h-35.2a6.4 6.4 0 0 1-4.48-10.88l24.832-24.96a6.4 6.4 0 0 0 0-8.96l-51.328-51.392a6.4 6.4 0 0 0-9.024 0l-24.896 24.896a6.4 6.4 0 0 1-10.88-4.48v-35.2a6.4 6.4 0 0 0-6.4-6.4h-72.64a6.4 6.4 0 0 0-6.4 6.4v35.2a6.4 6.4 0 0 1-10.88 4.48l-24.96-24.896a6.4 6.4 0 0 0-8.96 0l-51.392 51.328a6.4 6.4 0 0 0 0 9.088l24.896 24.832a6.4 6.4 0 0 1-4.48 10.944h-35.2a6.4 6.4 0 0 0-6.4 6.4v72.576a6.4 6.4 0 0 0 6.4 6.4h35.2a6.4 6.4 0 0 1 4.48 10.944l-24.896 24.896z m138.88-8.96a69.568 69.568 0 1 1 0-139.136 69.568 69.568 0 0 1 0 139.2z" fill="#387CFF"></path> </svg> <h2>Cookies 同意</h2> </header> <div class="data"> <p>本网站使用cookies来帮助您在网站上获得更好和更相关的浏览体验。 <a href="/privacy-policy">隐私政策</a></p> </div> <div class="buttons"> <button class="button" id="acceptBtn">接受</button> <button class="button" id="declineBtn">取消</button> </div> </div>
CSS：我去除了字体控制，弹窗改为左下角显示及弹出收入抽屉
/* Cookie Consent 弹窗样式 */
.wrapper {
position: fixed;
bottom: 50px;
left: -370px;
max-width: 345px;
width: 100%;
background: #fff;
border-radius: 8px;
padding: 15px 25px 22px;
transition: left 0.3s ease;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
z-index: 9999;
}
.wrapper.show {
left: 20px;
}
.wrapper header {
display: flex;
align-items: center;
column-gap: 15px;
}
.wrapper header svg {
width: 48px;
height: 48px;
}
.wrapper header h2 {
color: #4070f4;
margin: 0;
}
.wrapper .data {
margin-top: 16px;
}
.wrapper .data p {
color: #333;
margin: 0;
}
.wrapper .data p a {
color: #4070f4;
text-decoration: none;
}
.wrapper .data p a:hover {
text-decoration: underline;
}
.wrapper .buttons {
margin-top: 16px;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.wrapper .buttons .button {
border: none;
color: #fff;
padding: 8px 0;
border-radius: 4px;
background: #4070f4;
cursor: pointer;
width: calc(100% / 2 - 10px);
transition: all 0.2s ease;
}
.wrapper .buttons #acceptBtn:hover {
background-color: #034bf1;
}
.wrapper #declineBtn {
border: 2px solid #4070f4;
background-color: #fff;
color: #4070f4;
}
.wrapper #declineBtn:hover {
background-color: #4070f4;
color: #fff;
}JS：这部分主要负责实现Cookie弹窗的显示、隐藏以及Cookie的设置逻辑。原始代码的逻辑很简单，
就是在页面加载完成后，检查浏览器的Cookie中是否已经存在codinglab这个标识，如果不存在，
就显示Cookie弹窗；当用户点击接受或取消按钮时，隐藏弹窗，并且如果用户点击的是接受按钮，
就设置一个名为cookieBy的Cookie，有效期为1个月。
// 获取DOM元素
const cookieBox = document.querySelector(".wrapper"),
buttons = document.querySelectorAll(".button");
// 执行主函数
const executeCodes = () => {
// 如果cookie中包含codinglab，则返回，不执行下面的代码
if (document.cookie.includes("codinglab")) return;
// 显示cookie弹窗
cookieBox.classList.add("show");
// 为按钮添加点击事件
buttons.forEach((button) => {
button.addEventListener("click", () => {
// 隐藏cookie弹窗
cookieBox.classList.remove("show");
// 如果点击的是"接受"按钮
if (button.id == "acceptBtn") {
// 设置cookie有效期为1个月
// 计算方式：60秒=1分钟，60分钟=1小时，24小时=1天，30天=1个月
document.cookie = "cookieBy= codinglab; max-age=" + 60 * 60 * 24 * 30;
}
});
});
};
// 网页加载时执行函数
window.addEventListener("load", executeCodes);不过，这里要说明一下，这个版本的JS代码实现的功能比较简单，只能控制弹窗的显示和隐藏，
以及记录用户是否接受Cookie。对于一些更复杂的场景，比如根据用户的选择禁用非必要的Cookie，
或者和后端进行交互，验证用户的同意状态等，它就力不从心了。如果你只是像我一样，做一个简单的个人博客，
这个版本的代码基本够用了；但如果你的网站功能比较复杂，涉及到大量的用户数据收集和处理，
建议还是结合后端逻辑，或者使用专业的 Cookie管理平台工具来实现更完善的Cookie控制功能。
以上js仅实现了基本功能，接受和拒绝，控制是否显示，无法直接控制是否允许使用cookie，
不过接受后，cookie会增加名为cookieBy的cookie，用cookieBy来判断其它位置的js是否加载是一个不错的方法
关键提醒
隐私政策
链接要真实可访问，不然不合规
移动端建议为wrapper加max-width: 90%;，避免超宽
代码没有控制其它cookie脚本的功能，需要自己开发，比如依据codinglab的cookie是否存在，决定是否运行指定cookie脚本
偷懒方案推荐
开源神器：CookieConsent
（推荐！）地址：https://github.com/orestbida/cookieconsent
为想节省开发时间的开发者，强烈推荐开源项目
CookieConsent。其核心优势突出：支持多语言切换，适配全球用户；可按功能/重要性配置层级Cookie（如必要、分析、广告类），
平衡用户隐私掌控与网站合规；自带隐私政策生成器，能自动生成合规模板，省去专业撰写的麻烦。
它尤其适合需精细化Cookie管理的中大型网站（如电商、资讯平台），助力站长专注核心业务，
无需忧心隐私合规问题。（现成的，可自定义样式，但控制其它脚本是否加载做了优化）
谨慎选择：CookieYes
（不推荐免费版）地址：https://www.cookieyes.com/
CookieYes是一款知名的Cookie合规
管理工具，以零代码体验为核心优势。其可视化编辑器支持拖拽调整弹窗颜色、按钮位置等样式，
搭配GDPR、CCPA等合规模板，让非技术用户也能快速生成符合法规的Cookie弹窗。
免费版提供基础功能，但会显示品牌水印且仅限5000页面浏览量，高级功能如多域名支持、
合规报表等需付费解锁。 作为谷歌认证的合规合作伙伴，它能自动同步全球隐私法规更新，生成审计所需的同意日志，
适合跨境电商、企业网站等对合规性要求高的场景。个人站长若追求性价比可选择免费开源工具，
而预算充足且重视品牌形象与复杂合规需求的用户，付费版比定制开发更具成本优势。
（反正我不喜欢，广告太频繁了，密码我也忘了，所以不知道他们有没有关闭推送的开关，只能拦截邮件了）
Hackyh'Blog版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！