页面刷新后，如何通过多个单选按钮从JS的localStorage中检索数据？

Question

This is my first question so.. be gentle and I'm sorry if there is some mistake. Thank you.

I have groups of radio buttons and this is the HTML:

<div class="radio">
   <label for="a_a">
       <input type="radio" name="some_name" id="a_a" value="some_value">
   </label>
   <label for="a_b">
       <input type="radio" name="some_name" id="a_b" value="some_value">
   </label>
</div>
<div class="radio">
   <label for="b_b">
       <input type="radio" name="some_name" id="b_b" value="some_value">
   </label>
   <label for="b_c">
       <input type="radio" name="some_name" id="b_c" value="some_value">
   </label>
</div>

and this is the JS:

$(".radio label").on('click', function (e) {
     var input_id = $(this).children().attr('id');
     var input_value = $(this).children().attr('value');
     localStorage.setItem(input_value, input_id);
});
var itemID = localStorage.getItem("option");
    if (itemID !== null) {
        $("input[id=\"" + itemID + "\"]").click();
};

This works well, but the problem is that I'm getting the id only of the last clicked radio button and the question is: How to get the id's from both groups of radio buttons. Please, be aware that there might be more than 2 groups of radio buttons.

Thank you.

Answer 1

Are you looking for something like this? https://jsfiddle.net/sxh0n7d1/15/

what do you want to do with the values?

window.onbeforeunload = function() {
     $('input[type="radio"]').each(function(){    
        var id = $(this).attr('id');
        var value = $(this).val();
       localStorage.setItem(id, value);
    }); 
}
window.onload = function() { 
    $('input[type="radio"]').each(function(){    
       var id = $(this).attr('id');
       var getValue = localStorage.getItem(id);
       alert("value = "+getValue+" id = "+id);
    }); 
}