基于HTML5与LocalStorage的简易购物车系统实现

前端小chen@

于 2025-04-16 08:00:00 发布

阅读量665

点赞数 9

文章标签： html5 前端 html css javascript

本文链接：https://blog.csdn.net/qq_75101787/article/details/147197347

版权

一、项目概述

本文介绍了一个基于纯前端技术实现的简易购物车系统，该系统主要功能包括：

商品展示与添加购物车功能
购物车商品管理（增删改查）
商品数量增减操作
商品选择与总价计算
本地数据持久化存储

二、技术架构

1. 前端技术栈

HTML5：页面结构与语义化标签
CSS3：页面样式与响应式布局
JavaScript：业务逻辑与交互实现
LocalStorage：本地数据存储
SVG：矢量图标应用

2. 核心设计思想

无后端依赖：完全基于前端技术实现
响应式设计：适配不同屏幕尺寸
本地存储：利用浏览器LocalStorage实现数据持久化
模块化开发：功能逻辑分离，便于维护

基于HTML5与LocalStorage的简易购物车系统实现

一、项目概述

本文介绍了一个基于纯前端技术实现的简易购物车系统，该系统主要功能包括：

商品展示与添加购物车功能
购物车商品管理（增删改查）
商品数量增减操作
商品选择与总价计算
本地数据持久化存储

二、技术架构

1. 前端技术栈

HTML5：页面结构与语义化标签
CSS3：页面样式与响应式布局
JavaScript：业务逻辑与交互实现
LocalStorage：本地数据存储
SVG：矢量图标应用

2. 核心设计思想

无后端依赖：完全基于前端技术实现
响应式设计：适配不同屏幕尺寸
本地存储：利用浏览器LocalStorage实现数据持久化
模块化开发：功能逻辑分离，便于维护

三、核心功能实现

1. 商品展示与添加

function addToCart(imgUrl, proName, proPrice) {
  var aData = JSON.parse(localStorage.getItem('aData')) || [];
  var existingItem = aData.find(function (item) {
    return item.imgUrl === imgUrl && item.proName === proName && item.proPrice === proPrice;
  });

  if (!existingItem) {
    aData.push({
      imgUrl: imgUrl,
      proName: proName,
      proPrice: proPrice
    });
    localStorage.setItem('aData', JSON.stringify(aData));
  }
}

2. 购物车动画效果

function animateCartItem(img, index) {
  const position = animationPositions[index];
  img.style.top = position.top;
  img.style.left = position.left;
  img.style.transform = 'scale(0.2)';
  img.style.zIndex = '1';
  setTimeout(() => {
    img.style.display = 'none';
  }, 2000);
}

3. 购物车商品管理

// 删除商品
function removeItem(index) {
  var rowsToRemove = document.querySelectorAll('.car .row');
  if (rowsToRemove.length > 0) {
    var rowToRemove = rowsToRemove[index];
    rowToRemove.parentNode.removeChild(rowToRemove);
    
    var aData = JSON.parse(localStorage.getItem('aData')) || [];
    aData.splice(index, 1);
    localStorage.setItem('aData', JSON.stringify(aData));
    
    updateTotalPrice();
  }
}

// 修改商品数量
function changeNum(isAdd, index) {
  var numberInput = document.querySelectorAll('.car .row .item_count_i .c_num')[index];
  var number = parseInt(numberInput.textContent);
  if (isAdd) {
    number += 1;
  } else {
    number = Math.max(1, number - 1);
  }
  numberInput.textContent = number;
  updateSubtotal(index);
  updateTotalPrice();
}

4. 价格计算逻辑

// 更新小计
function updateSubtotal(index) {
  var price = parseFloat(document.querySelectorAll('.car .row .price span')[index].textContent);
  var number = parseInt(document.querySelectorAll('.car .row .item_count_i .c_num')[index].textContent);
  var subtotal = price * number;
  document.querySelectorAll('.car .row .subtotal span')[index].textContent = subtotal.toFixed(2);
}

// 更新总价
function updateTotalPrice() {
  var totalPrice = 0;
  var checkboxes = document.querySelectorAll('.car .row .check input[type="checkbox"]');
  var prices = document.querySelectorAll('.car .row .subtotal span');
  
  checkboxes.forEach(function(checkbox, index) {
    if (checkbox.checked) {
      totalPrice += parseFloat(prices[index].textContent);
    }
  });
  
  document.getElementById('price_num').textContent = totalPrice.toFixed(2);
}