Question

如何获取item.title，item.price，item.imageScr值并将其设置为可以在displayCart()中使用的变量

我正在将带有这三个值的信息数组与关键项一起保存。但我想在我的购物车中显示该信息。而且我不知道该如何显示该信息并将其传递给购物车。

var product = [
  {
    title: title,
    price: price,
    image: imageSrc
  }
];
var pods = JSON.parse(localStorage.getItem("item")) || [];
pods.push(product);
localStorage.setItem("item", JSON.stringify(pods));
//displayCart(title, price, imageSrc)
saveCart();

function loadCart() {
  for (var i = 0; i < localStorage.length; i++) {
    displayCart();
  }
}

function displayCart() {
  //var item = JSON.parse(localStorage.getItem("item"))[0]
  var cartRow = document.createElement("div");
  cartRow.classList.add("cart-row");
  var cartItems = document.getElementsByClassName("cart-items")[0];
  var cartRowContents = `
        <div class="cart-row">
  <div class="cart-column cart-item" style="padding-top: 1%">
    <img class="image" style="width: 25%;" src="${imageSrc}" alt="" />
    <h2 style="padding-left: 5%">${title}</h2>
  </div>
  <div class="cart-column cart-price" style="padding-top: 1%">
    <h2 class="price">${price}</h2>
  </div>
  <form class="cart-column cart-quantity">
    <input
      class="quantity"
      type="number"
      id="number"
      value="1"
      style="width: 15%; margin-left: auto; margin-right: 60%"
    />
  </form>
  <span style="margin-top: auto; margin-bottom: auto;">
    <button class="btn btn-primary shop-item-button " type="button">
      Remove
    </button>
  </span>
</div>`;

  cartRow.innerHTML = cartRowContents;
  cartItems.append(cartRow);
  cartRow
    .getElementsByClassName("btn-primary")[0]
    .addEventListener("click", RemoveCartItem);
  saveCart();
}

我认为我只能获取item.value并将其用作显示价格，标题和图像的参考，但这不起作用。

Answer 1

我在评论中的意思示例。除了选择器之外，我们还将所有相关数据传递到函数中。

因此render（）函数获取必须渲染的集合，必须渲染的位置以及其他内容。

事件处理程序接受事件对象。

您注意到，不带参数的函数fetch_cart（）是实际上返回内容的函数。

现在您可以使用所有这些来编写document.onload函数，该函数将使用render函数和所需的任何参数。

ps：localStorage不适用于堆栈片段，因此我在chrome中复制/粘贴并进行了测试。

const stock = [
  { "id": 1, "title": "shoes", "price": 99.99, "image": "/path/1.png", "available": 75 },
  { "id": 2, "title": "shirt", "price": 67.14, "image": "/path/2.png", "available": 2  },
  { "id": 3, "title": "shoes", "price": 85.25, "image": "/path/3.png", "available": 0  },
  { "id": 4, "title": "hats",  "price": 15.2,  "image": "/path/4.png", "available": 18 }
];

const render = ( collection, list, button_type ) => {
  const items = collection.map( item => `
	<li>
	  <span>${ item.title }</span>
	  <span>${ item.price }</span>
	  <span>${ item.available }</span>
	  <button data-type="${ button_type }" data-reference="${ item.id }">${ button_type }</button>
	</li>
  `);
  list.innerHTML += items.join( '' );
};

const fetch_cart = () => {
  return Array.from({ length: localStorage.length - 1 }, ( _, index ) => {
	const item_key = localStorage.key( index );
	return JSON.parse( localStorage.getItem( item_key ));
  });
};

const add_to_cart = event => {
  const id = parseInt( event.target.getAttribute( 'data-reference' ), 10 );
  const item = stock.find( item => item.id === id );
  if ( !item.available > 0 ) alert( 'item is sold out' );
  else {
	item.available -= 1;
	const clone = Object.assign({}, item );
	localStorage.setItem( `order_${ Date.now() }`, JSON.stringify( clone ));
	render( [ clone ], list_cart, 'delete' );
  }
};

const delete_from_cart = event => {
  console.log( 'TODO' );
  // basically the reverse of add_to_cart
};

const list_stock = document.querySelector( '#stock' );
const list_cart = document.querySelector( '#cart' );

list_stock.addEventListener( 'click', add_to_cart );

list_cart.addEventListener( 'click', delete_from_cart );

render( stock, list_stock, 'add' );
render( fetch_cart(), list_cart, 'delete' );

ul {
  border: 1px solid grey;
  margin-bottom: 20px;
}

<label>Your order</label>
	<ul id="cart"></ul>
	<label>Available</label>
	<ul id="stock"></ul>

Answer 2

您可以将项目保存在此变量中。保存元素item.title等元素后，只需将其另存为this.item.title。

这样，您可以仅在displayCart（）this.item中调用，您将拥有所有元素。

Answer 3

在loadCart函数内部检索该项目，并在每次迭代时传递该元素。

 function loadCart() {
    let lcStr = JSON.parse(localStorage.getItem('itemName'));
    for (var i = 0; i < lcStr.length; i++){
        displayCart(lcStr[i]);
    }
  }

您需要在displayCart函数中进行一些更改

如何从阵列中检索和显示本地存储中的数据？

3 个答案: