JavaScript中的购物卡（本地存储）

Question

我尝试在具有本地存储空间的js中创建购物车，以便刷新后，商品清单和价格都保持不变。

购物车中的每个商品都有其localStorage.setItem。

我无法解决的问题：我不知道如何在刷新后显示购物车中的所有localStorage.getItem，并且价格会覆盖，而不是更新。

$(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 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'+id+'', 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 id = $(this).closest('.produkt').attr("id");

    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();
    localStorage.removeItem('itemlist'+id+'');

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

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