Question

＆＃13;

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>

＆＃13;

我想知道如何通过记住用户在第一页上选择的内容在第二页上显示内容。在第一页我有一个下拉菜单，用户可以选择他们想要什么衬衫，可以选择男性女性，长袖，短袖和颜色，当他们选择其中一个图像出现在div内图像是衬衫的前部。我想要的是网站要记住用户选择什么类型和颜色的衬衫，并显示相同风格和颜色的衬衫的后部，而没有下拉菜单。我听说过使用cookies，但我不知道这是否有效，我不知道从哪里开始。

＆＃13;

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);
  });
});

＆＃13;

<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>

＆＃13;

Answer 1

如果我没有弄错的话，javascript本地存储对象将很好地服务于此目的。

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

localStorage.option1 = "wow cool option text here"

然后使用...

在下一页上检索它

var option1 = localStorage.option1

查看此链接以获取更多信息
http://www.w3schools.com/html/html5_webstorage.asp

修改的正如Herm Luna在评论中所指出的，这在超级旧浏览器中不起作用，我添加的链接中有一个表格概述了这个

Answer 2

Cookie是一种查看它的方法。另一方面，我们可以使用localStorage。在localStorage中设置项目更容易。

另一种方法是使用url参数。您可以使用查询字符串来存储信息：

/?info1=foo&info2=bar

访问这些信息可以在服务器端和客户端完成。您可以使用javascript获取这些信息，请参阅此link

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

2 个答案: