Question

我的代码有一个我无法解决的小问题。刷新后，价格是正确的，但是在列表li中，删除的项目仍然保留。我评论了必须从本地存储中删除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 id = $(this).closest('.produkt').attr("id");

        var suma = 0;

        var li = "<li data="+id+" 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 id = $(this).closest('.produkt').attr("id");
        var li = "<li data="+id+" 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();
        /* how to remove this li from localStorage? */

        $("#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('sumalist') != null) {

        $("#koszyk").append(localStorage.getItem('itemlist'));
        $("#cena span").text(localStorage.getItem('sumalist'));
    }

Answer 1

实际上，您需要使用window.localStorage.removeItem()方法：

$(this).closest("li").remove();
/* how to remove this li from localStorage? */

只需使用：

window.localStorage.removeItem('itemlist');

您可以详细了解localStorage here。

Answer 2

删除li后，您需要使用DOM中当前可用的列表项重置localStorage项列表。

// store a reference to parent tag of all li.
   var $ul = $(this).parents('ul');
    $(this).closest("li").remove();
    // after removing this li Item reset your local Storage as

    localStorage.setItem('itemlist',$ul.html());

动态删除本地存储中的li项目

2 个答案: