可通过 localstorage 记录广告展示次数并结合时间戳控制频次，需确保广告 id 唯一、数据结构合理、读写原子性，并做好过期清理与兼容性兜底。
可以通过 localStorage 记录每个广告的展示次数，结合时间戳判断是否过期，再配合业务逻辑控制单日/单会话内展示频次。关键在于标识唯一性、次数累加、过期清理和读写原子性处理。
广告唯一标识与数据结构设计
每个广告需有稳定、全局唯一的 ID（如 ad_12345 或哈希后的字符串），避免用 DOM ID 或临时变量。推荐将数据存为对象，键为广告 ID，值为包含次数和时间戳的对象：
"ad_banner_home": { "count": 3, "lastTime": 1717028456000 },
"ad_video_sidebar": { "count": 1, "lastTime": 1717029112000 }
}
这样便于统一管理，也支持后续扩展（如加入最大频次、生效时段等字段）。
读取、累加与写入的原子操作
localStorage 本身无锁机制，高并发下可能因异步读写导致计数偏差。实际中虽少见，但仍建议按“读 → 判断 → 修改 → 写”四步闭环处理：
- 用
JSON.parse(localStorage.getItem('adImpressions') || '{}')安全读取 - 检查该广告是否存在；若存在，验证
lastTime是否在有效周期内（如 24 小时） - 若未超限：次数 +1，更新
lastTime为当前Date.now() - 若超限或首次展示：设
count: 1，lastTime为当前时间 - 最后统一
localStorage.setItem('adImpressions', JSON.stringify(data))
频率策略与过期控制示例
比如限制「同一广告每天最多展示 3 次」，可在判断时加入：
const now = Date.now();const dayMs = 24 * 60 * 60 * 1000;
const ad = data[adId] || { count: 0, lastTime: 0 };
const isSameDay = (now - ad.lastTime)
if (isSameDay && ad.count >= 3) {
return false; // 不展示
}
// 否则允许展示并更新
注意：仅靠时间差不够严谨（如跨天凌晨刷新），如需强精度，可存储日期字符串 "2024-05-30" 并比对，但多数场景时间戳已足够。
兜底与兼容性注意事项
localStorage 可能不可用（隐私模式、禁用 JS、配额超限）。务必包裹 try-catch，并提供降级方案：
- 捕获
QuotaExceededError或SecurityError，记录错误但不阻断广告渲染 - 降级为内存缓存（页面生命周期内有效），适合单页应用短期控制
- 服务端同步频次（通过上报 + token 标识用户）作为长期补充，localStorage 仅作前端快速拦截
- 避免存储敏感信息或大量广告数据，单条建议不超过 1KB
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
