h5商品收藏功能实现

H5商品收藏功能通常是在前端网页上实现的一种交互体验，用户可以方便地将感兴趣的商品添加到自己的收藏夹。以下是基本的实现步骤：

1. **HTML结构**：创建一个收藏按钮，一般使用`<button>`元素，并给它一个唯一的标识，比如"data-id"属性用于存储商品ID。

<button class="collect-btn" data-id="123">收藏</button>

2. **JavaScript事件处理**：使用JavaScript监听这个按钮的点击事件，通过`addEventListener`方法。

document.querySelector('.collect-btn').addEventListener('click', function() {
  // 收藏操作
});

3. **数据管理**：需要一个本地存储机制，如浏览器的localStorage或cookie，用来保存用户的收藏状态。你可以创建一个对象，键是商品ID，值是一个布尔标志表示是否已收藏。

4. **收藏逻辑**：当用户点击收藏按钮时，检查当前商品是否已被收藏，如果未收藏则添加到本地存储，反之则移除。

function collectItem(itemId) {
  let isCollected = localStorage.getItem(itemId);
  if (!isCollected) {
    localStorage.setItem(itemId, true);
    console.log('已收藏');
  } else {
    localStorage.removeItem(itemId);
    console.log('已取消收藏');
  }
}

5. **更新界面反馈**：根据localStorage中的状态改变按钮图标或文字，显示用户的收藏状态。

以上就是一个基础的H5商品收藏功能的实现，实际应用中可能还会涉及到服务器端的同步以及用户体验优化等。