如果使用“选中”，localStorage 不会保存更改的单选按钮值

Question

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

问题：我发现无论我怎么做，如果默认情况下将收音机指定为选中（在用户做出选择之前），那么之后所做的任何事情都不会正确保存（如果在全部）在本地存储中。 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 项目时，您将保存无线电输入及其值，b/c 您使用 ID 属性作为您的键。

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

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

相反，我使用$(this).attr('name') 设置密钥。 As a result, when either radio button in selected, you are saving the value to the same localStorage key.

在我的场景中，我将许多输入存储到 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 键：值对是否匹配无线电输入。否则，我选择了两个无线电输入。请注意，在我的场景中，我使用的是 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');
  }
});