如何从 localStorage 设置 html5 滑块默认值？

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 硬编码值。这样做的最佳方法是什么？

我想我可以在页面加载期间使用 jQuery 将滑块的值设置为 localStorage 值...这是最佳实践方法吗？

Answer 1

只需将其添加到您的代码中即可

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

Answer 2

这应该足够了：

$(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);
        }
    }
});

---

旁注：您可能应该在 change 回调中使用 $(this).val() 而不是 this.value ，并且您可以使代码整体更加简洁：

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

---

演示： http://jsfiddle.net/mattball/G59QH/（由 @David 提供） ）