在重新加载时保留 jQuery 滑块值

Question

我相信我已经正确地为这件事拉动了所有内容。只是想让我的滑块在页面加载时保留在上次的位置。

我将滑块值传递给隐藏字段，然后在页面重新加载时使用该字段，但是当保存功能显示正确的值并保存到数据库时，相同的隐藏值在重新加载时不可用。

滑块称为"superSlider"，其值为"sliderAmount"，隐藏字段ID为"hiddenMoney"。

我用 startSlider 调用它以使用加载方法实现它。

我用来在数据库中存储值的功能更靠下保存功能，而不是使用页面重新渲染的一部分(至少我不这么认为(。

帮助将不胜感激。 :)

function startSlider(){
$("#superSlider").slider({
range: "max",
min: 0,
max: 1000,
step: 100,
value: ($('#hiddenMoney').val() || 0),
change: function( event, ui ) {
$( "#sliderAmount" ).val(ui.value );
}
});
alert('hidden value is: ' + $('#hiddenMoney').val());
$("#sliderAmount").val($("#superSlider").slider("value"));
}
$(document).ready(function(){
$(".Save").click(function(){
$('#hiddenMoney').val($("#superSlider").slider("value"));
alert('hidden money value set to: ' + $('#hiddenMoney').val());
var moneyAmt =  $( "#superSlider" ).slider( "value" );
saveSlider(moneyAmt);
});    
});

Answer 1

您需要研究localStorage.setItem()和localStorage.getItem()。

您将在文档就绪函数中检索带有localStorage.getItem()的值，并将其作为 startSlider 中更改函数的一部分与localStorage.setItem()一起保存。

请记住，本地存储保存和检索为字符串数据类型。最好在检索值时使用parseInt()或parseFloat()，以确保获得数值以保持 jQuery 滑块函数满意。如果在检索变量后对变量执行某些数学运算，这也将为您省去许多麻烦。