技术问询：实现购物页加购商品在购物车页持久化显示（JSON商品源）

嘿，我来帮你一步步实现这个购物车功能，完全贴合你的需求——加购后跳转购物车能看到商品，刷新数据不丢失，只有点击「移除」才会删除对应商品，而且商品数据来自JSON文件。咱们分模块拆解：

1. 先搞定商品数据的加载 #

首先得从JSON文件里把商品数据拉出来，渲染到购物页面上：

// 购物页面初始化时加载商品
async function loadProducts() {
  try {
    const response = await fetch('./products.json');
    const products = await response.json();
    // 把商品渲染到页面
    renderProductList(products);
    // 把商品数据缓存起来，后面加购时用
    window.products = products;
  } catch (err) {
    console.error('加载商品数据失败:', err);
  }
}

// 渲染商品列表到购物页面
function renderProductList(products) {
  const container = document.getElementById('product-list');
  container.innerHTML = products.map(product => `
    <div class="product-card">
      <h3>${product.name}</h3>
      <p>¥${product.price}</p>
      <p>${product.desc}</p>
      <button onclick="addToCart(${product.id})">加入购物车</button>
    </div>
  `).join('');
}

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', loadProducts);

2. 实现「加入购物车」与数据持久化 #

这里用localStorage来存购物车数据，它存在浏览器里，刷新页面也不会丢，完美符合你的持久化需求：

function addToCart(productId) {
  // 先从localStorage拿现有购物车数据，没有就初始化空数组
  let cart = JSON.parse(localStorage.getItem('cart')) || [];
  
  // 从缓存的商品数据里找到要加购的商品
  const targetProduct = window.products.find(p => p.id === productId);
  
  // 检查购物车是否已有该商品，有的话加数量，没有就新增
  const existingItem = cart.find(item => item.id === productId);
  if (existingItem) {
    existingItem.quantity += 1;
  } else {
    cart.push({...targetProduct, quantity: 1});
  }
  
  // 更新localStorage里的购物车数据
  localStorage.setItem('cart', JSON.stringify(cart));
  
  // 给用户个反馈
  alert('已加入购物车！');
}

小提示：如果不想把商品数据存在全局变量里，也可以在加购时重新fetch一次JSON，但性能会稍差一点，根据你的场景选就行。

3. 购物车页面展示商品 #

购物车页面加载时，直接从localStorage读取数据渲染就行，跳转过来后自动显示：

// 购物车页面初始化渲染
document.addEventListener('DOMContentLoaded', renderCart);

function renderCart() {
  const cartContainer = document.getElementById('cart-items');
  const cart = JSON.parse(localStorage.getItem('cart')) || [];
  
  // 购物车为空时的提示
  if (cart.length === 0) {
    cartContainer.innerHTML = '<p>购物车空空如也~快去挑选商品吧！</p>';
    return;
  }
  
  // 渲染每个购物车商品，加上移除按钮
  cartContainer.innerHTML = cart.map(item => `
    <div class="cart-item">
      <h4>${item.name}</h4>
      <p>单价：¥${item.price}</p>
      <p>数量：${item.quantity}</p>
      <button onclick="removeItem(${item.id})">移除</button>
    </div>
  `).join('');
}

4. 「移除商品」功能实现 #

点击移除按钮后，过滤掉对应商品，更新localStorage并重新渲染购物车：

function removeItem(productId) {
  let cart = JSON.parse(localStorage.getItem('cart')) || [];
  // 过滤掉要移除的商品
  cart = cart.filter(item => item.id !== productId);
  // 存回localStorage
  localStorage.setItem('cart', JSON.stringify(cart));
  // 重新渲染购物车
  renderCart();
  alert('商品已移除！');
}

5. 页面跳转处理 #

购物页面里加个跳转到购物车的入口就行，比如导航栏的按钮：

<!-- 购物页面的导航区 -->
<a href="/cart.html">查看购物车</a>

因为数据存在localStorage里，跳转后购物车页面一加载就会自动读取并渲染，完全不受页面刷新影响。

• 跨标签页同步：如果用户在多个标签页操作购物车，可以监听storage事件实现实时同步：

// 购物车页面监听storage变化，自动更新
window.addEventListener('storage', (e) => {
  if (e.key === 'cart') {
    renderCart();
  }
});

• 商品数据同步：如果JSON文件里的商品信息可能更新，购物车渲染时可以重新拉取最新的商品数据，避免展示旧信息：

async function renderCart() {
  const cartContainer = document.getElementById('cart-items');
  const cartItems = JSON.parse(localStorage.getItem('cart')) || [];
  
  if (cartItems.length === 0) {
    cartContainer.innerHTML = '<p>购物车空空如也~快去挑选商品吧！</p>';
    return;
  }
  
  // 拉取最新商品数据
  const latestProducts = await fetch('./products.json').then(res => res.json());
  
  // 匹配最新商品信息，保留购物车的数量
  const updatedCart = cartItems.map(item => {
    const product = latestProducts.find(p => p.id === item.id);
    return {...product, quantity: item.quantity};
  });
  
  // 渲染更新后的购物车
  cartContainer.innerHTML = updatedCart.map(item => `
    <div class="cart-item">
      <h4>${item.name}</h4>
      <p>单价：¥${item.price}</p>
      <p>数量：${item.quantity}</p>
      <button onclick="removeItem(${item.id})">移除</button>
    </div>
  `).join('');
}

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