用 localstorage 记住用户是否已同意协议：页面加载时读取 'agreedtoterms'，值为 'true' 则跳过弹窗；用户点击“同意”后设为 'true'；避免 boolean() 转换导致逻辑错误。
怎么用 localStorage 记住用户是否已同意协议
不存状态的弹窗每次刷新都出现，用户会直接关掉页面。关键不是“弹出来”，而是“只在没同意时弹”。localStorage 是最轻量、兼容性最好（IE8+）的方案。
实操建议：
- 页面加载后先读
localStorage.getItem('agreedToTerms')，若值为'true'，跳过弹窗 - 用户点击“同意”按钮后，执行
localStorage.setItem('agreedToTerms', 'true') - 不要用
Boolean()转换存储值——localStorage只存字符串，Boolean('false')结果是true，会导致逻辑翻车 - 如需支持多协议（隐私政策、服务条款），可用不同 key，比如
'terms_v2024'，避免版本升级后误判
弹窗遮罩层被内容穿透点击怎么办
常见现象：弹窗显示时，背后按钮仍能响应点击，或滚动页面时弹窗错位。本质是 CSS 层级和定位没兜住。
实操建议：
- 遮罩层（
.modal-overlay）必须设position: fixed，且top: 0; left: 0; width: 100vw; height: 100vh; - 给遮罩层加
z-index: 9999（数字够大，避开第三方库干扰），同时确保 body 不设transform或filter——这些会创建新层叠上下文，让 z-index 失效 - 弹窗主体（
.terms-modal）用position: relative或absolute，但z-index必须小于遮罩层 - 移动端记得加
touch-action: none到遮罩层，防止 iOS 滑动穿透
协议内容太长，怎么避免弹窗卡顿或布局崩塌
直接把几万字 HTML 塞进弹窗，首次渲染慢、滚动卡、甚至触发浏览器警告。重点不是“全量加载”，而是“按需呈现”。
实操建议：
- 协议文本用
<iframe src="terms.html"></iframe>外链加载，隔离资源、避免阻塞主页面解析 - 如果必须内嵌，把协议内容包裹在
<div class="terms-content"> 中，并设 <code>max-height: 60vh; overflow-y: auto;，禁止弹窗自身随内容撑高 - 禁用协议区域内的
img、video等资源自动加载：给<img loading="lazy">，或干脆用占位符 + JS 懒加载 - 避免在协议 HTML 里写内联
style或script，它们会重复执行，可能污染全局作用域 - “不同意”不能只是关闭弹窗，必须冻结关键交互：给
body加class="terms-blocked"，再用 CSS 锁定所有表单控件：body.terms-blocked *:not(.terms-modal) { pointer-events: none; } - 在冻结状态下，允许用户再次打开协议查看，但禁止提交、注册、下单等核心动作
- 不要用
location.href = '/deny.html'这类跳转——用户可能误以为网站出错；保持当前页，只强化提示文案和按钮状态即可 - 如果业务强依赖协议同意（如金融类），可配合后端校验：前端同意后发一次
POST /api/terms/accept，后续接口返回403时前端再唤起弹窗
用户点了“不同意”该怎么处理
很多实现直接隐藏弹窗了事，结果用户继续操作——这既不符合 GDPR/《个人信息保护法》要求，也埋下合规风险。
实操建议：
localStorage 就失效了；这时候得靠后端 session 或 JWT payload 来兜底，但前端代码里往往漏掉这个分支。
