javascript - 页面刷新后保存滑动条位置
问题描述
我有以下滑动条,我想保存页面刷新后选择的滑动条的位置。目前正在保存位置,只有数字/值未正确显示。关于如何使这项工作的任何想法?
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
(<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 - 每次按下特定按钮时如何创建和删除表单?
- swift - 显示中的多个 UITableViewCell 问题
- variables - 在变量中嵌套变量
- javascript - 表单字段 条件验证
- python - 带有原始正文的 Python 请求
- c++ - 在 cpp 中找不到任何 OpenCL 平台
- recommendation-engine - 为使用用户评分的推荐系统寻找预训练的神经网络
- mongodb - 如何通过在 MongoDB 中合并另一个文档来更新现有文档
- sparql - 从 SPARQL 端点发现有关 RDF 模式的元数据的最佳方法是什么?
- flutter - 为什么带有 Flutter 的 Dio 不使用 json 标头发布带有值的文件