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

How to retrieve data from localStorage in JS from multiple radio buttons after page refresh?

本文关键字：检索 数据 localStorage 单选按钮 JS 刷新      更新时间：2023-09-26

这是我的第一个问题。如果有什么错误，我很抱歉。谢谢你。

我有一组单选按钮，这是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>

，这是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();
};

这工作得很好，但问题是，我得到的id只有最后点击单选按钮和问题是:如何从两组单选按钮的id。请注意，可能有两组以上的单选按钮。

谢谢。

你在找这样的东西吗?https://jsfiddle.net/sxh0n7d1/15/

你想如何处理这些值?

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);
    }); 
}
相关文章：