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>
&nbsp&nbsp<input type="radio" name="seconds" value="show" checked="checked">Show&nbsp&nbsp
<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 acplishing this.

Thanks!

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>
&nbsp&nbsp<input type="radio" name="seconds" value="show" checked="checked">Show&nbsp&nbsp
<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 acplishing this.

Thanks!

• javascript
• html
• radio-button
• local-storage
• reload

• Where are you calling the JS on the page? Sounds like its unable to find the input by the id. Do you have a fiddle or link to the live page? – hopkins-matt Commented Apr 20, 2015 at 18:07
• 1 Not sure how I overlooked it, but there is no element shown with an id of seconds. – hopkins-matt Commented Apr 20, 2015 at 18:26
• Here's a link to the page: barrydoyle18.github.io/remindMeConfig.html Please excuse the hey alert... – Barry Michael Doyle Commented Apr 20, 2015 at 18:27
• 1 Yeah that's it!! I can't believe I missed that either! Thanks for spotting it :) – Barry Michael Doyle Commented Apr 20, 2015 at 18:28
• 1 No problem. I've been there plenty of times myself. – hopkins-matt Commented Apr 20, 2015 at 18:30

1 Answer 1

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