成品网站可以在商品、文章或其他详情卡片上增加“收藏”按钮，并提供收藏列表。能修改网站源代码，或能在建站后台添加自定义代码时，可用浏览器本地存储实现基础版；如果收藏需要跟随账号跨设备同步，则还要接入登录状态和服务器接口。动手前，先确认收藏对象的唯一编号、详情地址，以及当前网站是否已有用户账号系统。
先选实现方式：适用条件与准备事项
本地存储：适合不要求登录、只需在当前浏览器保存收藏的网站。数据保存在用户设备上，同一网站、同一浏览器可以读取；换设备、清理浏览器数据或使用其他浏览器后，收藏不会自动同步。
账号同步：适合会员网站或需要在手机、电脑间同步收藏的场景。除前端按钮外，还需后端按登录用户保存收藏记录，并在用户打开页面时读取记录。仅在前端添加按钮，不能实现真正的跨设备同步。
准备时，给每个可收藏对象确定稳定且唯一的 ID，例如商品 ID 或文章 ID；同时确认要修改的位置：通常是商品卡片、文章详情页的操作区，收藏列表则放在“我的收藏”页面或会员中心。若使用建站平台，先查看后台是否提供自定义 HTML/JS、插件或代码片段入口；若无法添加交互代码，需要通过平台支持的扩展方式实现。
基础做法：在页面加入按钮并保存收藏
先在商品卡片或文章详情页的模板中加入按钮，把对象 ID、标题和站内地址写入属性；再在收藏列表所在位置放置一个列表容器。下面是通用示例，属性值需要替换成网站实际数据：
<button type="button" class="favorite-btn"
data-item-id="article-102"
data-item-title="文章标题"
data-item-url="/article/102"
aria-pressed="false">收藏</button>
<ul id="favorite-list"></ul>随后把下面的 JavaScript 放到网站允许添加脚本的位置，例如自定义代码区，或网站前端模板中按钮所在页面的脚本文件。它会处理两项具体操作：点击按钮时加入或取消指定对象；打开收藏列表时显示已保存对象的站内链接。
const FAVORITES_KEY = "site_favorites";
function getFavorites() {
try {
const value = JSON.parse(localStorage.getItem(FAVORITES_KEY) || "[]");
return Array.isArray(value) ? value : [];
} catch (error) {
return [];
}
}
function renderFavoriteButtons() {
const ids = new Set(getFavorites().map((item) => String(item.id)));
document.querySelectorAll(".favorite-btn").forEach((button) => {
const saved = ids.has(String(button.dataset.itemId));
button.setAttribute("aria-pressed", String(saved));
button.textContent = saved ? "已收藏" : "收藏";
});
}
function renderFavoriteList() {
const list = document.querySelector("#favorite-list");
if (!list) return;
list.replaceChildren();
const items = getFavorites();
if (items.length === 0) {
const empty = document.createElement("li");
empty.textContent = "还没有收藏内容";
list.append(empty);
return;
}
for (const item of items) {
const li = document.createElement("li");
const link = document.createElement("a");
const target = new URL(item.url || "/", window.location.origin);
if (target.origin === window.location.origin) {
link.href = target.href;
link.textContent = item.title || String(item.id);
li.append(link);
} else {
li.textContent = item.title || String(item.id);
}
list.append(li);
}
}
document.addEventListener("click", (event) => {
const button = event.target.closest(".favorite-btn");
if (!button || !button.dataset.itemId) return;
const id = String(button.dataset.itemId);
const items = getFavorites();
const exists = items.some((item) => String(item.id) === id);
const next = items.filter((item) => String(item.id) !== id);
if (!exists) {
next.push({
id,
title: button.dataset.itemTitle || id,
url: button.dataset.itemUrl || "/"
});
}
localStorage.setItem(FAVORITES_KEY, JSON.stringify(next));
renderFavoriteButtons();
renderFavoriteList();
});
renderFavoriteButtons();
renderFavoriteList();如果页面模板是动态生成的，把示例中的 ID、标题和地址替换为当前商品或文章的数据字段，不要让多个对象共用同一个 ID。完成后，用户点击“收藏”，按钮应变成“已收藏”；再点一次应恢复为“收藏”。收藏列表中则应出现对应标题，点击标题可返回同站详情页。
需要账号同步时：接入后端收藏记录
若网站已有登录系统，应把收藏写入服务器，而不是只保存在 localStorage。在后端增加“读取当前用户收藏”“添加收藏”“取消收藏”三个处理入口：添加时接收对象 ID，服务端根据登录身份保存用户与对象的关联；取消时删除对应关联；读取时返回该用户已收藏的对象及其标题、详情地址。数据库可为“用户 ID、对象类型、对象 ID”设置唯一约束，避免重复收藏。
前端按钮点击后调用对应接口，并根据接口成功结果更新按钮状态；打开收藏列表时读取当前账号的数据。未登录用户点击时，可跳转登录页或提示登录。操作位置通常是网站后端路由或 API 控制器、收藏数据表，以及商品/文章前端模板。接口返回成功、数据库记录归属当前账号，且另一台已登录设备能读到相同列表，才表示同步功能完成。
发布前检查：确认收藏和取消都正常
- 检查按钮位置：打开一条商品或文章详情，确认按钮对应的是当前对象，页面上不同对象的 ID 不重复。
- 检查添加与取消：点击“收藏”后查看按钮是否变为“已收藏”，刷新页面确认状态仍在；再次点击后，确认状态恢复，列表中该对象也被移除。
- 检查列表入口：打开收藏列表，确认标题和链接对应正确对象；没有收藏时应显示空状态，而不是空白区域。
- 按方案检查存储范围：本地存储方案在同一浏览器刷新后应保留收藏；账号方案则用同一账号在另一台设备登录，确认列表同步。若页面报错，优先检查脚本是否加载、按钮属性是否包含正确 ID，以及后端接口是否要求登录。
如果网站只能通过后台配置，先在自定义代码或扩展功能入口尝试添加按钮与脚本；如果平台不开放页面脚本、模板或数据接口，就不能仅靠粘贴前端代码实现可靠收藏，应使用该平台提供的收藏组件，或在允许扩展的环境中接入账号与存储功能。
