为什么smartbanner.js横幅关闭后不再出现？hide-ttl与hide-path的Cookie机制深度解析

为什么smartbanner.js横幅关闭后不再出现hide-ttl与hide-path的Cookie机制深度解析【免费下载链接】smartbanner.jsCustomisable and lightweight smart app banner for iOS and Android项目地址: https://gitcode.com/gh_mirrors/smar/smartbanner.jssmartbanner.js 是一款面向 iOS 和 Android 的轻量级智能应用横幅Smart App Banner库只需几行 meta 标签即可在网页顶部渲染出引导用户下载 App 的横幅。很多新手都会遇到同一个困惑为什么点了一次关闭横幅就再也不出现了答案藏在hide-ttl与hide-path两个选项背后的 Cookie 机制里。本文带你从源码角度完整拆解它的记忆原理并给出一张即查即用的配置速查表。先搞懂横幅关闭时到底发生了什么当用户点击横幅上的×按钮时触发的是 src/smartbanner.js 中的handleExitClick它调用exit()方法完成三件事移除事件监听、恢复页面原有位置从 DOM 中删除横幅节点并派发smartbanner.exit事件关键一步——调用Bakery.bake(this.hideTtl, this.hidePath)写入一个 Cookie。而下次页面加载时publish() 会在渲染横幅前先检查如果Bakery.baked为true即 Cookie 中已标记用户已关闭直接返回横幅不再出现这正是关闭后不再出现的根本原因浏览器里留着一条smartbanner_exited1的 Cookie。两个选项的取值逻辑非常简单都定义在 src/smartbanner.js 的 getter 中hideTtl设置了就转成整数毫秒数没设置则为falsehidePath设置了就用你给的值没设置时默认是/整站生效。这两个值分别对应 Cookie 的expires有效期和path生效范围下面逐一拆解。hide-path用 Cookie 的 path 决定关闭管多宽写入 Cookie 的核心代码在 src/bakery.js默认情况下不配置hide-pathCookie 以path/写入对整站所有页面生效用户在任何一个页面关闭横幅其他页面也不会再出现如果你只想让关闭行为局限在某个目录下可以配置更窄的路径例如meta namesmartbanner:hide-path content/shop这样 Cookie 只会在/shop及其子路径下被读取用户访问/blog等其他路径时横幅会重新出现。 记忆口诀path 决定横幅被忘记的空间范围——/是全站/xxx是局部。官方文档中对这一行为的描述可参考 README.md 的 Path-designated close 小节。hide-ttl用 Cookie 的 expires 决定关闭管多久hide-ttl的单位是毫秒对应官方文档 README.md 中的 Time-limited close 小节。它的处理链路是src/smartbanner.js 的hideTtlgetter 把 meta 标签的值解析成整数src/bakery.js 的getCookieExpiresString用当前时间 hideTtl计算出过期时间生成expires...字符串如果没有设置hide-ttlbake()就不写 expires 属性——此时是一条会话 Cookie只持续到浏览器或标签页关闭为止。典型配置示例!-- 关闭后 10 秒内横幅不再出现10 秒后重新显示 -- meta namesmartbanner:hide-ttl content10000几个常用数值帮你建立量级感hide-ttl 值含义1000010 秒后重新出现864000001 天后重新出现31536000000约 1 年后重新出现单元测试 test/spec/bakery_spec.js 中还演示了如何用一个约 30 天的毫秒值生成过期时间可作为长期关闭的参考。Bakery一个包办Cookie 读写的小类Bakery 是整个机制的心脏只有 4 个静态方法却承担了全部 Cookie 工作bake(hideTtl, hidePath)写入smartbanner_exited1并附带可选的 expires 与 pathbaked用正则从document.cookie中读出该值等于1即返回true是横幅认账的唯一依据unbake()把过期时间设到 1970 年 1 月 1 日从而删除这条 Cookie对应 src/bakery.jsgetCookieExpiresString(hideTtl)生成 GMT 格式的过期时间字符串。这种烘焙 / 解冻 / 反烘焙的拟人化命名也暗示了设计意图横幅像面包一样被烤熟记住用户关闭过期后自然失效。四种组合速查表想达到什么效果就怎么配期望效果hide-ttlhide-path结果本次会话内不再出现最常用不配置不配置默认/整站关闭横幅关闭浏览器后恢复隔段时间重新出现拉新再触达如86400000不配置24 小时后横幅重新出现只在当前栏目关闭不配置如/shop访问其他路径时横幅照常出现长期关闭、接近永久31536000000不配置一年内整站不再出现⚠️ 常见踩坑hide-ttl填10并不是10 秒而是10 毫秒几乎等于立即重新出现单位务必用毫秒。调试技巧3 步定位横幅去哪了查看 Cookie打开浏览器开发者工具 → Application → Cookies找到smartbanner_exited检查它的Value、Path和Expires三栏即可直接对应本文讲的两个选项手动解冻在开发者工具中删除该 Cookie 后刷新页面横幅立刻回归监听事件项目派发了smartbanner.init、smartbanner.view、smartbanner.clickout、smartbanner.exit四类事件见 README.md 的 Events 小节可以在smartbanner.exit中打点确认 Cookie 是在用户点击关闭的瞬间写入的。如果你开启了 API 模式smartbanner:api设为yes还可以在代码里直接调用publish()手动展示横幅方便做 A/B 测试。总结一句话记住整个机制关闭横幅 写一条smartbanner_exited1的 Cookie之后每次publish()都会先验票hide-path管空间Cookie 的 path 决定关闭行为覆盖整站还是某个目录hide-ttl管时间毫秒级的 Cookie 过期时间不设置则只存活到会话结束核心实现全部集中在 src/bakery.js 与 src/smartbanner.js 中配合 test/spec/bakery_spec.js 的测试用例几分钟就能读透。理解了这套机制你既可以放心让横幅闭嘴也能按运营节奏让它准点回归。【免费下载链接】smartbanner.jsCustomisable and lightweight smart app banner for iOS and Android项目地址: https://gitcode.com/gh_mirrors/smar/smartbanner.js创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考