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

Question

請看看fiddle。

我使用localstorage在stop: function (event, ui)來存儲每個滑塊的值，但控制檯顯示它只存儲最後一個值。有沒有辦法存儲每個滑塊的最後一個最大值和最小值，換句話說，每個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";