目前正在电子商务网站上工作,这是我的第一个主要项目。我是第一次对篮子日期(数量,物品等)实施本地存储。
我要实现的目标是,每当用户单击“添加到购物篮”按钮时,购物篮旁边的数字就会增加并显示。这非常简单,但是使用本地存储,我显然做错了。我以为我找错了吗?
请您向我解释我在做什么错,因为我想全神贯注于如何在这种情况下正确使用本地存储。我认为这也将有助于我理解正确解析JSON产品详细信息时如何正确实现它。
请看下面的代码。
let basketData = {
basketQty: 0,
products: []
}
//LOCAL STORAGE
localStorage.setItem("basketData", JSON.stringify(basketData));
let localData = JSON.parse(localStorage.getItem("basketData"));
//INCREASE BASKET QTY INNER HTML
addToBasket.click(function(){
basketData.basketQty++;
if (basketData.basketQty > 0){
$(basketQty).html(localData.basketQty);
}
})
<nav>
<div class="logo">
<img src="images/logo.png" alt="Prime Health Logo" />
</div>
<div class="nav-links">
<ul>
<li>VITAMIN & SUPPLEMENTS</li>
<li>SPORTS & WORKOUT NUTRITION</li>
<li>WEIGHT MANAGEMENT</li>
<li>FREE FROM</li>
</ul>
</div>
<div id="basket">
<span id="item-count"></span>
<i class="fas fa-shopping-basket"></i>
</div>
</nav>
非常感谢您抽出宝贵时间来帮助和响应!
最佳答案
您只是将其设置为变量,而不是在本地存储中对其进行更新。同样,在addToBasket
功能中,您需要检查本地存储中的数量并将其递增,然后将新数量设置为本地存储。
localStorage.setItem("basketData", JSON.stringify({
basketQty: 1,
products: []
}));
您可以参考此示例。我为此创建了一个原始的解决方法,您对此会有一个更好的主意
https://jsfiddle.net/3tdn2jrv/
关于javascript - 实现本地存储,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/50926278/