成品网站添加收藏功能，通常是在商品、文章或案例的详情区放置收藏按钮，并由网站记录访客选中的条目。访客可以先保存感兴趣的商品、教程或作品，之后集中查看或继续操作。实际接入时，关键不只是按钮能否变色，还要看网站是否有稳定的条目编号、用户身份和可保存收藏记录的存储位置。
收藏功能有什么用
对商品网站，收藏可以保存暂时不购买的商品，方便访客回看、比较或等待补货；对资讯站、教程站和作品站，访客可以把文章、教程或作品加入个人收藏，减少再次查找的时间；对案例展示站，收藏则适合保存设计方案、项目案例或服务项目。收藏列表还可以成为站内推荐、订阅提醒等功能的入口，但这些扩展并非基础收藏必需项。
收藏与点赞的用途不同：点赞主要表达态度，收藏重点是个人留存。按钮文案、状态和列表入口应明确表达“加入收藏”与“已收藏”，避免让访客误以为点击会公开评价或直接购买。
功能组成与展示方式
详情区按钮：在商品或文章标题、主图附近显示收藏入口。未收藏时呈现“收藏”，点击后立即切换为“已收藏”；再次点击可取消。按钮应有明确的文字或图标状态，不能只靠颜色区分。
收藏列表：提供个人收藏入口，按加入时间展示名称、缩略图、条目类别和当前状态。点击某条记录可返回对应详情；商品下架、文章删除或案例失效时，应显示不可用提示，或从列表中移除，避免出现无法打开的空记录。
状态同步：同一账号在不同入口或设备登录后，收藏状态应保持一致。访客取消收藏后，按钮和列表都应更新；快速连续点击时要避免重复写入。网络请求失败时，应提示操作未完成，并允许重新尝试。
身份处理：已登录访客适合将记录保存到账号下。游客也可以先在当前浏览器保存，但这类收藏通常只对当前浏览器有效；清理浏览器数据或更换设备后可能无法保留。若希望游客登录后继续使用，可在登录时提供合并临时收藏的逻辑。
常见数据字段与接入要求
下面是一套适用于中小型站点的参考数据结构，字段长度和数量可以根据现有数据库调整。核心原则是每条收藏记录都能对应到一个用户和一个明确的商品、文章或案例。
| 字段 | 示例规格 | 用途 |
|---|---|---|
| user_id | BIGINT UNSIGNED（64位整数） | 关联登录用户；游客模式可改用独立访客标识。 |
| item_type | VARCHAR(24) | 区分商品、文章、案例等条目类别。 |
| item_id | VARCHAR(64) | 保存目标条目的稳定编号，不建议使用标题作为识别依据。 |
| created_at | DATETIME（YYYY-MM-DD HH:MM:SS） | 记录收藏时间，用于排序和后续清理。 |
| 唯一约束 | user_id + item_type + item_id | 避免同一用户重复收藏同一条商品、文章或案例。 |
前端至少需要读取当前条目的收藏状态、提交新增或取消请求，并能加载个人收藏清单。后端则负责校验用户身份、确认目标条目仍然有效、写入或删除记录。常见接口可以按“查询状态、添加收藏、取消收藏、获取清单”划分，例如使用 /api/favorites 作为接口路径；具体请求方式应与网站现有接口规范保持一致。清单接口可默认每次返回20条，并支持按加入时间倒序排列，避免收藏较多时一次加载全部记录。
哪些成品网站适合接入
| 网站现状 | 适配方式 | 需要具备的条件 |
|---|---|---|
| 已有会员登录与商品、文章管理后台 | 优先采用账号收藏，跨设备状态一致。 | 用户编号稳定，商品和文章各有唯一编号，后台允许增加数据表或接口。 |
| 只有静态展示站 | 可用浏览器本地存储保存收藏。 | 接受仅在当前浏览器生效，并说明数据不会自动跨设备同步。 |
| 商品和文章共用一套展示模板 | 按条目类别与编号分别记录。 | 不同类别的编号不会混淆，收藏清单能按类别加载对应详情。 |
| 使用封闭式建站系统 | 通过系统插件、扩展模块或可调用接口接入。 | 系统允许自定义收藏按钮、用户数据读写及个人清单展示。 |
如果现有模板能插入前端组件，但没有账号系统或服务器数据接口，适合做浏览器本地收藏，功能简单、改动较少；如果网站已经有会员中心、后台数据库和商品或文章管理接口，则适合做账号级收藏。若成品系统不开放用户数据写入，单独添加按钮只能改变局部显示，无法可靠保存收藏记录，也无法实现多设备同步。
因此，接入前应先确定访客要收藏的商品、文章或案例，是否必须登录、记录保存在哪里，以及个人清单从哪里进入，再按现有系统能力选择本地存储或账号存储。基础功能做好重复校验、取消同步、空清单提示和失效条目处理，收藏按钮才会从装饰性图标变成真正可用的站点功能。