jquery - 在 ASP.NET Core 中处理 header 中的徽章的最佳实践是什么？

Question

因此，我在标题中实现了一个小徽章，指示用户的购物车中有多少商品。

这就是我的想法:在用户登录时设置徽章值，然后在用户从购物车添加/删除时增加/减少它。

我尝试在索引页上的 jquery 中设置值，如下所示:

function loadCartBadgeVal(id) {
$.getJSON(`/Cart/GetCartCount?customerId=${id}`,
    function (data) {
        $("#cart-badge").text('' + data);
    }); 
}

这有效，但是当我重定向到另一个页面时，我的徽章值重置为 0 ..我的徽章是在部分 View 中实现的，如下所示:

<span class="badge badge-info" id="cart-badge"></span>

Answer 1

您可以使用 localStorage 保存购物车商品数量并将其显示在您网站/应用程序的任何位置。

以下代码片段访问当前域的本地存储对象，并使用Storage.setItem()向其中添加数据项。

localStorage.setItem('cartCount', 1);

读取localStorage项的语法如下:

var count= localStorage.getItem("cartCount");

删除 localStorage 项的语法如下:

localStorage.removeItem("cartCount");