javascript - 如何从数组中检索和显示本地存储中的数据？

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 并将其用作显示价格、标题和图像的参考，但这不起作用。

标签： javascripthtmlarrayslocal-storage

Answer 1

我在评论中的意思的例子。除了选择器，我们将所有相关数据传递给函数。

所以 render() 函数获取它必须渲染的集合、它必须渲染的位置以及一个额外的。

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

您注意到不带参数的函数 fetch_cart() 是一个实际返回某些内容的函数。

现在您可以使用所有这些来编写一个 document.onload 函数，该函数将使用您想要的任何参数的渲染函数。

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>