使用localStorage存儲jQuery Range滑塊的最大值和最小值

Question

請看一下這個小提琴 。

我在stop: function (event, ui)使用localstorage來存儲每個滑塊的值，但控制台顯示它僅存儲最后一個值。 有沒有一種方法可以存儲每個滑塊的最后一個最大值和最小值，換句話說，可以存儲每個ui-slider-handle的最后一個值？

HTML：

<h4> Width</h4>
<div data-max="100" data-min="0" class="slider"></div>
<input type="text" class="center amount">
<h4> Diameter</h4>
<div data-max="50" data-min="0" class="slider"></div>
<input type="text" class="center amount">
<h4> Thickness</h4>
<div data-max="20" data-min="0" class="slider"></div>
<input type="text" class="center amount">

jQuery的：

$( ".slider" ).each(function(){
  var datamax = $(this).data('max'),
      datamin = $(this).data('min'),
      amount = $(this).next('.amount'),
      $key = $(this).prev('h4').text();

  $(this).slider({

     range: true,
     min: 0, 
     max: datamax,    
     values: [ datamin, datamax ],    
     slide: function( event, ui ) {       
       amount.val( ui.values[ 0 ] + " - " + ui.values[ 1 ] +" mm");           
     },
     stop: function (event, ui) {
        localStorage[$key] = ui.value;
      }    
     });

     amount.val($( this ).slider( "values", 0 ) +" - " + $( this ).slider( "values", 1 )  +" mm");

});

Answer 1

演示嘗試一下，

     localStorage[$key] = ui.value+ " - " + ui.values[ 1 ] +" mm";