如何更新localStorage变量并发送给Ajax调用

Question

I have a list of options. When you click one option I want to update the localStorage value with the data-id value of the clicked on link and then send the updated localStorage value through an Ajax call, but the problem is that localStorage value doesn't get actually updated unless the window refreshes. Is there a way to have the localStorage value updated without a full window refresh:

HTML

<div class="phonechoice" data-id="1">Option 1</div>
<div class="phonechoice" data-id="2">Option 2</div>

JQUERY

 //Update localStorage variable on click and send to ajax call

 $(document).on("click", '.phonechoice', function(){
    var mcid=$(this).data("id");
    localStorage.mastercaseid = mcid; // CHANGE LOCALSTORAGE VALUE
    // location.reload(); //WANT TO STOP THIS RELOAD 
    getresult(url_pullrecords); //execute ajax call
  });

AJAX CALL

         function getresult(url_pullrecords) {
             $.ajax
             ({
                 context: this,
                 crossDomain: true,
                 url: url_pullrecords,
                 type: "GET",
                 data:  {mcid:localStorage.mastercaseid}, 
                 //THIS VALUE ABOVE DOESN'T GET UPDATED UNLESS WINDOW IS REFRESHED
                 beforeSend: function(){
                 },
                 success: function(data){
                   $(".btnholder").before(data);
                 }                   
             });
            }

Answer 1

Try this:

$(document).on("click", '.phonechoice', function(e){
     var mcid=$(this).data("id");
     localStorage.setItem("mastercaseid", mcid); // CHANGE LOCALSTORAGE VALUE
      // location.reload(); //WANT TO STOP THIS RELOAD 
     e.stopPropagation();
     getresult(); //execute ajax call
 });