how do I set a .click jquery variable for use on page reload?

Question

During the course of a page I am choosing a picture frame to frame an image with matting - that part works. What I want to do: Say The matting is set at 1 mat and the frame is set for Frame8 if I decide I want 2 mats how will I be able load frame8 when the page reloads. Right now it reverts back to the default frame. Jquery and php are used in the page.

in the header:

  $('#mattes-radio-0').click(function() {
    window.location = 'index-custom.php?mattes=0'; 
   });  
   $('#mattes-radio-1').click(function() {
    window.location = 'index-custom.php?mattes=1';
   });  
   $('#mattes-radio-2').click(function() {
    window.location = 'index-custom.php?mattes=2';
   });  
   $('#mattes-radio-3').click(function() {
    window.location = 'index-custom.php?mattes=3';
   });

in the body:
Javascript var is set here of what frame I clicked -

$('#frame$frame_id[$i]').click(function() {  
 $('#top-left-frame').html('<img src=\"$upper_left[$i]\" alt=\"\" />');  
 $('#top-mid-frame').css('background-image','url($upper_middle[$i])');   
 $('#top-right-frame').html('<img src=\"$upper_right[$i]\" alt=\"\" />');  
 $('#mid-left-frame').css('background-image','url($middle_left[$i])');   
 $('#mid-right-frame').css('background-image','url($middle_right[$i])');   
 $('#bottom-left-frame').html('<img src=\"$bottom_left[$i]\" alt=\"\" />');  
 $('#bottom-mid-frame').css('background-image','url($bottom_middle[$i])');   
 $('#bottom-right-frame').html('<img src=\"$bottom_right[$i]\" alt=\"\"   />');
 $('#frame-select').html('$prod_id');
 $('#pid-form').val('$frame_id[$i]');
 $('#oa_id-form').val('$prod_id');
 var frameState = $(this).attr('id');
    alert(frameState + ' was clicked.');


});  


<tr>
         <td>
No Mats:  <input type="radio" name="mattes-radio" align="middle"<?php if($_GET['mattes'] == 0){ echo 'checked="checked"';} ?> id="mattes-radio-0"> 
         </td>
         </tr>       
          <tr>
         <td>
          Single Mat: <input type="radio" name="mattes-radio" <?php if($_GET['mattes'] == 1){ echo 'checked="checked"';} ?> id="mattes-radio-1"> 
         </td>
          </tr>  
         <tr>
<td>
          Double Mat: <input type="radio" name="mattes-radio" <?php if($_GET['mattes'] == 2){ echo 'checked="checked"';} ?> id="mattes-radio-2"> 
         </td>
          </tr>  
 <tr>
         <td>
          Triple Mat: <input type="radio" name="mattes-radio" <?php if($_GET['mattes'] == 3){ echo 'checked="checked"';} ?> id="mattes-radio-3"> 
         </td>

         </tr>

Answer 1

Setting a cookie and reading it on page load is probably the easiest option.