javascript - How to save the details of range slider in the local storage?

Question

I am replicating this webpage https://www.modsy.com/project/furniture and I wrote the code On every slide there will be changing of image and phrase like that there are three phrases and images now I want to store the image and phrase in the local storage what the user has finalized 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 id="sliderOutput">
            <div class="container">
              <div class="row mt-4">
                <div class="col-4">
                  <h6 class="display-6">Starting From Scratch</h6>
                  <p> I'm designing the room </p>
                </div>
                <div class="col-4">
                  <h6 class="display-6">Somewhere in Between</h6>
                  <p>I'm designing around a few pieces I already own</p>
                </div>
                <div class="col-4">
                  <h6 class="display-6">Mostly Furnished</h6>
                  <p>I want to put the finishing touches on my room</p>
                </div>
              </div>
            </div>
            <div class="container">
              <div class="row mt-4">
                <div class="col-4">
                  <h6 class="display-6">Starting From Scratch</h6>
                  <p> I'm designing the room </p>
                </div>
                <div class="col-4">
                  <h6 class="display-6">Somewhere in Between</h6>
                  <p>I'm designing around a few pieces I already own</p>
                </div>
                <div class="col-4">
                  <h6 class="display-6">Mostly Furnished</h6>
                  <p>I want to put the finishing touches on my room</p>
                </div>
              </div>
            </div>
            <div class="container">
              <div class="row mt-4">
                <div class="col-4">
                  <h6 class="display-6">Starting From Scratch</h6>
                  <p> I'm designing the room </p>
                </div>
                <div class="col-4">
                  <h6 class="display-6">Somewhere in Between</h6>
                  <p>I'm designing around a few pieces I already own</p>
                </div>
                <div class="col-4">
                  <h6 class="display-6">Mostly Furnished</h6>
                  <p>I want to put the finishing touches on my room</p>
                </div>
              </div>
            </div>
          </div> 

<div class="row mb-3 mt-3">
            <div class="col-4 mr-5">
              <a href="/car" class="previous">&laquo; Home</a>
            </div>
            <div class="col-4 ml-5">
              <a href="/car/project4" class="next" id="room_next">Next &raquo;</a> </div>
            </div>
          </div>   

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>

My main requirement if the slider is in the first that phrase and image should be stored in local storage like that if it is in second that details should store.

Answer 1

There is no enough details about what json you want to store in the localStorage so that's why i am giving you the basic idea of how you can store a json in localStorage.

Basically you can't store json in localStorage directly but you can store that json in form of a stringand then converting that string(json) into json. Here is the basic example :

// setting json to localStorage
var jsonToBeStoredInLocalStorae = {
 sliderImages = [
  {path : 'image-path-here'},
  {path : 'image-path-here'}
 ],
 phrase : 'your image phrase'
};

localStorage.setItem('slider_json',JSON.stringify(jsonToBeStoredInLocalStorae ));

When you want to get that json from localStorage so you will do like this

  //Here you are getting that json in `string` form from `localStorage` and parsing it to `json`
 var localStorageJson = JSON.parse(localStorage.getItem('slider_json'));