滑动特定位置的详细信息应该存储在本地存储中吗？

Question

我正在复制此网页https://www.modsy.com/project/furniture 并且我编写了代码在每张幻灯片上都会更改图像和短语，例如三个短语和图像现在我想将图像和短语存储在本地存储中用户已完成我的 html 代码是：

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';
      });
    });

    .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;
    }

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

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

Answer 1

您是否只是想记住用户查看的最后一张幻灯片是什么？如果是这样，只需使用localStorage.setItem() 方法并利用dataset 功能为每张幻灯片设置一个标志。

如果我的假设是正确的，您的加载功能将包括以下行以默认为第一张幻灯片：

localStorage.setItem('currentSlide', '1')

每个 HTML 幻灯片都有一个数据集标签，可能类似于：

data-index="1"

然后，在您的更改幻灯片功能中，您将获取数据集值并更新 localStorage 参数：

function changeSlide() {

   // ... Whatever code you have... 

   localStorage.setItem('currentSlide', this.dataset.index);
}

如果您不希望网站记住用户离开页面后的最后位置，您也可以使用 sessionStorage：https://developer.mozilla.org/en-US/docs/Web/API/Storage

Answer 2

您可以使用 savImage 函数保存您的图像

html

<img src="../static/images/1.jpg" id="bannerImg" />

js

function saveImage() {
    var bannerImage = document.getElementById('bannerImg');
    var canvas = document.createElement("canvas");
    canvas.width = bannerImage.width;
    canvas.height = bannerImage.height;

    var ctx = canvas.getContext("2d");
    ctx.drawImage(bannerImage, 0, 0);

    var dataURL = canvas.toDataURL("image/png");

    localStorage.setItem("imgData", dataURL.replace(/^data:image\/(png|jpg);base64,/,"");
}

完成处理后，您可以从本地存储中获取图像

html

<img src="" id="tableBanner" />

js

function getImage() {
   var dataImage = localStorage.getItem('imgData');
   bannerImg = document.getElementById('tableBanner');
   bannerImg.src = "data:image/png;base64," + dataImage;

}

你必须为你的问题运行这两个函数