如果使用“选中”，则本地存储不保存更改的单选按钮值

localStorage not saving changed radio button values if "checked" is used

本文关键字：存储 保存更改 单选按钮 选中 如果      更新时间：2023-09-26

尝试以多种方式解决这个问题。 1.只需将普通的html"选中"默认选项添加到我的表单中的单选按钮中，然后 2.让JS函数做到这一点，这是尝试的想法的要点。

问题：我发现无论我怎么做，如果默认情况下将无线电指定为选中（在用户做出选择之前），则在此之后完成的任何操作都不会正确保存（如果有的话）localStorage。 localStorage 将保存初始的默认选择，但是，从那时起什么都不能更改（即使在"物理"选择另一个选项之后）。

我知道 localStorage 正在工作，因为如果我省略默认名称（以及其余输入），它就可以完美运行。

表单代码：

<label>Who is the contact person for this event?<span class="requiredtext">*</span></label>
<input type="radio" name="Contact_Person" id="Contact_Person1" value="Submitter is the contact person" onclick="contacthide()" checked required>&nbsp;I am<br />
<input type="radio" name="Contact_Person" id="Contact_Person2" value="Submitter is not the contact person" onclick="contactshow()" required>

本地存储保存代码：

function localStoragefunctions() {
    localStorage.clear();
    if (Modernizr.localstorage) {
        //Set variable to show that data is saved
        localStorage.setItem("flag", "set");
        //Save radio and checkbox data
        $(window).bind('unload', function() {
            $('input[type=radio]').each(function() {
                localStorage.setItem('radio_' + $(this).attr('id'), JSON.stringify({ 
                    checked: this.checked
                }));
            });
        });

如果用户在最终提交之前返回进行更改，则将其吐出的代码：

    $(document).ready(function() {
        if (Modernizr.localstorage) {
            //Browser supports it
            if (localStorage.getItem("flag") == "set") {
$('input[type=radio]').each(function() {
                    var state = JSON.parse(localStorage.getItem('radio_' + $(this).attr('id')));
                    if (state) this.checked = state.checked;
                });

除此之外，我还有一个确认页面，该页面抓取存储在localStorage中的所有变量，并在用户点击提交之前将它们呈现给用户进行最终检查。

这包括：var ContactPerson = localStorage.getItem('Contact_Person');然后是一个吐出 html 和变量值的document.write。同样，如果我不尝试设置默认的无线电选择，这工作正常（并且适用于所有其他输入类型）。

理想的结果是默认选择最有可能的单选按钮选项，以便可以节省用户时间。 如果我能事先"为他们做出决定"，我不想向他们出示一个表格，他们必须亲自点击每个单选按钮。

希望这一切都有意义！

我知道

这是一个老问题，但我一直在解决类似的问题，并想分享我的解决方案。

当您设置本地存储项目时，您将保存无线电输入及其值，b/c 您使用 ID 属性作为键。

localStorage.setItem('radio_' + $(this).attr('id'), JSON.stringify({ checked: this.checked }));

这可能没问题，但我采取了不同的方法。而且，我可能错过了一些东西，所以欢迎评论。

相反，我使用 $(this).attr('name') 来设置密钥。因此，当选中任一单选按钮时，会将值保存到相同的 localStorage 键。

在我的方案中，我将许多输入存储到 localStorage，因此我的解决方案有点抽象。我在每个输入上使用jQuery的.change（）方法调用saveToLocalStorage（）。此外，我将输入的值直接保存到本地存储中。

function saveToLocalStorage(input) {
  if ( $(input).attr('type')=='radio' ) {
    localStorage[$(input).attr('name')] = $(input).val();
  } else {
    localStorage[$(input).attr('id')] = $(input).val();
  }
}

从 localStorage 检索时，我必须在选择之前检查 localStorage 键：值对是否与无线电输入匹配。否则，我选择了两个无线电输入。请注意，在我的场景中，我正在使用jQuery 1.4.4，因此attr（'checked'，'checked'）。

$('input[type=radio]').each(function() {
  var key = $(this).attr('name');
  var val = localStorage[key];
  if ( $(this).attr('name') == key && $(this).attr('value') == val ) {
    $(this).attr('checked', 'checked');
  }
});
相关文章：