如何将不同HTML页面的商品信息存入数组并在购物车页展示

一、现有代码核心问题修复 #

你当前的代码首先存在几个影响功能正常运行的问题，优先修复后再做优化：

• HTML结构错误：<div class="outer">、<div id="result">等可视元素放在了<head>和<body>标签之间，不符合HTML规范，需要全部挪到<body>标签内部。
• JS逻辑核心bug：页面刷新或者跳转到购物车页面时，内存中的cart数组会重置为空，且getCart函数没有从localStorage读取已存储的购物车数据，导致购物车页面看不到之前加购的内容。
• 变量声明不规范：JS代码中的selectElement、output没有加声明关键字，会自动变成全局变量，容易和其他脚本产生冲突。

修复后的基础JS代码示例 #

// 页面初始化优先从localStorage读取已有的购物车数据
let cart = JSON.parse(localStorage.getItem('cart') || '[]');

function addCart() {
  // 加变量声明避免全局污染
  const selectElement = document.querySelector('#product');
  const selectedSize = selectElement.value;
  cart.push(selectedSize);
  localStorage.setItem("cart", JSON.stringify(cart));
  alert('加购成功，当前购物车商品：' + cart.join('、'));
}

// 购物车页面的渲染函数，不要只用alert
function getCart() {
  // 优先读取本地存储的最新数据
  cart = JSON.parse(localStorage.getItem('cart') || '[]');
  const resultBox = document.querySelector('#result');
  if (cart.length === 0) {
    resultBox.innerHTML = '<p style="text-align:center;font-size:24px;">购物车暂无商品</p>';
    return;
  }
  // 把购物车内容渲染到页面容器里
  resultBox.innerHTML = `
    <ul style="max-width:700px;margin:0 auto;list-style:none;padding:0;">
      ${cart.map(item => `<li style="padding:10px;border-bottom:1px solid #fff;font-size:20px;">T恤 尺码：${item.split('_')[1]}</li>`).join('')}
    </ul>
  `;
}

二、前端方案优化建议 #

如果暂时不需要后端支持，纯前端方案可以做以下优化提升体验：

• 优化购物车存储结构：不要仅存储尺码字符串，改为存储商品对象，包含商品ID、名称、价格、尺码、数量、图片地址等信息，加购时判断同款同尺码是否已存在，存在则数量+1，避免重复生成条目：

  // 加购逻辑优化
  function addCart() {
    const selectElement = document.querySelector('#product');
    const selectedSize = selectElement.value;
    const productItem = {
      id: 'shirt_001',
      name: '浅灰色野牛品牌T恤',
      price: 30,
      size: selectedSize,
      pic: 'bison_brand_light_grey_t-shirt.png',
      count: 1
    };
    // 查找是否已有同款同尺码商品
    const existIndex = cart.findIndex(item => item.id === productItem.id && item.size === productItem.size);
    if (existIndex > -1) {
      cart[existIndex].count += 1;
    } else {
      cart.push(productItem);
    }
    localStorage.setItem('cart', JSON.stringify(cart));
    const totalCount = cart.reduce((sum, item) => sum + item.count, 0);
    alert(`加购成功，当前购物车共${totalCount}件商品`);
  }
  

• 增加交互体验：加购成功后顶部弹出轻提示代替alert，导航栏的购物车入口旁边显示商品总数量，用户不需要点进购物车就能看到加购状态。
• 增加购物车操作功能：支持修改商品数量、删除单条商品、清空购物车等操作，同步更新localStorage和页面渲染。

三、PHP后端实现方案（适合需要数据持久化的场景） #

用PHP实现的好处是购物车数据存在服务端，不会因为用户清浏览器缓存、换设备丢失，你没有PHP基础也可以快速搭出简单版本：

1. 环境准备：用XAMPP一键安装本地运行环境，集成了Apache、PHP、MySQL，不需要单独配置。
2. 建表准备：在MySQL中新建两个表：
   • 商品表products：存储所有商品信息，字段为id(主键)、name(商品名)、price(价格)、pic(图片地址)
   • 购物车表cart：存储用户购物车数据，字段为id(主键)、user_id(用户标识)、product_id(关联商品id)、size(尺码)、count(数量)
3. 加购接口示例：新建add_cart.php文件处理加购请求

   <?php
   // 连接数据库，root为默认账号，密码默认空，填你自己的数据库名
   $conn = mysqli_connect('localhost', 'root', '', '你的数据库名');
   // 未登录用户生成临时唯一标识存cookie，有效期30天
   $user_id = $_COOKIE['user_id'] ?? uniqid();
   setcookie('user_id', $user_id, time() + 86400 * 30);
   // 接收前端传的参数
   $product_id = $_POST['product_id'];
   $size = $_POST['size'];
   // 判断是否已有同款同尺码，有则更新数量，没有则新增
   $checkRes = mysqli_query($conn, "SELECT * FROM cart WHERE user_id = '$user_id' AND product_id = '$product_id' AND size = '$size'");
   if (mysqli_num_rows($checkRes) > 0) {
     mysqli_query($conn, "UPDATE cart SET count = count + 1 WHERE user_id = '$user_id' AND product_id = '$product_id' AND size = '$size'");
   } else {
     mysqli_query($conn, "INSERT INTO cart(user_id, product_id, size, count) VALUES ('$user_id', '$product_id', '$size', 1)");
   }
   echo json_encode(['code' => 200, 'msg' => '加购成功']);
   ?>
   

4. 前端调整：加购时用fetch发POST请求到这个接口即可，不需要再存localStorage，购物车页面直接用PHP查询当前用户的购物车数据渲染到页面上。

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