i'm trying to make sure that even if the user refresh the page or goes back and comes back to that page, the radio button is still the same as what the user selects.

N.B: the value of the radio button is saved in sessions

<div class="col-md-1 ps-md-1">
            <input class="align-middle h-100" type="radio" name="deliveryOption"  id="{{option.id}}"
              value="{{option.id}}">
          </div>

my ajax

    $('input[type=radio][name=deliveryOption]').on('change', function(e) {
      e.preventDefault();
      $.ajax({
        type: "POST",
        url: '{% url "checkout:cart_update_delivery" %}',
        data: {
          deliveryoption: $(this).val(),
          csrfmiddlewaretoken: "{{csrf_token}}",
          action: "post",
        },
        success: function (json) {
          document.getElementById("total").innerHTML = json.total;
          document.getElementById("delivery_price").innerHTML = json.delivery_price;
          
        },
        error: function (xhr, errmsg, err) {},
      });
      
    });
  </script>

my view

def cart_update_delivery(request):
cart = Cart(request)
if request.POST.get("action") == "post":
    delivery_option = int(request.POST.get("deliveryoption"))
    delivery_type = DeliveryOptions.objects.get(id=delivery_option)
    updated_total_price = cart.cart_update_delivery(delivery_type.delivery_price)

    session = request.session
    if "purchase" not in request.session:
        session["purchase"] = {
            "delivery_id": delivery_type.id,
        }
    else:
        session["purchase"]["delivery_id"] = delivery_type.id
        session.modified = True

    response = JsonResponse({"total": updated_total_price, "delivery_price": delivery_type.delivery_price})
    return response