我目前正在進行學生專案，我被困在購物車頁面上的洗掉產品上，我可以在首頁上洗掉它們，但是當涉及到在 localStorage 上洗掉它時，老實說我不知道??該怎么做。
我知道使用 localStorage.setItem 允許在必要時對其進行更新，但是在我撰寫的代碼中，我不知道在哪里正確放置。
我寫了這個：
// Targeting arrays
let deleteButton = document.querySelectorAll('.deleteItem');
let localStorageProducts = localStorage.getItem('Produits');
for (let i = 0; i < deleteButton.length; i ) {
// Get all remove buttons
let buttons = deleteButton[i];
// Link to his parent
let myData = deleteButton[i].closest('article');
let getStorageProducts = JSON.parse(localStorageProducts);
buttons.addEventListener("click",() =>
{
getStorageProducts.forEach(localStorageProducts =>{
if(localStorageProducts.id === myData.dataset.id){
// Delete the product
myData.remove();
localStorage.setItem('Produits',(JSON.stringify([localStorageProducts])));
}
})
})
}<section id="cart__items">
<article class="cart__item" data-id="{product-ID}" data-color="{product-color}">
<div class="cart__item__img">
<img src="../images/product01.jpg" alt="Photographie d'un canapé">
</div>
<div class="cart__item__content">
<div class="cart__item__content__description">
<h2>Nom du produit</h2>
<p>Vert</p>
<p>42,00 €</p>
</div>
<div class="cart__item__content__settings">
<div class="cart__item__content__settings__quantity">
<p>Qté : </p>
<input type="number" class="itemQuantity" name="itemQuantity" min="1" max="100" value="42">
</div>
<div class="cart__item__content__settings__delete">
<p class="deleteItem">Supprimer</p>
</div>
</div>
</div>
</article>
</section>一個例子，這里我有 4 個產品：Localstorage 中的產品
當我單擊其中一個洗掉按鈕時，它將洗掉其中的 3 個，剩下一個：
產品離開
我怎么能一一洗掉它們？
uj5u.com熱心網友回復：
@Yokke 我以這種方式重構了您的邏輯（請閱讀評論行的評論）：
//LOCAL TEST START: i used these lines to test with static local logics you can ignore this
let prods = [{id: 1, prodname: 'prod1'}, {id: 2, prodname: 'prod2'}, {id: 3, prodname: 'prod3'}];
localStorage.setItem('Produits',JSON.stringify(prods));
//LOCAL TEST END.
// i used getElementsByClassName because it's native function which is supported in all browsers even old ones.
let viewArticles = document.getElementsByClassName('cart__item');
let localStorageProducts = localStorage.getItem('Produits');
let products = JSON.parse(localStorageProducts);
// looping on Articles instead of Buttons to be able to get product ID easily
for (let article of viewArticles) {
article.addEventListener("click",function (ev)
{
// by {capturing: true}, i can access to the high clicked element
// (which is the <article> tag in our case) by .currentTarget property
const currentArticle = ev.currentTarget;
// by {capturing: true}, i can access to the exactly clicked child element
//(which is the delete button in this case by performing a check test using .target property class
const isDeleteBtnClicked = ev.target.classList.contains('deleteItem');
// if the child element is the delete button then
// delete the product and update the local storage
if(isDeleteBtnClicked){
// access to product id of the article
const productId = currentArticle.dataset.id;
products = products.filter(prd => prd.id.toString() !== productId.toString());
localStorage.setItem('Produits',JSON.stringify(products));
}
}, {capture: true}); // enable capturing instead of bubbling (top to bottom propagation)
}
有關捕獲和冒泡的更多資訊，您可以查看此
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/438462.html
標籤：javascript 循环 本地存储 产品 大车
上一篇：為什么這個while回圈，回圈？