时间戳

首页 > 解决方案 > 如何获得本地存储来保存不同的购物车项目？

javascript - 如何获得本地存储来保存不同的购物车项目？

问题描述

我正在建立一个电子商务网站，我正在使用本地存储将数据保存到购物车。但是，我遇到了一些问题：

  1. 我不能在不丢失旧项目的情况下添加不同的项目（我猜这些行不会保存）；我注意到，一旦我单击添加到购物车，它就会用新数据覆盖该行。（我认为这可能是 for 循环再次覆盖了 i=1 中的数据）如图所示这是我看到的https://imgur.com/buotLVe

  2. 删除按钮似乎也无法正常工作；它快把我逼疯了！

我的代码可能到处都是，所以非常感谢我的道歉和任何帮助。

selected-product.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();
    }
  }
}

标签： javascripthtmllocal-storage

解决方案

您不是从本地存储中将数组作为数组读取，而是期望它们中的字符串由冒号分隔 - 即使它可以在某些浏览器上运行，在属性中包含“，”的任何项目都会破坏这一点。

您可以将数组存储为 JSON，事实上 JSON 支持的不止于此，您可以考虑存储一个数组，其中包含存储其所有属性的项目。

此外，您真的不应该相信购物车的浏览器，尤其是处理价格和付款，因为所有数据都很容易被操纵。

推荐阅读