如何在本地存儲中保存范圍滑塊的詳細信息？

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