即使在javascript中刷新页面，如何保留范围滑块的最后拖动位置

Question

I am having webpage consisting of a range slider which is having three values 1,2,3 for every value there will be change in image,some phrase now my requirement is on page refresh the range slider is setting to the one I dont want it I want it to restore its last dragged position along with image and phrase even on page refresh My CSS code:

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

My Html code:

<div class="image mt-3 mb-3" id="sliderImages">
  <img src="/static/images/1.jpg" width="400" height="180"><!--Image1-->
  <img src="/static/images/2.jpg" width="400" height="180"><!--Image2-->
  <img src="/static/images/3.jpg" width="400" height="180"><!--Image3-->
</div><br><!-- End of Image sliding-->
<!--Range slider starts-->
<div class="rangeslider">
  <input type="range" min="1" max="3" value="1" class="myslider" id="sliderRange" onload="showVal(this.value)">

  <div class="container">
    <div id="sliderOutput">
      <div class="col-4" id="range_1">
        <h6 class="display-6 mt-3" ><b><center>Starting from scratch</center></b></h6>
        <p class="demo"><center>I'm designing the room </p>
      </div>
      <div class="col-4" id="range_2">
        <h6 class="display-6 mt-3"><b>Somewhere in Between</b></h6>
        <p class="demo">I'm designing around a few pieces I already own</p>
      </div>
      <div class="col-4" id="range_3">
        <h6 class="display-6 mt-3"><b>Mostly furnished</b></h6>
        <p class="demo">I want to put the finishing touches on my room</p>
      </div>
    </div><!--End of Range slider-->

My Js code:

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


});
}

Here I am storing the value in the local storage ie slidervalue but now I want to retain the last dragged position of the rangeslider along with phrase and image

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

Answer 1

Here you go.

You just need to call your setter methods on load as well. What I've done is, I've segregated the common code for setting the data separately and called it both on load and on value change. Here's an updated code.

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

Here's the Updated Pen