html5购物车源代码本地存储

功能需求分析

购物车需实现以下核心功能：

1. 添加商品（自动识别重复商品）
2. 删除商品
3. 修改商品数量
4. 实时计算总价
5. 数据持久化存储（关闭页面后数据不丢失）

技术选型说明

代码结构设计

<!-商品展示区 -->
<div id="product-list">
  <div class="product" data-id="001">
    <h3>商品名称</h3>
    <p>￥99.00</p>
    <button class="add-btn">加入购物车</button>
  </div>
  <!-更多商品... -->
</div>
<!-购物车区域 -->
<div id="cart">
  <table>
    <thead>
      <tr>
        <th>商品</th>
        <th>单价</th>
        <th>数量</th>
        <th>小计</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody id="cart-items"></tbody>
  </table>
  <div id="cart-summary">
    总计：<span id="total-price">￥0.00</span>
  </div>
</div>

核心功能实现

本地存储管理

// 读取购物车数据
function getCart() {
  const data = localStorage.getItem('shoppingCart');
  return data ? JSON.parse(data) : [];
}
// 保存购物车数据
function saveCart(cart) {
  localStorage.setItem('shoppingCart', JSON.stringify(cart));
}

添加商品逻辑

document.querySelectorAll('.add-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    const productId = this.closest('.product').dataset.id;
    const cart = getCart();
    // 检查商品是否已存在
    const existing = cart.find(item => item.id === productId);
    if (existing) {
      existing.quantity += 1; // 增量更新
    } else {
      const newItem = {
        id: productId,
        name: this.closest('.product').querySelector('h3').textContent,
        price: parseFloat(this.closest('.product').querySelector('p').textContent),
        quantity: 1
      };
      cart.push(newItem);
    }
    saveCart(cart);
    renderCart(cart);
  });
});

渲染购物车

function renderCart(cart) {
  const tbody = document.getElementById('cart-items');
  tbody.innerHTML = ''; // 清空现有内容
  let total = 0;
  cart.forEach(item => {
    const row = document.createElement('tr');
    row.innerHTML = `
      <td>${item.name}</td>
      <td>${item.price.toFixed(2)}</td>
      <td>
        <input type="number" value="${item.quantity}" min="1" class="quantity" data-id="${item.id}">
      </td>
      <td>${(item.price  item.quantity).toFixed(2)}</td>
      <td><button class="delete-btn" data-id="${item.id}">删除</button></td>
    `;
    tbody.appendChild(row);
    total += item.price  item.quantity;
  });
  document.getElementById('total-price').textContent = total.toFixed(2);
}

数量修改与删除

// 数量输入处理
document.getElementById('cart-items').addEventListener('input', function(e) {
  if (e.target.classList.contains('quantity')) {
    const cart = getCart();
    const item = cart.find(i => i.id === e.target.dataset.id);
    item.quantity = parseInt(e.target.value) || 1; // 防止输入0或负数
    saveCart(cart);
    renderCart(cart);
  }
});
// 删除商品处理
document.getElementById('cart-items').addEventListener('click', function(e) {
  if (e.target.classList.contains('delete-btn')) {
    const cart = getCart();
    const index = cart.findIndex(i => i.id === e.target.dataset.id);
    if (index > -1) cart.splice(index, 1);
    saveCart(cart);
    renderCart(cart);
  }
});

测试与优化建议

优化方向：

1. 增加商品图片展示（需扩展数据结构）
2. 添加全选/取消全选功能
3. 实现持久化存储容量检测（localStorage约5MB限制）
4. 增加过期时间设置（sessionStorage适用临时数据）

相关问题与解答

Q1：如何扩展支持商品多规格选择？
A1：需改造数据结构，在商品对象中增加规格属性。

{
  id: '001',
  name: '运动鞋',
  price: 99.00,
  spec: { color: '红色', size: '42' }, // 新增规格属性
  quantity: 1
}

同时在渲染时展示规格信息,并在添加商品时记录用户选择的规格组合。

Q2：如何处理多设备同步购物车数据？
A2：本地存储仅能在当前设备生效，如需多设备同步，需：

1. 将购物车数据上传至服务器
2. 使用用户认证系统关联数据
3. 在其他设备登录时从服务器获取数据
   可结合Web API与后端服务（如Node.js+