title: jquery keep div visible-select option even when you refresh a page
body: <p>I searched this site and around the net, but I have not found anything that I would solve my problem.</p>
  
  <p>I have 4 radio, that if you select show / hide the div containing 4 registration forms . This works perfectly .</p>
  
  <p>I have 2 select populated by containing and countries. This works perfectly .</p>
  
  <p><strong>I have 2 problems :</strong></p>
  
  <p>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 .</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>I would like the choice of the continent and the country made ​​by the user remains selected even when you refresh the page</p>
  
  <p>I'm learning jquery recently .</p>
  
  <p>I hope someone give me a hand.</p>
  
  <p>I hope to be as clear as possible .</p>
  
  <p>Sorry for the bad English.</p>
  
  <p><strong>This is the html code:</strong></p>
  
  <pre><code>&lt;select id="continent" onchange="countryChange(this);" class="elementiForm"&gt;
        &lt;option value="empty"&gt;Seleziona un Continente&lt;/option&gt;
        &lt;option value="Europa"&gt;Europa&lt;/option&gt;    
        &lt;option value="Nord America"&gt;Nord America&lt;/option&gt;
        &lt;option value="Sud America"&gt;South America&lt;/option&gt;
        &lt;option value="Asia"&gt;Asia&lt;/option&gt;
        &lt;option value="Oceania"&gt;Oceania&lt;/option&gt;
        &lt;option value="Africa"&gt;Africa&lt;/option&gt;        
  &lt;/select&gt;
  
  &lt;label for="country" class="labelForm"&gt;Seleziona uno Stato&lt;/label&gt;
        &lt;select id="country" class="elementiForm"&gt;
        &lt;option value="0" &gt;Seleziona uno Stato&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;!-- below the div that contain the headlights form --&gt;
  &lt;div id="contatti_RS" class="red box"&gt;
      societa form here ...
  &lt;/div&gt;
  
  &lt;div id="privato" class="green box"&gt;
      privato form here ...
  &lt;/div&gt;
  
  &lt;div id="ditta_professionista" class="blue box"&gt;
      ditta_professionista form here ...
  &lt;/div&gt;
  
  &lt;div id="associazione" class="black box"&gt;
      associazione form here ...
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>this is my jquery to show / hide divs</strong></p>
  
  <pre><code>$(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();
              }
  
  
  
          });
  </code></pre>
  
  <p><strong>this is my jquery that controls whether the radio is selected on page refresh</strong></p>
  
  <pre><code>$(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})
          );
      });
  });  
  </code></pre>