如何在cart.html中独立设置商品名称与价格的样式和位置？

当前在index.html中点击商品时，会将名称与价格拼接后存入localStorage，导致在cart.html中无法分别控制名称和价格的样式与位置；如果分开存入名称和价格，又会被识别为两个独立商品，无法关联对应关系。

核心思路是把每个商品的完整信息（名称、价格）作为对象存储，再将所有购物车商品放在一个数组里，通过JSON.stringify转为字符串存入localStorage，读取时用JSON.parse还原成对象数组，这样就能在购物车页面分别处理每个商品的名称和价格。

步骤1：修改index.html的JavaScript代码 #

调整点击商品时的存储逻辑，不再单独存每个商品的键值对，而是维护一个购物车数组：

<script>
  function showNotification(title, price) {
      var notificationBox = document.getElementById('notificationBox');
      notificationBox.style.display = 'block';
      setTimeout(function () {
          notificationBox.style.display = 'none';
      }, 2000);

      // 从localStorage读取现有购物车，无数据则初始化空数组
      let cart = JSON.parse(localStorage.getItem('cart')) || [];
      // 检查商品是否已在购物车，避免重复添加
      const isExist = cart.some(item => item.title === title);
      if (!isExist) {
          cart.push({ title, price });
          // 将更新后的购物车存回localStorage
          localStorage.setItem('cart', JSON.stringify(cart));
      }
  }

  for (let i = 1; i <= 16; i++) {
      let item = document.getElementById('item' + i);
      let title = item.querySelector('.card__title').innerText;
      let price = item.querySelector('.card__description').innerText;

      item.addEventListener('click', function () {
          showNotification(title, price);
      });
  }
</script>

步骤2：修改cart.html的JavaScript代码 #

读取购物车数组，遍历每个商品对象，分别渲染名称、价格，同时保留删除功能：

<ul id="cartItemsList"></ul>

<script>
  function removeItem(index) {
      let cart = JSON.parse(localStorage.getItem('cart')) || [];
      // 删除对应索引的商品
      cart.splice(index, 1);
      localStorage.setItem('cart', JSON.stringify(cart));
      displayCartItems();
  }

  function displayCartItems() {
      var cartItemsList = document.getElementById('cartItemsList');
      cartItemsList.innerHTML = ''; 

      let cart = JSON.parse(localStorage.getItem('cart')) || [];
      cart.forEach((item, index) => {
          var listItem = document.createElement('li');
          // 分别创建名称和价格元素，方便单独设置样式
          var titleSpan = document.createElement('span');
          titleSpan.textContent = item.title;
          titleSpan.style.marginRight = '10px'; // 示例样式，可自定义

          var priceSpan = document.createElement('span');
          priceSpan.textContent = item.price;
          priceSpan.style.color = '#888'; // 示例样式，可自定义

          var removeButton = document.createElement('button');
          removeButton.textContent = 'Remove';
          removeButton.style.marginLeft = '15px';

          removeButton.addEventListener('click', () => removeItem(index));

          listItem.appendChild(titleSpan);
          listItem.appendChild(priceSpan);
          listItem.appendChild(removeButton);
          cartItemsList.appendChild(listItem);
      });
  }

  window.onload = displayCartItems;
</script>

额外说明 #

• 所有购物车数据集中在cart一个键下，避免键值对混乱；
• 每个商品信息是完整对象，可自由拆分名称和价格，单独添加类名或行内样式；
• 新增重复商品检查逻辑，若需要允许重复添加，可删除isExist相关判断。

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