我有以下滑动条,我想保存页面刷新后选择的滑动条的位置。目前正在保存位置,只有数字/值未正确显示。关于如何使这项工作有任何想法吗?
var slider = document.getElementById("ran");
var output = document.getElementById("demo");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
save_data();
};
function save_data() {
var input = document.getElementById("ran");
localStorage.setItem("server", input.value);
}
function load_data() {
var input = document.getElementById("ran");
input.value = localStorage.getItem("server");
}
load_data();
<span id="demo" style="font-weight: bold"></span>
<form>
<input type='range' min='0' max="24" step="1" class="slider" value="1" id='ran'/>
</form>
最佳答案
您需要设置 #demo
的值(显示 slider 值的 <span>
)在调用 load_data()
时
function load_data() {
var input = document.getElementById("ran");
if(localStorage.getItem("server") == null){
input.value = 1;
} else {
input.value = localStorage.getItem("server");
}
document.getElementById("demo").innerHTML = slider.value;
}
关于javascript - 页面刷新后保存滑动条位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52110513/