如何将用户输入添加到2D数组并使用JavaScript在会话存储中更新

Question

我已经在网站上创建了一个下拉式购物车，现在我需要将所有产品数据通过此下拉货车传递到单独的HTML购物车页面使用结帐功能。

为了实现这一目标，我将购物车详细信息保存到2D阵列中，将其存储在 Session Storage 中，并在另一个购物车页面上显示。但是，我一直坚持将最新产品数量 （输入值）（输入值）（输入值）存储到下拉式购物车中的每个产品的2D阵列中。

由于QuantityChanged（），updateCarttotal（）和additemtocart（）是不同的函数，将不同的事件处理为参数。因此，我不能仅将数量作为参数传递给Additemtocart（），该参数将卡车数据存储到会话存储中。以下是我的下拉购物车功能的代码。

/*Cart Funtion*/

/*Store items to cart*/

if (document.readyState == 'loading') {
  document.addEventListener('DOMContentLoaded', ready)
}

else {
  ready();
}

function ready() {
  var removeCartItemButtons = document.getElementsByClassName('cart-remove-btn')
  for (var i = 0; i < removeCartItemButtons.length; i++) {
      var button = removeCartItemButtons[i]
      button.addEventListener('click', removeCartItem)
  }

  var quantityInputs = document.getElementsByClassName('cart-quantity-input')
  for (var i = 0; i < quantityInputs.length; i++) {
      var input = quantityInputs[i]
      input.addEventListener('change', quantityChanged)
  }

  var addToCartButtons = document.getElementsByClassName('addCart_button');
  for (var i = 0; i < addToCartButtons.length; i++) {
    var button = addToCartButtons[i];
    button.addEventListener('click', addToCartClicked);
  }
}

function removeCartItem(event) {
  var buttonClicked = event.target
  buttonClicked.parentElement.parentElement.remove()
  updateCartTotal()
}

function quantityChanged(event) {
  var input = event.target
  if (isNaN(input.value) || input.value <= 0 || input.value % 1 != 0) {
      input.value = 1
  }
  updateCartTotal()
}

function updateCartTotal() {
  var cartItemContainer = document.getElementsByClassName('cart-items')[0]
  var cartRows = cartItemContainer.getElementsByClassName('cart-row')
  var subtotal = 0
  var total = 0
  for (var i = 0; i < cartRows.length; i++) {
      var cartRow = cartRows[i]
      var priceElement = cartRow.getElementsByClassName('cart-price')[0]
      var quantityElement = cartRow.getElementsByClassName('cart-quantity-input')[0]
      var price = parseFloat(priceElement.innerText.replace('RM', ''))
      var quantity = quantityElement.value
      subtotal = price * quantity
      total = total + (price * quantity)

      document.getElementsByClassName('cart-subtotal')[i].innerText = 'RM' + subtotal
  }
  
  total = Math.round(total * 100) / 100

  if (total % 1 != 0){
    document.getElementsByClassName('cart-total-price')[0].innerText = total 
  }

  else{
    document.getElementsByClassName('cart-total-price')[0].innerText = total+ '.00'
  }

  document.getElementsByClassName('label')[0].innerText = 'My Cart (' + cartRows.length +')'
}

var a=0;
var cartArray = [[]]

/*Add To Cart Funtion*/
function addToCartClicked(addCart) {
  var button = addCart.target;
  var shopItem = button.parentElement.parentElement;

  var imageSrc = shopItem.getElementsByClassName('item-img')[0].src;
  var title = shopItem.getElementsByClassName('item-title')[0].innerText;
  var price = shopItem.getElementsByClassName('item-price')[0].innerText;

  cartArray[a] = [imageSrc,title, price]
  a += 1
  console.log(cartArray)
  addItemToCart(imageSrc, title, price, cartArray);
  updateCartTotal();
}

var addItemId = 0;

function addItemToCart(imageSrc, title, price, cartArray) {
  //cart drop down
  var cartRow = document.createElement('div');
  cartRow.classList.add('cart-row')
  var cartItems = document.getElementsByClassName('cart-items')[0];
  var cartItemNames = cartItems.getElementsByClassName('cart-item-title');

  for (var i = 0; i < cartItemNames.length; i++){
    if (cartItemNames[i].innerText == title){
      alert('This package is already added to the cart.')
      return
    }
  }

  var cartRowContents = `
    <div class="cart-item cart-column">
    <span class="cart-item-title">${title}</span> 
    </div>
    <span class="cart-price cart-column">RM ${price}</span>
    <div class="cart-quantity cart-column">
      <input class="cart-quantity-input" type="number" value="1" min="1">
    </div>
    <span class="cart-subtotal cart-column">RM ${price}</span>
    <span class="cart-remove-btn cart-column"><i class="fa fa-trash" aria-hidden="true"></i></span>`

  cartRow.innerHTML = cartRowContents
  cartItems.append(cartRow)
  cartRow.getElementsByClassName('cart-remove-btn')[0].addEventListener('click',removeCartItem)
  cartRow.getElementsByClassName('cart-quantity-input')[0].addEventListener('change',quantityChanged)
  

  //saving the values in session storage  
  sessionStorage.setItem("productArray", JSON.stringify(cartArray));
}