在会话中存储篮子中的数据（js）

Question

我创建了一个简单的购物篮。第一个 div 将商品添加到购物车，第二个 div 将商品从购物车中移除。

刷新浏览器后，购物车中的商品消失。您如何在会话中保存这些数据？

$(document).on("click", ".addtobasket", function () {

    $("#kontener_koszyka").fadeIn();

    var nazwa = $(this).closest('.produkt').find('.nazwa').text();
    var cena = $(this).closest('.produkt').find('.cenaprzedmiotu').text();

    var suma = 0;

    var li = "<li class='produkt_w_koszyku'><b>" + nazwa + "</b> <span class='cena_w_koszyku'>" + cena + " zł</span><span style='float: right; margin-right: 30px;' class='deleteitembasket'><i class=\"fas fa-times\"></i></span></li>";

    $("#koszyk").append(li);

    $("#koszyk .cena_w_koszyku").each(function () {
        suma += parseFloat($(this).text());
    });

    $("#cena span").text(suma.toFixed(2));
});

$(document).on('click', '.deleteitembasket', function () {

    var nazwa = $(this).closest('.produkt').find('.nazwa').text();
    var cena = $(this).closest('.produkt').find('.cenaprzedmiotu').text();

    var suma = 0;

    var li = "<li class='produkt_w_koszyku'><b>" + nazwa + "</b> <span class='cena_w_koszyku'>" + cena + " zł</span><span style='float: right; margin-right: 30px;' class='deleteitembasket'><i class=\"fas fa-times\"></i></span></li>";

    $(this).closest("li").remove();

    $("#koszyk .cena_w_koszyku").each(function () {
        suma += parseFloat($(this).text());
    });

    $("#cena span").text(suma.toFixed(2));
});

编辑： 此代码将数据存储在会话中，但是当我尝试删除单个元素 li 时，它会删除整个列表。

$(document).on("click", ".addtobasket", function () {

        $("#kontener_koszyka").fadeIn();

        var nazwa = $(this).closest('.produkt').find('.nazwa').text();
        var cena = $(this).closest('.produkt').find('.cenaprzedmiotu').text();

        var suma = 0;

        var li = "<li class='produkt_w_koszyku'><b>" + nazwa + "</b> <span class='cena_w_koszyku'>" + cena + " zł</span><span style='float: right; margin-right: 30px;' class='deleteitembasket'><i class=\"fas fa-times\"></i></span></li>";

        $("#koszyk").append(li);

        localStorage.setItem('itemlist', (localStorage.getItem('itemlist') || '') + li);

        $("#koszyk .cena_w_koszyku").each(function () {
            suma += parseFloat($(this).text());
        });

        $("#cena span").text(suma.toFixed(2));
        localStorage.setItem('sumalist', suma.toFixed(2));
    });

    $(document).on('click', '.deleteitembasket', function () {

        var nazwa = $(this).closest('.produkt').find('.nazwa').text();
        var cena = $(this).closest('.produkt').find('.cenaprzedmiotu').text();

        var suma = 0;

        var li = "<li class='produkt_w_koszyku'><b>" + nazwa + "</b> <span class='cena_w_koszyku'>" + cena + " zł</span><span style='float: right; margin-right: 30px;' class='deleteitembasket'><i class=\"fas fa-times\"></i></span></li>";

        $(this).closest("li").remove();
        /* this line remove all items in localStorage. */ localStorage.removeItem('itemlist', (localStorage.getItem('itemlist') || '') + li);

        $("#koszyk .cena_w_koszyku").each(function () {
            suma += parseFloat($(this).text());
        });

        $("#cena span").text(suma.toFixed(2));
        localStorage.setItem('sumalist', suma.toFixed(2));
    });

    if (localStorage.getItem('itemlist') != null) {
        $("#koszyk").append(localStorage.getItem('itemlist'));
        $("#cena span").text(localStorage.getItem('sumalist'));
    }

Answer 1

您必须考虑到 localStorage 存储键值对。 因此，当您存储 itemlist 和 somalist 时，如果它们已经存储，它们的值将被覆盖。

为此，您有几个解决方案：

• 您可以使用唯一的密钥保存每个项目
• 您可以保存stringify 对象，并在获取时保存parse。

我最喜欢的是对象一。因此，每次您必须为 localStorage 添加或删除某些内容时，您都会获取对象（字符串），对其进行解析，进行所需的修改并再次保存。

希望对您有所帮助，干杯！