Question

目前正在开发一个电子商务网站，这是我的第一个重大项目。我是第一次在篮子日期（数量，项目等）实施本地存储。

我想要实现的是每当用户点击“添加到购物篮”时。按钮，篮子旁边的数字会增加并显示。这是非常简单的，但对于本地存储，我显然做错了什么。我假设我检错了吗？

请你能解释一下我在这里做错了什么，因为我想知道如何在这种情况下正确使用本地存储。我认为这将有助于我理解如何在正确解析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>

非常感谢您抽出宝贵的时间来帮助和回应！

Answer 1

您只是将其设置为变量而不是在本地存储中更新它。同样在addToBasket功能中，您需要检查本地存储中的数量并将其递增，然后将新数量设置为本地存储。

localStorage.setItem("basketData", JSON.stringify({
    basketQty: 1,
    products: []
}));

您可以参考此示例。我为此创建了一个原始的解决方法，你可以更好地了解它

https://jsfiddle.net/3tdn2jrv/

实施localstorage

1 个答案: