如何实现收藏按钮将卡片添加至favorites.html页面？

要实现点击按钮将卡片添加到独立收藏页面，你需要通过本地存储保存卡片数据，再在收藏页面读取并渲染这些数据，仅靠页面跳转无法传递卡片信息。以下是具体实现步骤：

1. 主页面（index.html）添加收藏逻辑 #

先给卡片和按钮添加标识，再编写JavaScript处理收藏逻辑：

<div class="row">
  <div class="col s12 m6">
    <!-- 给卡片加唯一ID标识，避免重复收藏 -->
    <div class="card" data-card-id="sample-1">
      <div class="card-image">
        <img src="images/sample-1.jpg">
        <span class="card-title">Card Title</span>
        <!-- 给按钮加类名，方便绑定事件 -->
        <a class="btn-floating halfway-fab waves-effect waves-light red favorite-btn">
          <i class="material-icons">add</i>
        </a>
      </div>
      <div class="card-content">
        <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
      </div>
    </div>
  </div>
</div>

<script>
// 绑定所有收藏按钮的点击事件
document.querySelectorAll('.favorite-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    // 获取当前按钮所属的卡片
    const card = this.closest('.card');
    // 提取卡片的核心数据
    const cardData = {
      id: card.dataset.cardId,
      imgSrc: card.querySelector('.card-image img').src,
      title: card.querySelector('.card-title').textContent,
      content: card.querySelector('.card-content p').textContent
    };

    // 从localStorage读取已收藏的卡片，无数据则初始化空数组
    let favorites = JSON.parse(localStorage.getItem('favoriteCards')) || [];
    
    // 检查是否已收藏，避免重复添加
    const isDuplicate = favorites.some(item => item.id === cardData.id);
    if (!isDuplicate) {
      favorites.push(cardData);
      // 更新localStorage中的收藏数据
      localStorage.setItem('favoriteCards', JSON.stringify(favorites));
      // 反馈用户：按钮图标改为已收藏状态
      this.querySelector('i').textContent = 'check';
      alert('已添加到收藏');
    } else {
      alert('该卡片已在收藏列表中');
    }

    // 跳转到收藏页面
    window.location.href = 'favorites.html';
  });
});
</script>

2. 收藏页面（favorites.html）实现渲染逻辑 #

在收藏页面读取localStorage中的数据，动态生成收藏的卡片：

<!-- 准备卡片容器 -->
<div class="row" id="favorites-container"></div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const container = document.getElementById('favorites-container');
  // 获取本地存储的收藏数据
  const favorites = JSON.parse(localStorage.getItem('favoriteCards')) || [];

  // 无收藏数据时显示提示
  if (favorites.length === 0) {
    container.innerHTML = '<p class="col s12 center-align">暂无收藏的卡片</p>';
    return;
  }

  // 遍历数据，生成卡片HTML并插入容器
  favorites.forEach(card => {
    const cardHtml = `
      <div class="col s12 m6">
        <div class="card" data-card-id="${card.id}">
          <div class="card-image">
            <img src="${card.imgSrc}">
            <span class="card-title">${card.title}</span>
            <!-- 可选：添加删除收藏按钮 -->
            <a class="btn-floating halfway-fab waves-effect waves-light red remove-btn">
              <i class="material-icons">delete</i>
            </a>
          </div>
          <div class="card-content">
            <p>${card.content}</p>
          </div>
        </div>
      </div>
    `;
    container.innerHTML += cardHtml;
  });

  // 可选：实现删除收藏功能
  document.querySelectorAll('.remove-btn').forEach(btn => {
    btn.addEventListener('click', function() {
      const card = this.closest('.card');
      const cardId = card.dataset.cardId;
      // 过滤掉要删除的卡片
      const updatedFavorites = favorites.filter(item => item.id !== cardId);
      localStorage.setItem('favoriteCards', JSON.stringify(updatedFavorites));
      // 移除页面上的卡片元素
      card.parentElement.remove();
      // 无收藏时更新提示
      if (updatedFavorites.length === 0) {
        container.innerHTML = '<p class="col s12 center-align">暂无收藏的卡片</p>';
      }
    });
  });
});
</script>

核心说明 #

• 使用localStorage存储收藏数据：它能在浏览器关闭后保留数据，适合前端本地存储需求；
• 每个卡片的data-card-id用于唯一标识卡片，避免重复收藏和精准删除；
• 点击收藏按钮后，既可以选择跳转到收藏页面，也可以留在当前页面给用户提示。

内容的提问来源于stack exchange，提问作者Kristen davis