重新加载时保留 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() 检索值，并使用localStorage.setItem() 将其保存为 startSlider 中更改函数的一部分。

请记住，localStorage 作为字符串数据类型保存和检索。在检索值时使用parseInt() 或parseFloat() 是一个很好的做法，以确保您获得一个数值以保持jQuery 滑块功能的正常运行。如果在检索到变量后对变量执行某些数学运算，它也会为您省去很多麻烦。