jquery keep div visible-select option even when you refresh a page

Question

I searched this site and around the net, but I have not found anything that I would solve my problem.

I have 4 radio, that if you select show / hide the div containing 4 registration forms . This works perfectly .

I have 2 select populated by containing and countries. This works perfectly .

I have 2 problems :

1 ) My problem is that if you update the page or the user clicks the submit button the div disappears , that is, the page returns to its initial state .

I would like the div shown to remain visible , even when you refresh the page or if there are errors in the validation of the module.

2) The second problem is always when you reload the page 2 select that contain the " continents" and countries , they return to the initial state , I do not stay on the choice made by the user.

I would like the choice of the continent and the country made ​​by the user remains selected even when you refresh the page

I'm learning jquery recently .

I hope someone give me a hand.

I hope to be as clear as possible .

Sorry for the bad English.

This is the html code:

<select id="continent" onchange="countryChange(this);" class="elementiForm">
      <option value="empty">Seleziona un Continente</option>
      <option value="Europa">Europa</option>    
      <option value="Nord America">Nord America</option>
      <option value="Sud America">South America</option>
      <option value="Asia">Asia</option>
      <option value="Oceania">Oceania</option>
      <option value="Africa">Africa</option>        
</select>

<label for="country" class="labelForm">Seleziona uno Stato</label>
      <select id="country" class="elementiForm">
      <option value="0" >Seleziona uno Stato</option>
</select>

<!-- below the div that contain the headlights form -->
<div id="contatti_RS" class="red box">
    societa form here ...
</div>

<div id="privato" class="green box">
    privato form here ...
</div>

<div id="ditta_professionista" class="blue box">
    ditta_professionista form here ...
</div>

<div id="associazione" class="black box">
    associazione form here ...
</div>

this is my jquery to show / hide divs

$(document).ready(function () {

      $('input[type="radio"]').click(function(){
            if($(this).attr("value")=="societa"){
                $(".box").hide();
                $(".red").show();
            }
            if($(this).attr("value")=="privato"){
                $(".box").hide();
                $(".green").show();
            }
             if($(this).attr("value")=="ditta_professionista"){
                $(".box").hide();
                $(".blue").show();
            }
            if($(this).attr("value")=="associazione"){
                $(".box").hide();
                $(".black").show();
            }



        });

this is my jquery that controls whether the radio is selected on page refresh

$(function()
{
    $('input[type=radio]').each(function()
    {
        var state = JSON.parse( localStorage.getItem('radio_'  + this.id) );

        if (state) this.checked = state.checked;
        });
});

$(window).bind('unload', function()
{
    $('input[type=radio]').each(function()
    {
        localStorage.setItem(
            'radio_' + this.id, JSON.stringify({checked: this.checked})
        );
    });
});  

Answer 1

If possible use AJAX (jQuery get or post)

If using AJAX is not possible, you can remember your settings in cookie. E.g. you can set

exp = Date.now();
exp += 84600000; //validity one day
document.cookie = "mycookie=" + some_value + "expires=" +
    (new Date(d)).toGMTString();

After reload you then parse the cookie (Read a javascript cookie by name) and set the page state accordingly.