如何实现点击按钮保存图片并在另一页面展示（仿Instagram书签）

要实现点击按钮收藏图片、跨页面展示收藏内容的功能，我们可以通过localStorage实现跨页面数据持久化，结合DOM操作完成状态切换和内容渲染。以下是具体实现方案：

一、Menu页面代码修改 #

调整原有HTML结构，添加唯一标识和点击事件逻辑：

<section id="container-fluid">
  <div class="row" style="padding: 2px;">
    <!-- 给图片容器添加唯一标识类，方便后续操作 -->
    <div class="col-sm-3 col-over bookmark-item">
      <img class="img-fluid bookmark-img" src="images/cake7.jpg" alt="蛋糕" data-id="cake7">
      <div class="overlay left-overlay">
        <!-- 替换a标签为button，避免默认跳转行为 -->
        <button class="btn btn-light bookmark-btn" data-id="cake7">
          <script src="https://cdn.lordicon.com/xdjxvujz.js"></script>
          <lord-icon src="https://cdn.lordicon.com/wurbjznp.json" trigger="loop" delay="1000" colors="primary:#121331" style="width:32px;height:32px">
          </lord-icon>
        </button>
      </div>
    </div>
    <!-- 可以复制上述结构添加更多图片 -->
  </div>
</section>

<script>
// 页面加载完成后初始化收藏状态
document.addEventListener('DOMContentLoaded', () => {
  const bookmarkBtns = document.querySelectorAll('.bookmark-btn');
  // 从localStorage读取已收藏的图片数据，没有则为空数组
  let savedImages = JSON.parse(localStorage.getItem('bookmarkedImages')) || [];

  // 初始化按钮状态：已收藏的按钮改变图标颜色
  bookmarkBtns.forEach(btn => {
    const imgId = btn.dataset.id;
    if (savedImages.some(img => img.id === imgId)) {
      btn.querySelector('lord-icon').setAttribute('colors', 'primary:#ff6b6b');
    }
  });

  // 绑定收藏/取消收藏点击事件
  bookmarkBtns.forEach(btn => {
    btn.addEventListener('click', function() {
      const imgId = this.dataset.id;
      const targetImg = document.querySelector(`.bookmark-img[data-id="${imgId}"]`);
      const imgInfo = {
        id: imgId,
        src: targetImg.src,
        alt: targetImg.alt
      };

      // 判断当前图片是否已收藏
      const isSaved = savedImages.some(img => img.id === imgId);

      if (isSaved) {
        // 取消收藏：从数组中移除该图片
        savedImages = savedImages.filter(img => img.id !== imgId);
        this.querySelector('lord-icon').setAttribute('colors', 'primary:#121331');
      } else {
        // 添加收藏：将图片信息存入数组
        savedImages.push(imgInfo);
        this.querySelector('lord-icon').setAttribute('colors', 'primary:#ff6b6b');
      }

      // 更新localStorage中的数据
      localStorage.setItem('bookmarkedImages', JSON.stringify(savedImages));
    });
  });
});
</script>

二、Folder页面代码实现 #

创建folder.html，读取并展示已收藏的图片：

<section id="container-fluid">
  <div class="row" id="saved-images-container" style="padding: 2px;">
    <!-- 已收藏图片将动态渲染到这里 -->
  </div>
</section>

<script>
document.addEventListener('DOMContentLoaded', () => {
  const container = document.getElementById('saved-images-container');
  const savedImages = JSON.parse(localStorage.getItem('bookmarkedImages')) || [];

  // 无收藏内容时显示提示
  if (savedImages.length === 0) {
    container.innerHTML = '<p class="col-12 text-center py-5">暂无收藏的图片</p>';
    return;
  }

  // 动态生成已收藏的图片元素
  savedImages.forEach(img => {
    const imgCard = document.createElement('div');
    imgCard.className = 'col-sm-3 col-over';
    imgCard.innerHTML = `
      <img class="img-fluid" src="${img.src}" alt="${img.alt}">
      <div class="overlay left-overlay">
        <button class="btn btn-light remove-btn" data-id="${img.id}">
          <script src="https://cdn.lordicon.com/xdjxvujz.js"></script>
          <lord-icon src="https://cdn.lordicon.com/wurbjznp.json" trigger="loop" delay="1000" colors="primary:#ff6b6b" style="width:32px;height:32px">
          </lord-icon>
        </button>
      </div>
    `;
    container.appendChild(imgCard);
  });

  // 绑定取消收藏事件
  document.querySelectorAll('.remove-btn').forEach(btn => {
    btn.addEventListener('click', function() {
      const imgId = this.dataset.id;
      let savedImages = JSON.parse(localStorage.getItem('bookmarkedImages')) || [];
      // 移除对应图片数据
      savedImages = savedImages.filter(img => img.id !== imgId);
      localStorage.setItem('bookmarkedImages', JSON.stringify(savedImages));
      // 删除页面上的图片元素
      this.closest('.col-sm-3').remove();
      // 如果收藏为空，更新提示
      if (savedImages.length === 0) {
        container.innerHTML = '<p class="col-12 text-center py-5">暂无收藏的图片</p>';
      }
    });
  });
});
</script>

核心说明 #

• 跨页面数据共享：使用localStorage存储收藏数据，同一域名下的Menu和Folder页面可直接读取
• 状态反馈：通过修改图标的颜色区分收藏/未收藏状态，也可替换为不同的lord-icon图标实现更直观的视觉提示
• 图片保留：Menu页面的图片仅标记收藏状态，不会被移除，符合需求
• 扩展性：可通过复制Menu页面的图片容器结构，快速添加更多可收藏的图片

内容的提问来源于stack exchange，提问作者YOUNES Kouda