如何在javascript页面刷新时保持范围滑块的最后拖动位置

我有一个由范围滑块组成的网页，它有三个值1,2,3，每个值在图像中都会有变化，一些短语现在我的要求是在页面刷新范围滑块设置为一个我不希望它我希望它恢复其最后拖动的位置以及图像和短语，甚至在页面刷新 我的CSS代码：

<style>
  .rangeslider {
    width: 50%;
    margin: 0 auto;
    position: absolute;
  }
  .myslider {
    -webkit-appearance: none;
    background: white;
    width: 100%;
    height: 20px;
    opacity: 0.8;
    margin-top: 180px;
  }
  .myslider::-webkit-slider-thumb {
    -webkit-appearance: none;
    cursor: pointer;
    background: #000080;
    width: 33%;
    height: 20px;
  }
  .myslider:hover {
    opacity: 1;
  }
  .image {
    position: relative;
    width: 400px;
    margin: 0 auto;
  }
  .image>img {
    position: absolute;
    display: none;
  }
  .image>img.visible,
  .image>img:first-child {
    display: block;
  }
  #sliderOutput>div {
    display: none;
  }
  #sliderOutput>div.visible,
  #sliderOutput>div:first-child {
    display: block;
  }
  </style>

给你

您只需要在加载时调用setter方法。我所做的是，我分离了用于单独设置数据的公共代码，并在加载和值更改时调用它。这里有一个更新的代码

window.onload = function() {
  var imagePath = "../static/images/";
  var localStorageSliderNumber;
  var localStorageImagePath;
  if (window.localStorage.getItem('sliderValue') != null) {
    localStorageSliderNumber = window.localStorage.getItem('sliderValue');
  } else {
    window.localStorage.setItem('sliderValue', '1');
    localStorageSliderNumber = 1;
  }
  if (window.localStorage.getItem('imagePath') != null) {
    imagePath = imagePath + window.localStorage.getItem('imagePath') + ".jpg";
  }
  var rangeslider = document.getElementById("sliderRange");
  var output = document.getElementById("sliderOutput");
  var images = document.getElementById("sliderImages");
  rangeslider.value = localStorageSliderNumber;
  //The common line of code extracted into a method
  setData(rangeslider, output, images, localStorageSliderNumber);
  rangeslider.addEventListener('input', function() {
    //call the method once again
    setData(rangeslider, output, images, this.value);
  });
}

function setData(rangeslider, output, images, value) {
  for (var i = 0; i < output.children.length; i++) {
    output.children[i].style.display = 'none';
    images.children[i].style.display = 'none';
  }
  i = Number(value) - 1;

  output.children[i].style.display = 'block';
  images.children[i].style.display = 'block';
  window.localStorage.setItem('imagepath', rangeslider.getAttribute('value'));
  window.localStorage.setItem('sliderValue', (i + 1));
  window.localStorage.setItem('sliderPosition', (i + 1))
}

window.onload=function（）{
var imagePath=“../static/images/”；
var localStorageSliderNumber；
var-localStorageImagePath；
if（window.localStorage.getItem（'sliderValue'）！=null）{
localStorageSliderNumber=window.localStorage.getItem（'sliderValue'）；
}否则{
window.localStorage.setItem（'sliderValue'，'1'）；
localStorageSliderNumber=1；
}
if（window.localStorage.getItem（'imagePath'）！=null）{
imagePath=imagePath+window.localStorage.getItem（'imagePath'）+“.jpg”；
}
var rangeslider=document.getElementById（“sliderRange”）；
var output=document.getElementById（“sliderOutput”）；
var images=document.getElementById（“幻灯片图像”）；
RangeSloider.value=localStorageSliderNumber；
//提取到方法中的公共代码行
setData（范围滑块、输出、图像、localStorageSliderNumber）；
rangeslider.addEventListener（'input'，function（）{
//再次调用该方法
设置数据（范围滑块、输出、图像、此.value）；
});
}
函数设置数据（范围滑块、输出、图像、值）{
for（var i=0；i

这是

window.onload = function()
{
  var imagePath = "../static/images/";
  var localStorageSliderNumber;
  var localStorageImagePath; 


  if (window.localStorage.getItem('sliderValue') != null) {
    localStorageSliderNumber = window.localStorage.getItem('sliderValue');
  } else {
    window.localStorage.setItem('sliderValue', '1');
    localStorageSliderNumber = 1;
  }
  if (window.localStorage.getItem('imagePath') != null) {
    imagePath = imagePath + window.localStorage.getItem('imagePath') + ".jpg";
  }
  var rangeslider = document.getElementById("sliderRange");
  var output = document.getElementById("sliderOutput");
  var images = document.getElementById("sliderImages");

  rangeslider.addEventListener('input', function() {
    for (var i = 0; i < output.children.length; i++) {
      output.children[i].style.display = 'none';
      images.children[i].style.display = 'none';
    }
    i = Number(this.value) - 1;
    output.children[i].style.display = 'block';
    images.children[i].style.display = 'block';
    window.localStorage.setItem('imagepath', rangeslider.getAttribute('value'));
    window.localStorage.setItem('sliderValue', (i+1));


});
}

       [1]: https://codepen.io/lakshmi123__/pen/abzYeLP

window.onload = function() {
  var imagePath = "../static/images/";
  var localStorageSliderNumber;
  var localStorageImagePath;
  if (window.localStorage.getItem('sliderValue') != null) {
    localStorageSliderNumber = window.localStorage.getItem('sliderValue');
  } else {
    window.localStorage.setItem('sliderValue', '1');
    localStorageSliderNumber = 1;
  }
  if (window.localStorage.getItem('imagePath') != null) {
    imagePath = imagePath + window.localStorage.getItem('imagePath') + ".jpg";
  }
  var rangeslider = document.getElementById("sliderRange");
  var output = document.getElementById("sliderOutput");
  var images = document.getElementById("sliderImages");
  rangeslider.value = localStorageSliderNumber;
  //The common line of code extracted into a method
  setData(rangeslider, output, images, localStorageSliderNumber);
  rangeslider.addEventListener('input', function() {
    //call the method once again
    setData(rangeslider, output, images, this.value);
  });
}

function setData(rangeslider, output, images, value) {
  for (var i = 0; i < output.children.length; i++) {
    output.children[i].style.display = 'none';
    images.children[i].style.display = 'none';
  }
  i = Number(value) - 1;

  output.children[i].style.display = 'block';
  images.children[i].style.display = 'block';
  window.localStorage.setItem('imagepath', rangeslider.getAttribute('value'));
  window.localStorage.setItem('sliderValue', (i + 1));
  window.localStorage.setItem('sliderPosition', (i + 1))
}