javascript - 记住用户在上一页选择的内容

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>

我想知道如何通过记住用户在第一页上选择的内容在第二页上显示某些内容。在第一页上，我有一个下拉菜单，用户可以选择他们想要的衬衫，可以在男性、女性、长袖、短袖和颜色之间选择，当他们选择其中一个时，图像出现在 div 中图像是衬衫的前部。我想要的是让网站记住用户选择的衬衫类型和颜色，并在没有下拉菜单的情况下显示相同款式和颜色的衬衫的背面部分。我听说过使用 cookie，但我不知道它是否有效，而且我不知道从哪里开始。

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

如果我没记错的话，javascript 本地存储对象可以很好地满足这个目的。

例如，每当用户选择一个选项时，将其设置为...

localStorage.option1 = "wow cool option text here"

然后在下一页使用...检索它

var option1 = localStorage.option1

查看此链接了解更多信息
http://www.w3schools.com/html/html5_webstorage.asp

编辑 正如 Herm Luna 在评论中指出的那样，这在超旧浏览器中不起作用，我添加的链接中有一个表格概述了这一点