成品网站可以在商品、文章或其他详情卡片上增加“收藏”按钮，并提供收藏列表。能修改网站源代码，或能在建站后台添加自定义代码时，可用浏览器本地存储实现基础版；如果收藏需要跟随账号跨设备同步，则还要接入登录状态和服务器接口。动手前，先确认收藏对象的唯一编号、详情地址，以及当前网站是否已有用户账号系统。

先选实现方式：适用条件与准备事项

本地存储：适合不要求登录、只需在当前浏览器保存收藏的网站。数据保存在用户设备上，同一网站、同一浏览器可以读取；换设备、清理浏览器数据或使用其他浏览器后，收藏不会自动同步。

账号同步：适合会员网站或需要在手机、电脑间同步收藏的场景。除前端按钮外，还需后端按登录用户保存收藏记录，并在用户打开页面时读取记录。仅在前端添加按钮，不能实现真正的跨设备同步。

准备时，给每个可收藏对象确定稳定且唯一的 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 控制器、收藏数据表，以及商品/文章前端模板。接口返回成功、数据库记录归属当前账号，且另一台已登录设备能读到相同列表，才表示同步功能完成。

发布前检查：确认收藏和取消都正常

1. 检查按钮位置：打开一条商品或文章详情，确认按钮对应的是当前对象，页面上不同对象的 ID 不重复。
2. 检查添加与取消：点击“收藏”后查看按钮是否变为“已收藏”，刷新页面确认状态仍在；再次点击后，确认状态恢复，列表中该对象也被移除。
3. 检查列表入口：打开收藏列表，确认标题和链接对应正确对象；没有收藏时应显示空状态，而不是空白区域。
4. 按方案检查存储范围：本地存储方案在同一浏览器刷新后应保留收藏；账号方案则用同一账号在另一台设备登录，确认列表同步。若页面报错，优先检查脚本是否加载、按钮属性是否包含正确 ID，以及后端接口是否要求登录。

如果网站只能通过后台配置，先在自定义代码或扩展功能入口尝试添加按钮与脚本；如果平台不开放页面脚本、模板或数据接口，就不能仅靠粘贴前端代码实现可靠收藏，应使用该平台提供的收藏组件，或在允许扩展的环境中接入账号与存储功能。