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存储键值对。因此，当您存储项目列表和 somalist 时，如果它们已经存储，则其值将被覆盖。

为此，您有两种解决方案：

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

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

希望有帮助，加油！

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

1 个答案: