如何使用LocalStorage计算购物车总价格，修复总金额展示异常问题

问题原因 #

你写的总价格代码存在几个明显问题：

• localStorage.getItem('prod_value' + 'prod2_value')逻辑错误：你把两个key拼接成了不存在的字段名prod_valueprod2_value，根本读不到对应的值
• localStorage取出的值都是字符串类型，即使存的是数字，直接相加会变成字符串拼接，不会做数学求和
• 同一个#updateCart按钮绑定了三次重复的click监听器，属于冗余代码
• 如果你的prod_value、prod2_value是商品单价，还需要乘以对应购买数量才能得到正确的单种商品总价

修正后代码 #

document.querySelector("#updateCart").addEventListener('click', function() {
  // 读取第一个商品信息
  const prodValue = Number(localStorage.getItem("prod_value")) || 0
  const prodQty = Number(localStorage.getItem("prod_qty")) || 0
  const prodSize = localStorage.getItem("prod_size") || ''
  document.querySelector('#prod_value').innerText = prodValue
  document.querySelector('#prod_qty').innerText = prodQty
  document.querySelector('#prod_size').innerText = prodSize

  // 读取第二个商品信息
  const prod2Value = Number(localStorage.getItem("prod2_value")) || 0
  const prod2Qty = Number(localStorage.getItem("prod2_qty")) || 0
  const prod2Size = localStorage.getItem("prod2_size") || ''
  document.querySelector('#prod2_value').innerText = prod2Value
  document.querySelector('#prod2_qty').innerText = prod2Qty
  document.querySelector('#prod2_size').innerText = prod2Size

  // 计算总价格：如果prod_value已经是单商品总价，就去掉 * prodQty 和 * prod2Qty 部分
  const total = prodValue * prodQty + prod2Value * prod2Qty
  document.querySelector('#total').innerText = total
})

补充说明 #

如果你的prod_value存储的已经是单个商品的总价（提前算好了单价乘数量），只需要把总价格计算的那行改成const total = prodValue + prod2Value即可。代码里加了|| 0的容错处理，避免localStorage没有值的时候出现NaN的异常展示。

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