用localStorage实现广告屏蔽反馈的核心是按广告位标识存状态、加载时查并隐藏、点击关闭时即时同步；推荐以data-ad-id为唯一标识，键名为'ad_closed_'+adId，关闭时写入字符串'true'并立即隐藏，加载时严格比对=== 'true'后添加.ad-hidden类。
用 localStorage 记录用户对广告的屏蔽反馈，核心是“按广告位标识存状态、加载时查并隐藏、点击关闭时即时同步”，不依赖后端，轻量可靠。
给每个广告位分配唯一且稳定的标识
广告容器需有可预测的 ID 或 data 属性，比如：
<div id="ad-banner-home-top" data-ad-id="banner_home_top">…</div>
推荐统一用 data-ad-id 属性作为逻辑标识，避免依赖 ID（ID 可能动态生成或重复）。键名格式建议为 'ad_closed_' + data-ad-id，例如 'ad_closed_banner_home_top'，确保命名清晰、无歧义、易扩展。
关闭操作：点击 × 后立即写入并隐藏
为每个广告的关闭按钮绑定事件，注意三点：
- 调用
event.stopPropagation()，防止点击误触广告跳转 - 执行
localStorage.setItem('ad_closed_' + adId, 'true')—— 必须用字符串 'true'，不用布尔值 - 立即添加隐藏 class（如
ad-hidden）或设display: none，无需刷新页面 - 建议包裹在 try/catch 中，兼容隐私模式下 localStorage 不可用的情况
页面加载时自动读取并应用屏蔽状态
在 DOM 加载完成（如 DOMContentLoaded）后遍历所有带 data-ad-id 的广告容器：
- 读取对应键值：
localStorage.getItem('ad_closed_' + adId) - 严格比较：
=== 'true'（不用== true或JSON.parse()，避免'false'被误判为真） - 命中则添加
ad-hidden类；CSS 中统一定义.ad-hidden { display: none; } - 若广告位较多，可批量处理，避免频繁 DOM 操作
补充建议：兼顾体验与健壮性
实际部署中还需注意：
立即学习“前端免费学习笔记（深入）”；
- 不要在首次访问就预写 localStorage，等用户真实点击关闭后再存，避免污染默认行为
- 如需跨标签页同步（比如用户在新标签关闭同一广告），可监听
storage事件，但注意它不会在当前页触发 - 敏感操作（如上报屏蔽原因）建议用
sendBeacon异步发送，不影响页面卸载 - 不推荐用 localStorage 存大量日志或高频事件；仅用于“开关类”状态，简洁明确
