javascript - 页面刷新后保存滑动条位置

Question

我有以下滑动条，我想保存页面刷新后选择的滑动条的位置。目前正在保存位置，只有数字/值未正确显示。关于如何使这项工作有任何想法吗？

      var slider = document.getElementById("ran");
      var output = document.getElementById("demo");
      output.innerHTML = slider.value;

      slider.oninput = function() {
          output.innerHTML = this.value;
          save_data();
      };

      function save_data() {
          var input = document.getElementById("ran");
          localStorage.setItem("server", input.value);
      }

      function load_data() {
          var input = document.getElementById("ran");
          input.value = localStorage.getItem("server");
      }

      load_data();

<span id="demo" style="font-weight: bold"></span>
    <form>
      <input type='range' min='0' max="24" step="1" class="slider" value="1" id='ran'/>
    </form>
      

 

Answer 1

您需要设置 #demo 的值(显示 slider 值的 <span>)在调用 load_data() 时

 function load_data() {
     var input = document.getElementById("ran");
     if(localStorage.getItem("server") == null){
         input.value = 1;
     } else {
         input.value = localStorage.getItem("server");
     }
     document.getElementById("demo").innerHTML = slider.value;
 }