Сохранение положения ползунка после обновления страницы

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>

427 2

javascript

2 ответов:

Comments

Ничего не найдено.

95faf8e76605e973 · Accepted Answer · 2018-08-31 11:14:58

Вам нужно установить значение для #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;
 }

Brian Hart · Accepted Answer · 2018-08-31 12:41:14

Одним из вариантов является проверка локального хранилища на наличие значения при загрузке страницы. Это устранит необходимость в функции 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);
}