Как получить локальное хранилище для хранения различных товаров в корзине?

Question

Я создаю сайт электронной коммерции и использую локальное хранилище для сохранения данных в корзину. Однако у меня возникли некоторые проблемы:

1. Я не могу добавлять различные элементы, не теряя старые (я думаю, строки не сохраняются); Я заметил, как только я нажимаю добавить в корзину, он перезаписывает строку с новыми данными. (Я думаю, что это вероятно для l oop, который перезаписывает данные из i = 1 снова), как показано, это то, что я вижу https://imgur.com/buotLVe

2. кнопка удаления не работает должным образом; это сводит меня с ума!

Мой код может быть повсюду, поэтому мои извинения и любая помощь действительно приветствуются.

выбранный продукт. html

<div onclick="additem()" id="add-item-to-cart">
  <h4>ADD TO CART</h4>
</div>

сумка для покупок. html

<table>
  <tr>
    <th>IMAGE</th>
    <th>ITEM</th>
    <th>COLOR</th>
    <th>PRICE</th>
    <th>QUANTITY</th>
  </tr>

  <tr class="item-row"></tr>

  <td id="cart-total-price-title">TOTAL:</td>
  <td id="cart-total-price">$0.00</td>
</table>

корзина. js

var itemCounter = 0;
var loopNum = 1;
function additem() {

  itemCounter++;
  loopNum++;
  localStorage.setItem('item-count', itemCounter);
  localStorage.setItem('item-loop', loopNum);
  // alert(itemCounter);
  addToCart();
}

function updateCartTotal() {
  //
  // Get the first table in the document.
  var counter = localStorage.getItem('item-count');
  var loop = localStorage.getItem('item-loop');
  //alert('counter'+counter);
  var table = document.getElementsByTagName('table')[0];
  var count = 0;
  var itemPrice = localStorage.getItem('saved-Price');
  var totalPriceElement = document.getElementById('cart-total-price');
  var cartRows = document.getElementsByClassName('item-row');
  var cellOfItemColor = localStorage.getItem('saved-colorArray').split(',');
  var cellOfitemQuantityInput = localStorage.getItem('saved-quantityArray').split(',');
  var cellOfItemName = localStorage.getItem('saved-itemArray').split(',');
  var imageArray = localStorage.getItem('saved-imageArray').split(',');



  console.log(cellOfItemColor[0] + cellOfitemQuantityInput);
  for (var i = 1; i <= counter; i++) {

    var row = table.insertRow(i);
    var cellOfItemImage = row.insertCell(0);
    row.insertCell(1).innerText = cellOfItemName[i - 1];


    row.insertCell(2).innerText = cellOfItemColor[i - 1];

    row.insertCell(3).innerText = itemPrice;

    row.insertCell(4).innerText = cellOfitemQuantityInput[i - 1];

    var cellOfItemRemove = row.insertCell(5);

    var image = document.createElement('img');
    image.src = imageArray[i - 1];
    image.setAttribute("width", "100");
    image.setAttribute("height", "100");
    cellOfItemImage.appendChild(image);

    var removeRow = document.createElement("BUTTON");
    removeRow.style.color = "black";
    removeRow.style.padding = '10px';
    removeRow.style.fontFamily = "Roboto, sans-serif, verdana, tahoma";
    removeRow.style.letterSpacing = '3px';
    removeRow.style.fontWeight = 'bold';
    removeRow.innerText = "REMOVE";
    cellOfItemRemove.append(removeRow);

    localStorage.setItem('item-row', row);
    removeRow.addEventListener('click', function () {
      table.deleteRow(1);
      localStorage.deleteItem('item-row');

    });


    var totalPrice = 0;
    for (var i = 0; i < cartRows.length; i++) {

      totalPrice = totalPrice + (itemPrice * 1 /*inputQuantityValue.value*/);
      count++;
    }

    totalPrice = '$' + totalPrice.toFixed(2);
    totalPriceElement.innerHTML = totalPrice;
    console.log(count + ' Total: ' + totalPrice);

  }

  var colorArray = [];
  var quantityArray = [];
  var itemnameArray = [];
  var itemimageArray = [];
  function addToCart() {


    var productQuantity = document.getElementById("qty").value;
    var productColor = document.getElementById("clr-list").value;
    var productModel = document.getElementById("model").value;
    var currTitle = document.getElementById('product-title').innerHTML;
    var productImageLocation = document.getElementById("product-img").src;


    colorArray.push(productColor);
    localStorage.setItem('saved-colorArray', colorArray);

    quantityArray.push(productQuantity);
    localStorage.setItem('saved-quantityArray', quantityArray);

    itemnameArray.push(currTitle);
    localStorage.setItem('saved-itemArray', itemnameArray);

    itemimageArray.push(productImageLocation);
    localStorage.setItem('saved-imageArray', itemimageArray);



    if (productQuantity < 1) {
      alert('Product quantity has to be at least one');
    }
    else {
      alert('Item added! ' + currTitle + " Quantity: " + productQuantity + " Color: " + colorArray + " Model: " + productModel + 'img src : ' + productImageLocation);
      updateCartTotal();
    }
  }
}

Answer 1

Вы не читаете массивы как массивы из локального хранилища, а ожидаете, что строка из них разделена двоеточиями - даже если это будет работать в некоторых браузерах, наличие какого-либо элемента, содержащего «,» в свойстве, может нарушить это.

Вы можете хранить массивы как JSON, и на самом деле JSON поддерживает больше, чем это, вы можете рассмотреть возможность хранения массива с элементами, хранящими все их свойства.

Кроме того, вы не должны доверять браузеру корзину, особенно обработку цен и осуществление платежей, поскольку все данные могут быть легко обработаны.