我是javascript新手，我想在我的购物车上添加一个删除按钮，我如何从本地存储中删除1行。我的购物车表在我的javascript中，我不知道如何为Remove按钮添加另一个函数
function displayCart(){
let cartItems = localStorage.getItem("productsInCart");
cartItems = JSON.parse(cartItems);
let productContainer = document.querySelector(".products");
let cartCost = localStorage.getItem('totalCost');
console.log(cartItems);
if( cartItems && productContainer){
productContainer.innerHTML = '';
Object.values(cartItems).map(item => {
productContainer.innerHTML += `
<div class="product">
<button class="btn btn-danger" onclick="removeItems()" >Remove</button>
<img src="./img/${item.tag}.jpg">
<span>${item.name}</span>
</div>
<div class="price">
₱${item.price}.00
</div>
<div class="quantity"> <span>${item.inCart}</span> </div>
<div class="total">
₱${item.inCart * item.price}.00
</div>
`
});
productContainer.innerHTML += `
<div class="basketTotalContainer">
<h4 class="basketTotalTitle">
Cart Total
</h4>
<h4 class="basketTotal">
₱${cartCost}.00
</h4>
`;
}
}
我试着把另一个函数localstorage.removeItem();在那个函数上面，但是它也不起作用
remove item from object array
这里描述了一个可以用来管理购物车的方法的示例。
购物车存储在对象的数组中，该数组非常适合作为json字符串存储在本地存储(和网络传输)中，并且可以轻松地将数据呈现到html页面。我在这个示例中使用的示例数据结构是:
const cart = [
{name: "shoes", price: 85, tag:"img_001", inCart: 1},
{name: "hat", price: 42, tag:"img_002", inCart: 1},
{name: "belt", price: 24, tag:"img_003", inCart: 2}
] // end cart array
为了将数据存储在localstorage中，使用JSON.stringify(cart)将数组转换为字符串，使用JSON.parse(stringName)将检索到的字符串转换为javascript数组(其中stringName是读取的本地存储存储的变量)。
remove函数必须知道哪个项目的remove按钮被点击了
实现这一点的最简单的方法是将cart数组中每个对象的索引包含到它的相关按钮，当购物车呈现到html文档时。
renderCart()函数(读取购物车数据并将其呈现在html文档中)将包含按钮标记的修改版本:
<button class="btn btn-danger" onclick="removeItems(${index})" >Remove</button>
注意，onclick属性现在包含了removeItems()函数的index参数。index的值来自array.map方法中的一个可选参数(它可以提供元素，在本例中是一个对象，以及它在数组中的索引位置):
array.map((element,index)=> {// both the element and its numerical index are available here;}
removeItems函数现在接收cart数组的索引，该数组包含与被单击的按钮相关的数据。在调用renderCart()函数在html文档中显示修改后的汽车之前，可以使用索引从数组中删除该元素。
function removeItems(elementIndex) {
console.log(elementIndex);
cart.splice(elementIndex, 1);
renderCart();
// code to replace local storage copy of cart goes here;
} // end function removeItems
该函数还应该替换数据的localStorage版本，为此您将需要另一个函数将其转换为json字符串并将数据设置为localStorage。
<<p>演示片段/strong>下面的代码片段演示了这些原则，应该根据您的具体情况进行调整:
const cart = [
{name: "shoes", price: 85, tag:"img_001", inCart: 1},
{name: "hat", price: 42, tag:"img_002", inCart: 1},
{name: "belt", price: 24, tag:"img_003", inCart: 2}
] // end cart array
productContainer = document.getElementById('container');
renderCart();
function renderCart() {
productContainer.innerHTML = "";
cart.map((item, index) => {
productContainer.innerHTML += `
<div class="product">
<button class="btn btn-danger" onclick="removeItems(${index})" >Remove</button>
<img src="./img/${item.tag}.jpg">
<span>${item.name}</span>
</div>
<div class="price">
price (each): $${item.price}.00
</div>
<div class="quantity"> quantity: <span>${item.inCart}</span> </div>
<div class="total">
total: $${item.inCart * item.price}.00
</div> `
});
} // end function renderCart
function removeItems(elementIndex) {
console.log(elementIndex);
cart.splice(elementIndex, 1);
renderCart();
// code to replace local storage copy of cart goes here;
} // end function removeItems<div id="container"></div>