How to save a wish icon checked after page refresh -Django

Trying to keep selected icon in product cards active after page refresh

when the user refresh the page I want that the icon to remain a full heart and not an empty heart. How could I do that?

views.py

@login_required    
def add_wishlist (request):



    if request.is_ajax() and request.POST and 'attr_id' in request.POST:
        if request.user.is_authenticated:
            data = Wishlist.objects.filter(customer = request.user,product_id= int(request.POST['attr_id']))
            if data.exists():
                data.delete()
            else:
                Wishlist.objects.create(customer= request.user,product_id = request.POST['attr_id'])
    else:
        print("No Product is Found")
    
    return redirect("products:product_all")

product_all.html

           <div id='alCarrito'class="like-container">
              {% if product in wishlisted_list %}
        
              <span class="like heart " id="id" attr_id="{{product.id}}" action_url="{% url 'products:add_wishlist' %}">
              <i class="fas fa-heart"></i>   </span>
          
              {% else %}
              <span class="like" id="id" attr_id="{{product.id}}" action_url="{% url 'products:add_wishlist' %}"><i class="far fa-heart"></i></span>
        
              {% endif %}
              
            </div>

wishlist.js

$(document).ready(function(){
    $(".like").click(function(){
        var attr_id = $(this).attr('attr_id')
        var action_url = $(this).attr('action_url')
        var that = $(this)

        $.ajax({
            url: action_url,
            type: "POST",
            data: {'attr_id': attr_id },
            headers: { "X-CSRFToken": $.cookie("csrftoken") },
            success: function (response) {
                console.log("Success")
                that.toggleClass("heart");
            
            },        
        });
    });
});

Back to Top