Quelle est la meilleure pratique pour gérer un badge dans un en-tête dans asp.net core? - jquery, twitter-bootstrap, asp.net-core-2.0, badge

J'implémente donc un petit badge dans mon en-tête indiquant le nombre d'articles que l'utilisateur a dans son panier.

Voici comment j'ai pensé à le faire: définir la valeur du badge lors de la connexion de l'utilisateur, puis l'incrémenter / la décrémenter lorsque l'utilisateur ajoute / supprime de son panier.

J'ai essayé de définir la valeur dans jquery sur ma page d'index comme ceci:

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

Cela fonctionne mais lorsque je redirige vers une autre page, la valeur de mon badge est remise à 0 .. mon badge est implémenté dans une vue partielle comme celle-ci:

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

Réponses:

Vous pouvez utiliser localStorage pour enregistrer le nombre d'articles du panier et l'afficher n'importe où sur votre site / application.

L'extrait de code suivant accède à l'objet de stockage local du domaine actuel et y ajoute un élément de données à l'aide de Storage.setItem().

localStorage.setItem("cartCount", 1);

La syntaxe de lecture de l'élément localStorage est la suivante:

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

La syntaxe pour supprimer l'élément localStorage est la suivante:

localStorage.removeItem("cartCount");