用js代码实现使用cookie实现购物车功能: 有以下商品, 点击加入购物车即可加入到购物车中(cookie中保存), 点击查看购物车, 进入另一个页面, 并显示之前加入购物车的商品.

HTML代码：

<!-- 商品列表 -->
<div id="product-list">
  <div class="product">
    <h3>商品1</h3>
    <p>价格: $10</p>
    <button class="add-to-cart" data-product="product1">加入购物车</button>
  </div>
  <div class="product">
    <h3>商品2</h3>
    <p>价格: $20</p>
    <button class="add-to-cart" data-product="product2">加入购物车</button>
  </div>
  <div class="product">
    <h3>商品3</h3>
    <p>价格: $30</p>
    <button class="add-to-cart" data-product="product3">加入购物车</button>
  </div>
</div>

<!-- 查看购物车 -->
<div id="cart">
  <h2>我的购物车</h2>
  <ul id="cart-list"></ul>
  <p>总价: <span id="total-price">0</span></p>
</div>

JS代码：

// 获取商品列表和购物车元素
const productList = document.getElementById('product-list');
const cartList = document.getElementById('cart-list');
const totalPrice = document.getElementById('total-price');

// 添加商品到购物车
function addToCart(product) {
  // 获取购物车中已有的商品列表
  const cartItems = JSON.parse(getCookie('cartItems')) || [];

  // 检查购物车中是否已有该商品
  const existingItem = cartItems.find(item => item.id === product.id);
  if (existingItem) {
    existingItem.quantity++;
  } else {
    cartItems.push({ id: product.id, name: product.name, price: product.price, quantity: 1 });
  }

  // 保存购物车信息到cookie
  setCookie('cartItems', JSON.stringify(cartItems));

  // 更新购物车显示
  updateCart();
}

// 从购物车中移除商品
function removeFromCart(itemId) {
  // 获取购物车中已有的商品列表
  const cartItems = JSON.parse(getCookie('cartItems')) || [];

  // 移除指定的商品项
  const updatedItems = cartItems.filter(item => item.id !== itemId);

  // 保存购物车信息到cookie
  setCookie('cartItems', JSON.stringify(updatedItems));

  // 更新购物车显示
  updateCart();
}

// 更新购物车显示
function updateCart() {
  // 获取购物车中已有的商品列表
  const cartItems = JSON.parse(getCookie('cartItems')) || [];

  // 清空购物车显示列表
  cartList.innerHTML = '';

  // 计算总价
  let total = 0;

  // 遍历购物车中的商品项并添加到显示列表中
  cartItems.forEach(item => {
    const li = document.createElement('li');
    li.innerHTML = `${item.name} x ${item.quantity} <span>$${item.price * item.quantity}</span> <button class="remove-from-cart" data-id="${item.id}">移除</button>`;
    cartList.appendChild(li);

    total += item.price * item.quantity;
  });

  // 更新总价显示
  totalPrice.innerText = total;
}

// 获取cookie值
function getCookie(name) {
  const cookies = document.cookie.split(';');
  for (let i = 0; i < cookies.length; i++) {
    const cookie = cookies[i].trim();
    if (cookie.startsWith(name + '=')) {
      return decodeURIComponent(cookie.substring(name.length + 1));
    }
  }
  return null;
}

// 设置cookie值
function setCookie(name, value, days = 7) {
  const expires = new Date(Date.now() + days * 24 * 60 * 60 * 1000).toGMTString();
  document.cookie = `${name}=${encodeURIComponent(value)};expires=${expires}`;
}

// 绑定加入购物车按钮的点击事件
productList.addEventListener('click', event => {
  if (event.target.classList.contains('add-to-cart')) {
    const product = {
      id: event.target.getAttribute('data-product'),
      name: event.target.parentNode.querySelector('h3').innerText,
      price: parseFloat(event.target.parentNode.querySelector('p').innerText.substring(3)),
    };
    addToCart(product);
  }
});

// 绑定移除商品按钮的点击事件
cartList.addEventListener('click', event => {
  if (event.target.classList.contains('remove-from-cart')) {
    const itemId = event.target.getAttribute('data-id');
    removeFromCart(itemId);
  }
});

// 初始化购物车显示
updateCart();