跨HTML页面实现商品添加至购物车的解决方案咨询

问题原因 #

你原来的代码直接操作当前页面的.listcartDOM元素，但购物车在独立页面中，当前页面根本找不到这个节点，所以代码执行后没有效果，也不会触发明显报错。下面提供两种可行方案：

方案一：使用localStorage持久化购物车数据 #

这种方式会把购物车数据存在浏览器本地，用户关闭页面后数据仍能保留，适合大多数电商场景。

商品列表页面（主页面）代码 #

修改点击事件，把商品关键信息存入localStorage，而非直接操作DOM：

// 获取所有商品项
const list = document.querySelectorAll(".list .item");
list.forEach(item => {
  item.addEventListener("click", function(event) {
    if (event.target.classList.contains("add")) {
      // 提取商品信息（根据你的实际DOM结构调整字段）
      const product = {
        id: item.dataset.id, // 建议给商品项加data-id属性存唯一标识
        name: item.querySelector(".product-name").textContent,
        price: item.querySelector(".product-price").textContent,
        image: item.querySelector(".product-img").src
      };

      // 读取现有购物车数据，无数据则初始化为空数组
      let cart = JSON.parse(localStorage.getItem("shoppingCart")) || [];
      // 检查商品是否已在购物车，存在则增加数量，否则添加新商品
      const existingItem = cart.find(cartItem => cartItem.id === product.id);
      if (existingItem) {
        existingItem.quantity += 1;
      } else {
        product.quantity = 1;
        cart.push(product);
      }
      // 更新本地存储的购物车数据
      localStorage.setItem("shoppingCart", JSON.stringify(cart));
      // 可选：提示用户或直接跳转到购物车页面
      alert("商品已加入购物车");
      // window.location.href = "cart.html";
    }
  });
});

购物车页面代码 #

页面加载时从localStorage读取数据，渲染购物车内容：

window.addEventListener("DOMContentLoaded", function() {
  const cartContainer = document.querySelector(".listcart");
  const cart = JSON.parse(localStorage.getItem("shoppingCart")) || [];

  // 循环渲染每个购物车商品
  cart.forEach(item => {
    const cartItem = document.createElement("div");
    cartItem.className = "cart-item";
    cartItem.innerHTML = `
      <img src="${item.image}" alt="${item.name}">
      <div class="item-detail">
        <h4>${item.name}</h4>
        <p>单价：${item.price}</p>
        <p>数量：${item.quantity}</p>
      </div>
    `;
    cartContainer.appendChild(cartItem);
  });
});

方案二：通过URL参数传递商品信息（无持久化） #

这种方式不需要本地存储，通过URL参数传递商品数据，适合临时跳转场景，但刷新购物车页面后数据会丢失，且URL长度有限制，不适合大量商品。

商品列表页面代码 #

点击add按钮时，拼接商品信息为URL参数，跳转到购物车页面：

const list = document.querySelectorAll(".list .item");
list.forEach(item => {
  item.addEventListener("click", function(event) {
    if (event.target.classList.contains("add")) {
      // 提取并转义商品信息，避免URL编码问题
      const product = {
        id: item.dataset.id,
        name: encodeURIComponent(item.querySelector(".product-name").textContent),
        price: encodeURIComponent(item.querySelector(".product-price").textContent),
        image: encodeURIComponent(item.querySelector(".product-img").src),
        quantity: 1
      };
      // 转成JSON字符串并编码后作为URL参数
      const productParam = encodeURIComponent(JSON.stringify(product));
      // 跳转到购物车页面并携带参数
      window.location.href = `cart.html?product=${productParam}`;
    }
  });
});

购物车页面代码 #

页面加载时解析URL参数，渲染商品：

window.addEventListener("DOMContentLoaded", function() {
  const cartContainer = document.querySelector(".listcart");
  const params = new URLSearchParams(window.location.search);
  const productStr = params.get("product");

  if (productStr) {
    // 解码并解析商品信息
    const product = JSON.parse(decodeURIComponent(productStr));
    const cartItem = document.createElement("div");
    cartItem.className = "cart-item";
    cartItem.innerHTML = `
      <img src="${decodeURIComponent(product.image)}" alt="${decodeURIComponent(product.name)}">
      <div class="item-detail">
        <h4>${decodeURIComponent(product.name)}</h4>
        <p>单价：${decodeURIComponent(product.price)}</p>
        <p>数量：${product.quantity}</p>
      </div>
    `;
    cartContainer.appendChild(cartItem);
  }
});

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