localStorage中收藏商品无法在收藏页显示的技术求助

1. 统一localStorage存储的ID格式 #

主页面存储商品ID时，很容易出现字符串/数字类型不匹配的问题，导致收藏页用商品数据的数字ID匹配不上localStorage里的字符串ID（反之亦然）。
解决代码示例（newscript.js）：

// 点击收藏图标时的处理逻辑
favoriteIcon.addEventListener('click', () => {
  const productId = String(productElement.dataset.id); // 强制转成字符串存储
  let favorites = JSON.parse(localStorage.getItem('favorites')) || [];

  if (favorites.includes(productId)) {
    // 取消收藏：移除ID并切换图标状态
    favorites = favorites.filter(id => id !== productId);
    favoriteIcon.classList.remove('red');
  } else {
    // 添加收藏：存入ID并切换图标状态
    favorites.push(productId);
    favoriteIcon.classList.add('red');
  }
  localStorage.setItem('favorites', JSON.stringify(favorites));
});

2. 确保收藏页使用一致的商品数据源 #

收藏页必须和主页面调用完全相同的商品数据源（比如同一个JSON文件、后端接口），否则会出现“找不到对应ID”的情况。
解决代码示例（favorites-script.js）：

async function loadAndRenderFavorites() {
  // 调用和主页面一致的商品接口/JSON文件
  const res = await fetch('/api/products'); 
  const allProducts = await res.json();
  const favoriteIds = JSON.parse(localStorage.getItem('favorites')) || [];
  const favoritesContainer = document.getElementById('favorites-container');

  favoriteIds.forEach(id => {
    // 统一用字符串匹配ID
    const targetProduct = allProducts.find(p => String(p.id) === id);
    if (targetProduct) {
      // 渲染商品DOM
      const productCard = document.createElement('div');
      productCard.className = 'product-block';
      productCard.innerHTML = `
        <img src="${targetProduct.imgUrl}" alt="${targetProduct.name}">
        <h4>${targetProduct.name}</h4>
        <p>${targetProduct.price}</p>
      `;
      favoritesContainer.appendChild(productCard);
    } else {
      console.warn(`无效商品ID：${id}，已跳过渲染`);
    }
  });
}

// 页面加载时执行
window.addEventListener('DOMContentLoaded', loadAndRenderFavorites);

3. 修复收藏页的ID匹配逻辑 #

控制台提示“找不到对应ID”，大概率是匹配时的类型不兼容。必须保证localStorage中的ID和商品数据中的ID类型完全一致，建议统一转成字符串后再用===比较。

4. 清理无效的localStorage数据 #

可以在浏览器控制台执行以下命令，检查并清理异常数据：

// 查看当前存储的收藏ID数组
console.log(JSON.parse(localStorage.getItem('favorites')));
// 清空异常数据（测试用）
localStorage.removeItem('favorites');

内容的提问来源于stack exchange，提问作者Moon Light