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

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 函数的文本字符串