使用jQuery如何展示localStorage中存储的数组内所有购物车对象数据

基础数据读取规则 #

• 读取数组元素：你定义的cartArray是对象数组，用forEach循环即可遍历拿到每一个商品对象
• 访问对象属性：商品对象的自定义属性为I(ID)、IMG(图片)、N(名称)、W(重量)、A(库存)、P(单价)、Q(数量)，使用对象.属性名即可读取对应值，例如item.N就能拿到商品名称。

实现步骤 #

1. 先在购物车页面HTML中添加对应容器，用来承载空购物车提示、商品列表、总价信息：

<!-- 空购物车提示 -->
<div id="empty-cart">您的购物车还是空的~</div>
<!-- 购物车商品列表容器 -->
<div id="cartList"></div>
<!-- 总价区域 -->
<div class="total-area">
  <p id="totalPrice"></p>
  <p id="shippingFee"></p>
  <p id="finalTotal"></p>
</div>

2. 封装独立的购物车渲染函数，每次加购完成、页面加载时调用该函数即可刷新购物车展示：

// 封装渲染购物车的函数
function renderCart() {
  // 优先从localStorage读取最新的购物车数据，刷新页面不会丢失数据
  cartArray = JSON.parse(localStorage.getItem('cartItem')) || [];
  const $cartList = $('#cartList');
  // 清空旧内容避免重复渲染
  $cartList.empty();
  total = 0;

  // 处理购物车为空的场景
  if (cartArray.length === 0) {
    $('#empty-cart').show();
    $('.total-area').hide();
    return;
  }
  $('#empty-cart').hide();
  $('.total-area').show();

  // 遍历购物车数组渲染每个商品
  cartArray.forEach(item => {
    // 计算单个商品小计金额
    const itemTotal = item.P * item.Q;
    total += itemTotal;
    // 拼接商品HTML结构，可根据自己的页面样式调整
    const itemHtml = `
      <div class="cart-item" data-id="${item.I}">
        <img src="${item.IMG}" alt="${item.N}" class="item-img">
        <div class="item-info">
          <h4 class="item-name">${item.N}</h4>
          <p class="item-weight">重量：${item.W}</p>
          <p class="item-availability">库存：${item.A}</p>
        </div>
        <div class="item-price">单价：¥${item.P}</div>
        <div class="item-quantity">数量：${item.Q}</div>
        <div class="item-subtotal">小计：¥${itemTotal}</div>
      </div>
    `;
    $cartList.append(itemHtml);
  });

  // 渲染总价+运费信息
  const finalTotal = total + shipping;
  $('#totalPrice').text(`商品总价：¥${total}`);
  $('#shippingFee').text(`运费：¥${shipping}`);
  $('#finalTotal').text(`实付金额：¥${finalTotal}`);
}

3. 调整原有的加购逻辑，操作完购物车数据后更新本地存储并调用渲染函数，同时新增页面加载完成自动渲染的逻辑：

var cartArray = []; // 购物车商品数据数组
var total = 0;
var shipping = 2;

// 页面加载完成先渲染一次购物车，读取本地缓存的商品数据
$(function() {
  renderCart();
});

$(".addToCart").click(function(){
  var flag = 0;
  // 获取要添加的商品的所有属性
  var id= $(this).data("id");
  var price= $(this).data("price");
  var image = $(this).data('image');
  var name = $(this).data("name");
  var quantity = $(this).data("quantity");
  var availability = $(this).data("availability");
  var weight = $(this).data("weight");

  // 遍历购物车检查商品是否已存在，存在则数量+1
  $.map(cartArray,function(item){
    if (item.I == id){
      item.Q++;
      flag = 1;
      return false;
    }
  })

  // 商品不存在则新增商品对象到数组
  if(flag == 0){
    var itemObj ={
      I : id,
      IMG : image,
      N : name,
      W : weight,
      A : availability,
      P : price,
      Q : quantity,
    }
    cartArray.push(itemObj);
  }
  // 更新本地存储并重新渲染购物车
  localStorage.setItem('cartItem',JSON.stringify(cartArray));
  renderCart();
});

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