用js+html+css写出如何将商品成功添加到另一个页面的购物车案例

好的，我可以为您提供一个简单的示例代码来实现这个功能。

首先，我们需要在商品页面上添加一个“加入购物车”按钮，代码如下：

<!-- 商品页面 -->
<div>
  <h2>商品名称</h2>
  <p>商品描述</p>
  <button onclick="addToCart()">加入购物车</button>
</div>

在这个例子中，我们添加了一个按钮，当用户点击它时，将调用 `addToCart()` 函数。

接下来，我们需要在另一个页面上创建一个购物车，并将选定的商品添加到购物车中。我们可以使用本地存储来保存购物车中的商品，代码如下：

<!-- 购物车页面 -->
<ul id="cart"></ul>

<script>
  // 从本地存储中获取购物车数据
  const cartData = JSON.parse(localStorage.getItem('cart')) || [];

  // 显示购物车中的商品
  const cartList = document.querySelector('#cart');
  cartData.forEach(item => {
    const li = document.createElement('li');
    li.textContent = item.name;
    cartList.appendChild(li);
  });

  // 将商品添加到购物车
  function addToCart() {
    const name = '商品名称'; // 替换为实际的商品名称
    const item = { name };
    cartData.push(item);
    localStorage.setItem('cart', JSON.stringify(cartData));
    const li = document.createElement('li');
    li.textContent = name;
    cartList.appendChild(li);
  }
</script>

在这个例子中，我们首先从本地存储中获取购物车数据，然后将购物车中的每个商品显示为列表项。当用户点击“加入购物车”按钮时，我们将创建一个新的商品对象，并将其添加到购物车数据中。然后，我们将更新本地存储中的购物车数据，并将新的商品添加到购物车列表中。

请注意，这只是一个简单的示例代码，实际情况可能更复杂。例如，您可能需要为每个商品添加数量和价格等属性，并在购物车页面中显示总计。但是，这个例子应该可以帮助您了解如何使用 JavaScript、HTML 和 CSS 实现将商品添加到购物车的功能。