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时设置<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;
 }

Answer 2

一种选择是在加载页面时检查本地存储中的值。这样可以消除对load_data函数的需求，并且似乎也可以解决问题。

var slider = document.getElementById("ran");
var output = document.getElementById("demo");
var server = localStorage.getItem("server");

slider.value = (server) ? server : slider.value;

output.innerHTML = server ? server : slider.value;

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

    localStorage.setItem("server", slider.value);
}

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

2 个答案: