不需要第三方库，用localstorage记录用户选择，配合aria-live和role="region"即可实现合规cookie横幅；关键在于状态真实持久、关闭后彻底隐藏、无障碍可达且禁用逻辑联动脚本执行。
如何用纯HTML+CSS+JS实现可关闭的Cookie横幅
直接给结论：不需要第三方库，用 localStorage 记录用户选择，配合一个带 aria-live 的 div 就能做出符合 WCAG 和 GDPR 基础要求的横幅。关键不是“弹出来”，而是“关掉后真不显示、且下次访问不重复打扰”。
常见错误是只做视觉隐藏（display: none），但没存状态；或者用了 cookie 却没设 SameSite 和 Secure 属性，在 HTTPS 环境下失效。
- 横幅容器必须用
role="region"+aria-label="Cookie consent banner"，否则屏幕阅读器可能跳过 - 按钮文案不能只写“同意”，得明确动作对象，比如
同意使用分析型 Cookie - 关闭按钮建议用
×图标 +aria-label="关闭 Cookie 提示"，别只放一个空button - 首次加载时检查
localStorage.getItem('cookie_consent')，值为"granted"或"denied"才隐藏横幅
为什么 localStorage 比 document.cookie 更适合存同意状态
document.cookie 写入后默认是会随每个请求发往服务端的，而用户是否同意 Cookie 是前端行为决策，没必要也不应该触发后端逻辑；同时它需要手动处理过期、路径、域等参数，稍有遗漏就会导致状态不一致。
localStorage 更轻量、API 直观、不会参与网络请求，只要浏览器没被清除数据，状态就一直有效。GDPR 并不要求必须用 HTTP Cookie 存这个状态 —— 它只要求“用户明确、自由、知情地给出同意”。
- 存值示例：
localStorage.setItem('cookie_consent', 'granted') - 读值后建议加类型校验：
const consent = localStorage.getItem('cookie_consent') === 'granted' - 不要用
localStorage存敏感信息或大量数据，这里只存字符串，完全安全 - 注意 Safari 无痕模式下
localStorage会抛QuotaExceededError，需 try/catch 包裹
点击“仅必要 Cookie”后该禁用哪些脚本
不是简单删掉 Google Analytics 代码就行。真正要控制的是那些会在页面加载时自动执行、且依赖 Cookie 的第三方 SDK：
- 分析类：
gtag.js、analytics.js、plausible.js（需在初始化前判断consent === 'granted'） - 广告/追踪类：
fbq()、ttq.identify()、linkedin Insight Tag - 客服工具：
drift.load()、tawk.to初始化代码 - 注意：像
hotjar这类支持运行时 toggle 的，要用hj('optout')主动退出，不能只跳过加载
最稳妥的做法是把所有非必要脚本包装进一个函数，例如 loadAnalytics()，并在用户点击“同意”后再调用；“仅必要”则跳过调用。别指望靠 CSP 或移除 script 标签来临时拦截 —— 脚本一旦解析执行，就无法回退。
移动端适配和焦点管理容易被忽略的点
横幅在小屏上常被做成底部固定，但 iOS Safari 的地址栏缩放会导致布局抖动；更严重的是，如果用户用键盘导航（比如外接蓝牙键盘），焦点可能卡在横幅外，按 Tab 键直接跳到页脚链接，跳过横幅按钮。
- 横幅容器加
tabindex="-1"，并在显示时用element.focus()把焦点强制移到第一个按钮 - CSS 中避免对横幅用
position: fixed; bottom: 0，改用position: sticky; bottom: 0配合父容器overflow: clip更稳定 - 关闭横幅后，要把焦点恢复到触发横幅的位置（比如
document.body），否则键盘用户会迷失 - 测试时用 Safari 开启“辅助功能 > 键盘导航”，真实走一遍 Tab 流程
真正的难点不在“怎么让它出现”，而在于“怎么让它消失得干净、可逆、无障碍”。很多项目做到最后才发现，用户点了“拒绝”，但热力图脚本还是跑了——因为那个 initHotjar() 函数被写死在了 head 里，根本没包条件判断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
