使用localStorage存储jQuery范围滑块的最大值和最小值

Question

请看一下这个fiddle。

我在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

Demo 试试这个，

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