Qual é a melhor prática para lidar com crachá em um cabeçalho no núcleo do asp.net? - jquery, twitter-bootstrap, asp.net-core-2.0, distintivo

Portanto, estou implementando um pequeno emblema em meu cabeçalho indicando quantos itens o usuário tem em seu carrinho.

É assim que pensei em fazer: defina o valor do emblema no login do usuário e, em seguida, apenas aumente / diminua quando o usuário adicionar / remover de seu carrinho.

Tentei definir o valor em jquery na minha página de índice assim:

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

Isso funciona, mas quando redireciono para outra página, o valor do meu emblema é redefinido para 0 .. meu emblema é implementado em uma visualização parcial como esta:

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

Respostas:

Você pode usar localStorage para salvar a contagem de itens do carrinho e mostrá-la em qualquer lugar do seu site / aplicativo.

O seguinte snippet acessa o objeto de armazenamento local do domínio atual e adiciona um item de dados a ele usando Storage.setItem().

localStorage.setItem("cartCount", 1);

A sintaxe para ler o item localStorage é a seguinte:

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

A sintaxe para remover o item localStorage é a seguinte:

localStorage.removeItem("cartCount");