I'd like to store my checked radio button in local storage so that on a page reload it will have the last checked item check on the reload.
Html:
<h3>Seconds Display:</h3>
<p id="secondsHidingText">Hiding seconds extends battery life</p>
  <input type="radio" name="seconds" value="show" checked="checked">Show  
<input type="radio" name="seconds" value="hide">Hide
This is the javascript I have:
localStorage.setItem('seconds', options.seconds);
(which runs when the save button I have is clicked)
And
document.getElementById('seconds').value = localStorage.getItem("seconds");
(which runs on document being loaded)
I get the following error: Uncaught TypeError: Cannot set property 'value' of null
How do I store and retrieve the checked radio button to and from local storage? And if possible I'm looking for a pure JS way of accomplishing this.
Thanks!
You would have to iterate through the radio buttons and then set the value. Something like this
var radios = document.getElementsByName("seconds"); // list of radio buttons
var val = localStorage.getItem('seconds'); // local storage value
for(var i=0;i<radios.length;i++){
if(radios[i].value == val){
radios[i].checked = true; // marking the required radio as checked
}
}
I used jquery only to set the localstorage value in a convenient way.
Here is a demo
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments