Question

I’m using pure html5 sliders as such:

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

Then saving the values into localStorage onChange:

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

After changes, on the next page load I would like to see the current localStorage values, instead of the html hardcoded values. What’s the best way of doing this?

I suppose I could set the slider’s value to the localStorage values during page load using jQuery… is this the best-practices way of doing it?

Answer 1

Just add this to your code

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