纯HTML无法实现真正的商品收藏列表，因其仅负责静态结构展示，不具备状态存储、用户区分和网络通信能力；必须结合JavaScript与后端（如Node.js/PHP）+数据库才能完成登录识别、多端同步等核心功能。
HTML 本身不能实现商品收藏列表的“持久化”或“用户级状态”，它只是静态结构；真正能保存收藏、区分用户、同步数据，必须配合 JavaScript（前端交互）和后端（如 PHP/Node.js）+ 数据库存储。
为什么纯 HTML 写不了真正的收藏列表
HTML 是标记语言，只负责描述页面长什么样。点击“收藏”按钮后：
- 如果只用
<input type="checkbox">或改个class，刷新页面就丢——没地方存 - 所有用户看到的都是同一份 HTML，无法区分“张三收藏了 iPhone，李四收藏了 AirPods”
- 没有网络请求能力，没法把收藏动作发给服务器
最小可行的前端收藏交互（localStorage 版）
适合单机演示、原型验证或完全离线场景，不跨设备、不登录也能记住当前浏览器的操作：
用 localStorage 存一个数组，比如 ["prod_1001", "prod_1005"]，再配合 DOM 操作更新 UI：
立即学习“前端免费学习笔记（深入）”；
function toggleFavorite(productId) {
let favs = JSON.parse(localStorage.getItem('favorites') || '[]');
const idx = favs.indexOf(productId);
if (idx === -1) {
favs.push(productId);
} else {
favs.splice(idx, 1);
}
localStorage.setItem('favorites', JSON.stringify(favs));
updateFavoriteButtons(); // 刷新所有「已收藏」图标状态
}
关键点：
- 每次操作都
getItem→ 解析 → 修改 →setItem，别漏JSON.stringify - 用字符串 ID（如
"prod_123"）而不用 DOM 元素引用，否则序列化会失败 -
localStorage容量约 5–10MB，但它是同源、同浏览器、同用户共享的——换浏览器或清缓存就没了
上线项目必须走后端 API 的原因
真实电商的心愿单要满足：登录态识别、多端同步、库存联动、分享链接、促销计算……这些 HTML + localStorage 根本做不到：
- 收藏接口通常是
POST /api/favorites（加）和DELETE /api/favorites/{id}（删） - 前端 JS 调用时需带用户 token，后端校验权限并写入数据库（如 MySQL 的
user_favorites表） - 服务端返回最新收藏数或完整列表，前端再渲染 —— 避免本地状态和服务器不一致
- 别在 HTML 模板里硬编码用户数据，
<div data-user-id="123">这种容易被爬或伪造
HTML 结构怎么写才利于后续扩展
别为了“好看”牺牲语义和可操作性。收藏列表的 HTML 应聚焦三点：可识别、可绑定、可降级：
<ul class="wishlist-list">
<li data-product-id="prod_2004" data-sku="SKU-889">
<button type="button" class="btn-fav" aria-pressed="false">
<span class="icon-heart"></span> 收藏
</button>
<h3>无线降噪耳机</h3>
<p class="price">¥899</p>
</li>
</ul>
要点：
- 用
data-product-id而不是靠 class 名或顺序取 ID，避免 JS 绑定错乱 -
aria-pressed为无障碍支持，也方便 CSS 用[aria-pressed="true"]控制样式 - 避免在 HTML 里写内联 JS（如
onclick="toggle(...)"），统一用事件委托绑定 - 如果 JS 失败，按钮至少还能显示文字，不依赖图标字体或 SVG 加载
真正卡住人的从来不是怎么画个爱心图标，而是收藏状态在页面跳转、多标签页、弱网重试、用户登出再登录时是否一致——这些全靠前后端协作的逻辑兜底，不是改几个 class 就能解决的。
