Javascript 如何处理按下的后退按钮，图像应该是持久的

我有单选按钮，在那里点击它们。我正在换传送带。因为每个旋转木马都包含在一个div中，所以在documentready函数中，我隐藏了所有的旋转木马。单击单选按钮，我将获得输入的id，并显示相应的旋转木马，隐藏其余的。但问题是，当他们前进到下一个屏幕，然后回来。文档准备功能正在执行，所有旋转木马现在都隐藏了，但我希望显示用户选择的上一个旋转木马。如何处理这个问题

$(document).ready(function (){

            $('.car1').hide();
            $('.car2').hide();
            $('.car3').hide();
            $('.car4').hide();
    $(".changeprice").on("click", function() {
        var currentid = this.id;
        console.log(currentid);
        changecarousel(currentid);
    });
});



function changecarousel(id){



    switch(parseInt(id)){
        case 1:
            $('.car1').show();
            $('.car2').hide();
            $('.car3').hide();
            $('.car4').hide();
            console.log(id);
        break;

        case 2:
            $('.car1').hide();
            $('.car2').show();
            $('.car3').hide();
            $('.car4').hide();
            console.log(id);
        break;

        case 3:
            $('.car3').show();
            $('.car1').hide();
            $('.car2').hide();
            $('.car4').hide();
            console.log(id);

        break;

        case 4:
            $('.car4').show();
            $('.car1').hide();
            $('.car2').hide();
            $('.car3').hide();
            console.log(id);
        break;

    }

}

你最好的选择是

在changecarousel函数中，需要将id存储到某个持久状态存储（推荐的本地存储）。然后在popState上，查找存储的id并再次调用changecarousel函数。

您的最佳选择是

---

在changecarousel函数中，需要将id存储到某个持久状态存储（推荐的本地存储）。然后在popState上，查找存储的id并再次调用changecarousel函数。

您可以使用本地存储来存储用户所做的选择。但是，这项技术是在较新的浏览器中实现的（因此，如果强制要求，请注意旧版本的支持）

看看这段代码，它使用本地存储实现了一个持久的TODO列表。尝试向列表中添加项目并重新加载页面。

另外，请记住，您必须在向导结束时清除存储条目，这样用户就可以轻松地重新开始。如果用户没有完成所有步骤就离开了页面，您可能还必须清除所选内容

更新：

感谢您提供代码段，请尝试使用以下示例：

---

您可以使用本地存储来存储用户所做的选择。但是，这项技术是在较新的浏览器中实现的（因此，如果强制要求，请注意旧版本的支持）

看看这段代码，它使用本地存储实现了一个持久的TODO列表。尝试向列表中添加项目并重新加载页面。

另外，请记住，您必须在向导结束时清除存储条目，这样用户就可以轻松地重新开始。如果用户没有完成所有步骤就离开了页面，您可能还必须清除所选内容

更新：

感谢您提供代码段，请尝试使用以下示例：

---

请使用下面的代码，我认为这将为你工作

    $(document).ready(function (){

$('.car1').hide();
$('.car2').hide();
$('.car3').hide();
$('.car4').hide();

if(localStorage.getItem("lastCarousel") != null){
  $('.'+localStorage.getItem("lastCarousel")).show();
  localStorage.removeItem("lastCarousel");
}
    $(".changeprice").on("click", function() {
    var currentid = this.id;
    console.log(currentid);
    changecarousel(currentid);
});
  });


  function changecarousel(id){

                $('.car1').hide();
      $('.car2').hide();
        $('.car3').hide();
        $('.car4').hide();

switch(parseInt(id)){
    case 1:
        $('.car1').show();
        localStorage.setItem("lastCarousel", "car1");
        console.log(id);
    break;

    case 2:
        $('.car2').show();
        localStorage.setItem("lastCarousel", "car2");
        console.log(id);
    break;

    case 3:
        $('.car3').show();
        localStorage.setItem("lastCarousel", "car3");
        console.log(id);

    break;

    case 4:
        $('.car4').show();
        localStorage.setItem("lastCarousel", "car4");
        console.log(id);
    break;

}

  }

---

谢谢

请使用下面的代码，我认为这对您很有用

    $(document).ready(function (){

$('.car1').hide();
$('.car2').hide();
$('.car3').hide();
$('.car4').hide();

if(localStorage.getItem("lastCarousel") != null){
  $('.'+localStorage.getItem("lastCarousel")).show();
  localStorage.removeItem("lastCarousel");
}
    $(".changeprice").on("click", function() {
    var currentid = this.id;
    console.log(currentid);
    changecarousel(currentid);
});
  });


  function changecarousel(id){

                $('.car1').hide();
      $('.car2').hide();
        $('.car3').hide();
        $('.car4').hide();

switch(parseInt(id)){
    case 1:
        $('.car1').show();
        localStorage.setItem("lastCarousel", "car1");
        console.log(id);
    break;

    case 2:
        $('.car2').show();
        localStorage.setItem("lastCarousel", "car2");
        console.log(id);
    break;

    case 3:
        $('.car3').show();
        localStorage.setItem("lastCarousel", "car3");
        console.log(id);

    break;

    case 4:
        $('.car4').show();
        localStorage.setItem("lastCarousel", "car4");
        console.log(id);
    break;

}

  }

---

谢谢

请显示您的代码：）显示代码，以便人们能够提供帮助。一分钟。。我会发布我已经更新了代码。请显示您的代码：）显示代码，以便人们可以提供帮助。一分钟。。我会把代码更新的。

    $(document).ready(function (){

$('.car1').hide();
$('.car2').hide();
$('.car3').hide();
$('.car4').hide();

if(localStorage.getItem("lastCarousel") != null){
  $('.'+localStorage.getItem("lastCarousel")).show();
  localStorage.removeItem("lastCarousel");
}
    $(".changeprice").on("click", function() {
    var currentid = this.id;
    console.log(currentid);
    changecarousel(currentid);
});
  });


  function changecarousel(id){

                $('.car1').hide();
      $('.car2').hide();
        $('.car3').hide();
        $('.car4').hide();

switch(parseInt(id)){
    case 1:
        $('.car1').show();
        localStorage.setItem("lastCarousel", "car1");
        console.log(id);
    break;

    case 2:
        $('.car2').show();
        localStorage.setItem("lastCarousel", "car2");
        console.log(id);
    break;

    case 3:
        $('.car3').show();
        localStorage.setItem("lastCarousel", "car3");
        console.log(id);

    break;

    case 4:
        $('.car4').show();
        localStorage.setItem("lastCarousel", "car4");
        console.log(id);
    break;

}

  }