如何在范围滑块的幻灯片上将文本放入本地存储？

Question

I am using a range slider. On sliding, the images and phrases will change.

There are three stages of sliding. On sliding, the phrases and images change. On every change, that phrase and image should save to local storage. That is the problem.

My html code is:

<div class="image mt-3 mb-3" id="sliderImages">
          <img src="../static/images/1.jpg" width="400" height="180">
          <img src="../static/images/2.jpg" width="400" height="180">
          <img src="../static/images/3.jpg" width="400" height="180">
        </div><br>
        <div class="rangeslider">
          <input type="range" min="1" max="3" value="1" class="myslider" id="sliderRange">
          <div class="container">
          <div id="sliderOutput">
            <div class="col-4">

              <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">
              <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">
              <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>
        </p>

My CSS code is:

<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;
        }
        .col-4 {
          text-align: center;
        }
        .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;
        }
        #p1{
          height: 10px;
        }
      </style>

My JS Code is:

<script>
        window.addEventListener('load', function() {
        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';
        });
      });
    </script>

On sliding, the image and phrase will change. My requirement on changing the phrase and image path should store in the local storage.

Can you people please help me?

Answer 1

Put the last stored image path and slider number in localStorage and use it

<script>
    window.addEventListener('load', 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('sliderValue', rangeslider.getAttribute('value'));
      window.localStorage.setItem('imagePath', (i+1));
    });
  });
</script>