Forem项目中可关闭广告牌的持久化状态管理方案

在Forem社区平台中，广告牌(billboard)系统是重要的内容展示组件。当前系统存在一个用户体验问题：虽然部分广告牌可以被用户关闭，但这种关闭状态不会被持久化保存。这意味着用户下次访问时，相同的广告内容会再次出现，特别是在用户登录状态下，这种重复展示会降低用户体验。

问题背景

Forem现有的广告牌系统允许用户关闭某些广告内容，但这种关闭行为仅作用于当前会话。系统没有记录用户的关闭操作，导致以下问题：

1. 对于未登录用户，虽然临时关闭可以接受，但频繁重复展示相同内容仍会影响体验
2. 对于已登录用户，系统无法记住用户的关闭偏好，导致相同广告反复出现
3. 缺乏统一的关闭状态管理机制，不利于广告投放效果的统计和分析

技术解决方案

客户端存储方案

作为最小可行方案(MVP)，我们首先采用客户端存储来实现关闭状态的持久化：

1. 唯一标识符机制：为每个可关闭广告牌分配一个"dismissal sku"(关闭标识码)，这个标识码可以跨多个广告位和变体使用
2. 本地存储：使用浏览器本地存储(localStorage或sessionStorage)记录用户关闭的广告标识
3. 状态检查：广告牌显示前检查本地存储中是否存在对应的关闭标识，决定是否渲染

这种方案的优势在于：

• 实现简单，无需后端改动
• 立即生效，适用于所有用户场景
• 沿用现有技术模式(如"展示横幅"的实现方式)

未来扩展方案

虽然客户端方案能快速解决问题，但从长远考虑，完整的解决方案应包括：

1. 服务端存储：为用户关闭行为建立数据库记录
2. 混合验证：同时检查客户端和服务端状态，确保一致性
3. 统计分析：基于关闭数据优化广告投放策略

实现细节

广告牌数据结构增强

需要在广告牌数据结构中新增字段：

• dismissible：布尔值，标识是否可关闭
• dismissal_sku：字符串，唯一关闭标识码

前端交互逻辑

实现流程：

1. 用户点击关闭按钮
2. 前端获取广告牌的dismissal_sku
3. 将标识码存入本地存储
4. 从DOM中移除广告牌元素
5. 后续页面加载时检查存储，跳过已关闭广告

注意事项

1. 命名空间：为避免冲突，存储键名应采用项目前缀
2. 容量限制：考虑本地存储的大小限制，定期清理过期记录
3. 同步机制：为未来服务端同步预留接口

总结

通过为Forem广告牌系统增加基于客户端存储的关闭状态持久化功能，可以显著提升用户体验，特别是对已登录用户。这种实现既保留了现有系统的灵活性，又为未来的扩展奠定了基础。技术团队将首先实现MVP版本，后续再逐步完善为完整的服务端解决方案。