如何在 javascript 中保留范围滑块的上次拖动位置，即使在页面刷新时也是如此

Question

我有一个由范围滑块组成的网页，每个值有三个值 1,2,3 图像会发生变化，现在我的要求是页面刷新范围滑块设置为我不想要的那个我希望它恢复其上次拖动的位置以及图像和短语，即使在页面刷新时也是如此 我的 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;
}
.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;
}
</style>

我的 HTML 代码：

<div class="image mt-3 mb-3" id="sliderImages">
<img src="/static/images/1.jpg" width="400" height="180"><!--Image1-->
<img src="/static/images/2.jpg" width="400" height="180"><!--Image2-->
<img src="/static/images/3.jpg" width="400" height="180"><!--Image3-->
</div><br><!-- End of Image sliding-->
<!--Range slider starts-->
<div class="rangeslider">
<input type="range" min="1" max="3" value="1" class="myslider" id="sliderRange" onload="showVal(this.value)">
<div class="container">
<div id="sliderOutput">
<div class="col-4" id="range_1">
<h6 class="display-6 mt-3" ><b><center>Starting from scratch</center></b></h6>
<p class="demo"><center>I'm designing the room </p>
</div>
<div class="col-4" id="range_2">
<h6 class="display-6 mt-3"><b>Somewhere in Between</b></h6>
<p class="demo">I'm designing around a few pieces I already own</p>
</div>
<div class="col-4" id="range_3">
<h6 class="display-6 mt-3"><b>Mostly furnished</b></h6>
<p class="demo">I want to put the finishing touches on my room</p>
</div>
</div><!--End of Range slider-->

我的 Js 代码：

window.onload = function()
{
var imagePath = "../static/images/";
var localStorageSliderNumber;
var localStorageImagePath; 

if (window.localStorage.getItem('sliderValue') != null) {
localStorageSliderNumber = window.localStorage.getItem('sliderValue');
} else {
window.localStorage.setItem('sliderValue', '1');
localStorageSliderNumber = 1;
}
if (window.localStorage.getItem('imagePath') != null) {
imagePath = imagePath + window.localStorage.getItem('imagePath') + ".jpg";
}
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';
window.localStorage.setItem('imagepath', rangeslider.getAttribute('value'));
window.localStorage.setItem('sliderValue', (i+1));

});
}

在这里，我将值存储在本地存储中，即滑块值，但现在我想保留范围滑块的最后一个拖动位置以及短语和图像

[1]: https://codepen.io/lakshmi123__/pen/abzYeLP

Answer 1

你去吧。

您只需要在加载时调用 setter 方法即可。我所做的是，我隔离了单独设置数据的通用代码，并在加载和值更改时调用它。下面是更新的代码。

window.onload = function() {
var imagePath = "../static/images/";
var localStorageSliderNumber;
var localStorageImagePath;
if (window.localStorage.getItem('sliderValue') != null) {
localStorageSliderNumber = window.localStorage.getItem('sliderValue');
} else {
window.localStorage.setItem('sliderValue', '1');
localStorageSliderNumber = 1;
}
if (window.localStorage.getItem('imagePath') != null) {
imagePath = imagePath + window.localStorage.getItem('imagePath') + ".jpg";
}
var rangeslider = document.getElementById("sliderRange");
var output = document.getElementById("sliderOutput");
var images = document.getElementById("sliderImages");
rangeslider.value = localStorageSliderNumber;
//The common line of code extracted into a method
setData(rangeslider, output, images, localStorageSliderNumber);
rangeslider.addEventListener('input', function() {
//call the method once again
setData(rangeslider, output, images, this.value);
});
}
function setData(rangeslider, output, images, value) {
for (var i = 0; i < output.children.length; i++) {
output.children[i].style.display = 'none';
images.children[i].style.display = 'none';
}
i = Number(value) - 1;
output.children[i].style.display = 'block';
images.children[i].style.display = 'block';
window.localStorage.setItem('imagepath', rangeslider.getAttribute('value'));
window.localStorage.setItem('sliderValue', (i + 1));
window.localStorage.setItem('sliderPosition', (i + 1))
}

这是更新的笔