如何在本地存储中保存范围滑块的详细信息？

Question

我正在复制这个网页https://www.modsy.com/project/furniture并且我写了代码在每张幻灯片上都会有图像和短语的变化，就像现在有三个短语和图像我想存储图像和用户最终确定的本地存储中的短语我的 html 代码是：

<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>   

我的 CSS 代码是：

<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>

我的JS代码是：

<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>

我的主要要求如果滑块在第一个短语和图像应该存储在本地存储中，如果它在第二个细节应该存储。

Answer 1

关于您想在localStorage存储什么json没有足够的详细信息，所以这就是为什么我要向您介绍如何在localStorage存储json的基本概念。

基本上，您不能直接将json存储在localStorage ，但您可以将该json以string形式存储，然后将该string(json)转换为json 。 这是基本示例：

// 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 ));

当您想从localStorage获取该 json 时，您将这样做

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

Answer 2

在localStorage中你只能保存文本字符串，所以如果你想保存它每个记录只有一个值，你在localStorage中插入一个名字和值，但是如果你想保存一个对象，你必须把它转换成一个文本字符串函数 JSON.stringify