title: On sliding the details of particular position should store in local storage?
body: <p>I am replicating this webpage <a href="https://www.modsy.com/project/furniture" rel="nofollow noreferrer">https://www.modsy.com/project/furniture</a> 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:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 &lt; 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';
        });
      });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    .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&gt;img {
        position: absolute;
        display: none;
      }
      .image&gt;img.visible,
      .image&gt;img:first-child {
        display: block;
      }
      #sliderOutput&gt;div {
        display: none;
      }
      #sliderOutput&gt;div.visible,
      #sliderOutput&gt;div:first-child {
        display: block;
      }
      #p1{
        height: 10px;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;div class="image mt-3 mb-3" id="sliderImages"&gt;
        &lt;img src="../static/images/1.jpg" width="400" height="180"&gt;
        &lt;img src="../static/images/2.jpg" width="400" height="180"&gt;
        &lt;img src="../static/images/3.jpg" width="400" height="180"&gt;
      &lt;/div&gt;&lt;br&gt;
      &lt;div class="rangeslider"&gt;
        &lt;input type="range" min="1" max="3" value="1" class="myslider" id="sliderRange"&gt;
        &lt;div id="sliderOutput"&gt;
          &lt;div class="container"&gt;
            &lt;div class="row mt-4"&gt;
              &lt;div class="col-4"&gt;
                &lt;h6 class="display-6"&gt;Starting From Scratch&lt;/h6&gt;
                &lt;p&gt; I'm designing the room &lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="col-4"&gt;
                &lt;h6 class="display-6"&gt;Somewhere in Between&lt;/h6&gt;
                &lt;p&gt;I'm designing around a few pieces I already own&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="col-4"&gt;
                &lt;h6 class="display-6"&gt;Mostly Furnished&lt;/h6&gt;
                &lt;p&gt;I want to put the finishing touches on my room&lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="container"&gt;
            &lt;div class="row mt-4"&gt;
              &lt;div class="col-4"&gt;
                &lt;h6 class="display-6"&gt;Starting From Scratch&lt;/h6&gt;
                &lt;p&gt; I'm designing the room &lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="col-4"&gt;
                &lt;h6 class="display-6"&gt;Somewhere in Between&lt;/h6&gt;
                &lt;p&gt;I'm designing around a few pieces I already own&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="col-4"&gt;
                &lt;h6 class="display-6"&gt;Mostly Furnished&lt;/h6&gt;
                &lt;p&gt;I want to put the finishing touches on my room&lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="container"&gt;
            &lt;div class="row mt-4"&gt;
              &lt;div class="col-4"&gt;
                &lt;h6 class="display-6"&gt;Starting From Scratch&lt;/h6&gt;
                &lt;p&gt; I'm designing the room &lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="col-4"&gt;
                &lt;h6 class="display-6"&gt;Somewhere in Between&lt;/h6&gt;
                &lt;p&gt;I'm designing around a few pieces I already own&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="col-4"&gt;
                &lt;h6 class="display-6"&gt;Mostly Furnished&lt;/h6&gt;
                &lt;p&gt;I want to put the finishing touches on my room&lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>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.</p>