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

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

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

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

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

2 个答案: