如何将本地存储放在DOM -JavaScript上

Question

我遇到的问题是，当我循环通过本地存储时，只有最后一个物品放置在DOM上时，我想放置所有项目进行DOM

function checkStorage() {
  let cartContents = document.getElementsByClassName("products")[0];
  let cartProduct = document.createElement("div");
  cartProduct.classList.add("product");
  let cartCheck = JSON.parse(localStorage.getItem("localItem"));
  // return cartCheck;
  savedCart = "";
  if (cartCheck === null) {
    return;
  } else {
    console.log(cartCheck);
    for (const check in cartCheck) {
      if (Object.hasOwnProperty.call(cartCheck, check)) {
        const element = cartCheck[check];
        savedCart = `<img width="60" src="${element.img}" alt="iphone" />
                    <div>
                      <span class='title'> ${element.title}</span>
                      <div class='price-section'>
                      <input type="number" value="1" class="cart-quantity-input" />
                      <span class='cart-price'>${element.price}</span>
                      </div>
                  
                    </div>
                    <button class='btn-danger'>
                      <i class="bi bi-x"></i>
                    </button>`;
        cartProduct.innerHTML = savedCart;
        console.log(cartProduct);
        cartContents.append(cartProduct);
      }
    }
  }
}

Answer 1

您正在更新cartproduct的整个innerhtml，用于循环内部的每个迭代。这就是为什么只有最后一项被放在DOM上的原因。

在循环外部创建一个空字符串，并在每个迭代中将HTML附加到该字符串。然后在循环之后更新innerhtml。

function checkStorage() {
  let cartContents = document.getElementsByClassName("products")[0];
  let cartProduct = document.createElement("div");
  cartProduct.classList.add("product");
  let cartCheck = JSON.parse(localStorage.getItem("localItem"));
  // return cartCheck;
  savedCart = "";
  if (cartCheck === null) {
    return;
  } else {
    console.log(cartCheck);
    let savedCartsHtml = '';
    for (const check in cartCheck) {
      if (Object.hasOwnProperty.call(cartCheck, check)) {
        const element = cartCheck[check];
        savedCart = `<img width="60" src="${element.img}" alt="iphone" />
                    <div>
                      <span class='title'> ${element.title}</span>
                      <div class='price-section'>
                      <input type="number" value="1" class="cart-quantity-input" />
                      <span class='cart-price'>${element.price}</span>
                      </div>
                  
                    </div>
                    <button class='btn-danger'>
                      <i class="bi bi-x"></i>
                    </button>`;
        savedCartsHtml += savedCart;
        console.log(cartProduct);
        cartContents.append(cartProduct);
      }
    }
    cartProduct.innerHTML = savedCartsHtml;
  }
}