jquery - how do i pass this bootstrap html form to next page with javascript? -

i have simple form gender drop down , temperature dropdown , want them go next page , simple outputted screen. think may have change save button well. must use javascript use php lol

  <div class="form-group">    <label for="sel1">gender:</label>    <select class="form-control" id="gender">       <option>male</option>       <option>female</option>    </select> </div>  <div class="form-group">    <label for="sel1">temperature (degrees):</label>    <select class="form-control" id="gender">       <option>fahrenheit</option>       <option>celcius</option>    </select> </div>   <div style="text-align: center;"><a href="index.html" class="btn btn-info btn-lg"> save settings</a></div> 

i think can use local storage this:

   localstorage.setitem('showinthenextpage', $('.form-group').html()); 

then, in next page:

   var fromprevpage = localstorage.getitem('showinthenextpage');    $('.form-group').html(fromprevpage); 

update : illustration

https://stackoverflow.com/a/16264547/1845408

page 1: http://jsfiddle.net/xotic750/dfqsk/

page 2: http://jsfiddle.net/xotic750/ayvpq/