Remember what user selected on previous page

Question

tis is for the first page

<script>$(function() {
    $('#Gender').change(function() {
        localStorage.setItem('todoData', this.value);
    });
</script>

<script>$(function() {
    $('#men').change(function() {
        localStorage.setItem('todoData1', this.value);
    });
</script>
<script>$(function() {
    $('#mtsm').change(function() {
        localStorage.setItem('todoData2', this.value);
    });
</script>










this is for the next page 

<script>
  if(localStorage.getItem('todoData')){
        $('#Gender').val(localStorage.getItem('todoData'));
    }
});
</script>

<script>
  if(localStorage.getItem('todoData1')){
        $('#men').val(localStorage.getItem('todoData1'));
    }
});
</script>

<script>
  if(localStorage.getItem('todoData2')){
        $('#mtsm').val(localStorage.getItem('todoData2'));
    }
});
</script>

I would like to know how can I display something on the second page by remembering what the user chose on the first page. On the first page I have a drop down menu and the user has choices on what shirt they want the can pick between male female, long sleeve, short sleeve, and color when they choose one of these an image appears inside a div the image is the front part of the shirt. What I want is for site to remember what type and color shirt the user chose and display the back part of the shirt of the same style and color without having a drop down menu. I have heard of using cookies but I don't know if that is efficient and I have no idea where to start.

function fctCheck(gender) {
  var elems = document.getElementsByName("subselector");
  for (var i = 0; i < elems.length; i++) {
    elems.item(i).style.display = "none";
  }
  document.getElementById(gender).style.display = "block";
}


$('#men').on('change', function() {
  $("#mtsm").css('display', (this.value == 'tsm') ? 'block' : 'none');
});



$(document).ready(function() {
  $('.colore.active').each(function() {
    $('.container ').css('background-image', 'url(' + $(this).data("image") + ')');
  });
  $('.colore').on('click', function() {
    $('.container').css('src', '');
    $('.container ').css('background-image', 'url(' + $(this).data("image") + ')');
    $('.container7').css('background-image', 'url(' + $(this).data("image-back") + ')');
  });
  $('#toggler').click(function() {
    var tmp = $('.container').css('background-image');
    $('.container').css('background-image', $('.container7').css('background-image'));

    $('.container7').css('background-image', tmp);
  });
});

<select id="Gender" onchange="fctCheck(this.value);">
        <option value="">Choose Gender</option>
        <option value="men">Men</option>
        <option value="wemen">Wemen</option>
        <option value="girls">Girls</option>
        <option value="boys">boys</option>
    </select>  
    <br>
       <br>
    <select id="men" name="subselector" style="display:none">
      <option value="">Choose an item</option> 
      <option value="tsm">T-Shirt</option>
      <option value="lsm">long sleeve</option>
     <option value="tankm">Tank Top</option>
     <option value="fzhm">Full zip Hood</option>
     <option value="pohm">Pull over Hood</option>
     <option value="fzfm">Full zip Fleece</option>
     <option value="fm">Fleece</option>
    </select>  
 
    
    <select id="wemen" name="subselector" style="display:none">
        <option value="slw">short sleeve</option>
 
    </select>  
    
     <select id="girls" name="subselector" style="display:none">
        <option value="shortsg">shorts</option>
        
    </select>  
 <select id="boys" name="subselector" style="display:none">
        <option value="tshirtb">tshirt</option>
       
    </select>  
     <div style='display:none;' id="wsl">
                       <div class="colore white" data-image="https://opensource.org/files/osi_keyhole_300X300_90ppi.png">
                </div>
                <div class="colore black" data-image="http://mebe.co/ford">
                </div>
                <div class="colore yellow" data-image="http://mebe.co/f150">
                </div>
                <div class="colore orange" data-image="http://mebe.co/yukon">
                </div>
                <div class="colore red" data-image="http://mebe.co/370z">
                </div>
            </div>
            
              <div style='display:none;' id="mtsm">
    <div class="colore white active" data-image="http://torcdesign.com/shirts/white.jpg" data-image-back="http://amp.site88.net/shirts/whiteback.jpg">
    </div>
    <div class="colore black" data-image="http://torcdesign.com/shirts/black.jpg" data-image-back="http://amp.site88.net/shirts/whiteback.jpg">
    </div>
    <div class="colore yellow" data-image="http://torcdesign.com/shirts/yellow.jpg" data-image-back="http://amp.site88.net/shirts/orange.jpg">
    </div>
    <div class="colore orange" data-image="http://torcdesign.com/shirts/orange.jpg" data-image-back="http://amp.site88.net/shirts/yellow.jpg">
    </div>
    <div class="colore red" data-image="http://torcdesign.com/shirts/red.jpg" data-image-back="http://amp.site88.net/shirts/black.jpg">
    </div>
  </div> 

Answer 1

Cookie is one way to look at it. On the other hand we can use localStorage. Setting items in localStorage is easier.

Another way to go is using url parameters. You can use query string to store info:

/?info1=foo&info2=bar

Accessing these info can be done both in server-side and client-side. You can use javascript to get these info, see this link

Answer 2

If I'm not mistaken, the javascript local storage object will serve this purpose quite well.

For example, whenever the user selects an option, set it as so...

localStorage.option1 = "wow cool option text here"

Then retrieve it on the next page with...

var option1 = localStorage.option1

Check this link out for more info
http://www.w3schools.com/html/html5_webstorage.asp

EDIT As pointed out by Herm Luna in the comments, this will not work in super old browsers, there is a table in the link I added that outlines this