Как установить html5 ползунок по умолчанию из localStorage?

Question

Я использую чистые ползунки html5 как таковые:

<div>Brush Size:<input id="brush_size" type="range" value="10" min="1" max="100"/></div>
<div>Opacity: <input id="opacity" type="range" value="0.8" step="0.01" min="0.01" max="1.00"/></div>

Затем сохраняю значения в localStorage onChange:

$("#brush_size").change(function(){
  localStorage['brush_size']=this.value; 
});
$("#opacity").change(function(){
  localStorage['opacity']=this.value; 
});

После изменений при загрузке следующей страницы я хотел бычтобы увидеть текущие значения localStorage, а не html жестко закодированные значения.Каков наилучший способ сделать это?

Полагаю, я мог бы установить значение ползунка на значения localStorage во время загрузки страницы, используя jQuery ... это лучший способ сделать это?

Answer 1

Этого должно хватить:

$(function ()
{
    var ids = ['brush_size', 'opacity' /* etc */],
        id,
        value;

    for (var i=0; i<ids.length; i++)
    {
        id = ids[i];
        value = localStorage[id];
        if (typeof value !== 'undefined')
        {
            $('#'+id).val(value);
        }
    }
});

---

Примечание: вероятно, вы должны использовать $(this).val() вместо this.value в обратных вызовах change, и вы можете сделать этот код более кратким:

$('#brush_size, #opacity').change(function ()
{
    localStorage[this.id] = $(this).val();
});

---

Демонстрация: http://jsfiddle.net/mattball/G59QH/ (любезно предоставлено @ David )

Answer 2

Просто добавьте это к своему коду

$("#brush_size").val(localStorage['brush_size']);
$("#opacity").val(localStorage['opacity']);