javascript - 如果使用 "checked"，localStorage 不会保存更改的单选按钮值

Question

试图通过多种方式解决这个问题。 1. 通过简单地将普通的 html“已选中”默认选项添加到我的表单中的单选按钮和 2. 让 js 函数执行此操作，这是尝试过的想法的要点。

问题:我发现无论我怎么做，如果 radio 被指定为默认选中(在用户做出他/她的选择之前)，之后所做的任何事情都不会被正确保存(如果在全部)在本地存储中。 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>

localStorage保存代码:

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'); 然后是 document.write 输出 html 和变量的值。同样，如果我不尝试设置默认单选选项(并且适用于所有其他输入类型)，这会很好地工作。

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

希望这一切都有意义!

Answer 1

我知道这是一个老问题，但我一直在解决类似的问题并认为我会分享我的解决方案。

当您设置 localStorage 项目时，您正在保存 radio 输入及其值，因为您使用 ID 属性作为您的键。

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

这可能没问题，但我采取了不同的方法。而且，我可能遗漏了一些东西，因此欢迎发表评论。

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

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

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

从 localStorage 检索时，我必须在选择它之前检查 localStorage 键:值对是否与 radio 输入匹配。否则，我选择了两个 radio 输入。请注意，在我的场景中，我使用的是 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');
  }
});