制品网站珍藏按钮怎么做，主题是把现有内容卡片与一个唯一编号关联起来，再用按钮触发“珍藏”和“取缔珍藏”状态变动，最后在珍藏页面读取已保留的数据。没有效户系统的网站能够吓酌浏览器本地存储实现珍藏职能 ；若是网站已经有登录和后端接口，则应把珍藏纪录保留到用户账户中。
一、先确定珍藏按钮放在哪里
通常，珍藏按钮放在文章卡片、商品卡片、案例列表或详情页标题左近。按钮必须能鉴别当前内容，不能只依附页面上的标题文字。最单一的做法是在卡片或按钮上增长一个唯一的内容编号，例如文章 ID、商品 ID 或案例 ID。
<article class="content-card" data-id="article-1001" data-title="网站设计案例">
<h3>网站设计案例</h3>
<a href="/article/1001">查看详情</a>
<button class="collect-btn" type="button" aria-pressed="false">珍藏</button>
</article>
若是制品网站已经使用模板系统，只必要在循环输出卡片时，把数据库中的唯一 ID 输出到 data-id 属性中。详情页也使用一样的 ID，这样列表页、详情页和珍藏页面能力对应统一条内容。
二、给按钮增长珍藏和取缔珍藏作为
在没有后端接口的情况下，能够使用 localStorage 保留珍藏 ID。它适合展示型网站、幼我项目或先验证职能的制品网站。下面的代码会实现四件事：读取已有珍藏、初始化按钮状态、点击后切换状态、保留最新了局。
const STORAGE_KEY = 'site珍藏内容';
function getCollections() {
return JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');
}
function saveCollections(items) {
localStorage.setItem(STORAGE_KEY, JSON.stringify(items));
}
function updateButton(button, active) {
button.textContent = active ? '已珍藏' : '珍藏';
button.setAttribute('aria-pressed', String(active));
button.classList.toggle('is-collected', active);
}
document.querySelectorAll('.collect-btn').forEach(function (button) {
const card = button.closest('[data-id]');
const id = card.dataset.id;
const collections = getCollections();
updateButton(button, collections.includes(id));
button.addEventListener('click', function () {
let current = getCollections();
const exists = current.includes(id);
if (exists) {
current = current.filter(function (item) {
return item !== id;
});
} else {
current.push(id);
}
saveCollections(current);
updateButton(button, !exists);
});
});
代码中的 site珍藏内容 是存储名称，能够改成英文，预防与其他项目使用一样的键名。按钮状态不应只依附文字判断，由于用户可能在页面刷新后沉新进入。页面加载时先读取本地数据，再通过 aria-pressed 和按钮形状显示“已珍藏”状态，履历会更不变。
三、让珍藏按钮在制品网站中正常显示
若是原网站已有按钮形状，能够直接沿用 ；若是没有，必要为默认状态和已珍藏状态增长区别。沉点不是扭转页面整体风格，而是让用户可能当即看出当前内容是否已保留。
.collect-btn {
padding: 6px 12px;
border: 1px solid #d1d5db;
border-radius: 4px;
background: #fff;
color: #333;
cursor: pointer;
}
.collect-btn.is-collected {
border-color: #2563eb;
background: #2563eb;
color: #fff;
}
按钮文字能够使用“珍藏”和“已珍藏”，也能够使用星标或心形图标，但最好保留可识此外文字或辅助标签。点击后不要跳转到其他页面，先在当前页面实现状态反 ；若是必要提醒，能够在按钮左近显示“已参与珍藏”或“已取缔珍藏”。
四、创建单独的珍藏页面
只有珍藏按钮而没有珍藏列表，用户无法查看和治理已保留内容。珍藏页面能够新建一个固定蹊径，例如 /favorites.html，页面中筹备一个列表容器，而后读取本地保留的 ID，再凭据这些 ID 找回内容信息。
<main class="favorites-page">
<h1>我的珍藏</h1>
<div id="favorite-list"></div>
</main>
若是网站内容数量较少，能够在前端筹备一份内容数据 ；若是内容来自接口，则凭据珍藏 ID 要求对应的文章或商品信息。下面是适合静态内容的单一示例：
const contentMap = {
'article-1001': {
title: '网站设计案例',
url: '/article/1001'
},
'article-1002': {
title: '企业官网造作步骤',
url: '/article/1002'
}
};
const list = document.querySelector('#favorite-list');
const ids = getCollections();
if (!ids.length) {
list.textContent = '临时没有珍藏内容';
} else {
ids.forEach(function (id) {
const item = contentMap[id];
if (!item) return;
const link = document.createElement('a');
link.href = item.url;
link.textContent = item.title;
link.className = 'favorite-item';
list.appendChild(link);
});
}
现实项目中不建议持久手工守护 contentMap。更相宜的做法是让珍藏页面向内容接口传递 ID，例如要求“凭据多个 ID 返回内容”的接口，再由接口返回标题、封面、链接和更新功夫。这样新增内容后，珍藏页面不必要再次批改前端代码。
五、有登录系统时改为保留到用户账户
若是制品网站已经支持注册和登录，珍藏纪录应与用户账户绑定。前端点击按钮时，不再只写入 localStorage，而是向服务器发送内容 ID和操作类型。
fetch('/api/favorites', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
contentId: id,
action: exists ? 'remove' : 'add'
})
})
.then(function (response) {
if (!response.ok) throw new Error('珍藏操作失败');
updateButton(button, !exists);
});
后端能够成立一张珍藏关系表，至少保留用户 ID、内容 ID和创建功夫，并为“用户 ID+内容 ID”设置唯一约束。用户打开页面时，先凭据登录身份查问已珍藏内容，再初始化按钮状态。这样用户更换设备或算帐浏览器数据后，珍藏依然可能保留。
未登录用户能够先使用本地珍藏，点击珍藏时再提醒登录 ；也能够在登录成功后，把本地珍藏 ID一次性提交到服务器。具体选择取决于网站现有的登录流程，但前端按钮的状态展示方式能够维持不变。
六、接入实现后的查抄挨次
先在内容列表页点击珍藏，确认按钮变为“已珍藏” ；刷新页面后，状态仍应维持。接着点击取缔珍藏，确认内容从本地纪录或账户纪录中移除。再打开珍藏页面，查抄标题和链接是否正确，并测试多个卡片同时珍藏时是否互不覆盖。
还要查抄详情页和列表页是否使用一样的内容 ID，预防统一内容在分歧页面被鉴别成两笔纪录。移动端必要保障按钮有足够的点击区域，键盘操作时也应可能获得焦点。对于已下线的内容，珍藏页面能够显示“内容已不成用”，或在确认后自动断根对应纪录。
因而，制品网站珍藏按钮的齐全实现蹊径是：在现有内容卡片上参与唯一 ID，绑定珍藏切换事务，吓酌本地存储或后端保留纪录，再造作珍藏列表页面读取这些纪录。幼型网站能够从本处所案起头，占有登录系统的网站则将珍藏数据迁徙到用户账户中。
制品网站珍藏职能是什么 ？用处与根基设置
版权和免责申明
版权申明：凡起源为“交汇点、新华日报及其子报”或电头为“新华报业网”的稿件，均为新华报业网独家版权所有，未经许可不得转载或镜像 ；授权转载必须注明起源为“新华报业网”，并保留“新华报业网”的电头。
免责申明：本站转载稿件仅代表作者幼我概想，与新华报业网无关。稿件内容请读者仅作参考，并自行核实有关信息。
Android版
iPhone版