Question

试图解决这个多种方式。 1.通过简单地将普通的html“checked”默认选项添加到我的表单中的单选按钮和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>

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 }));

这可能没问题，但我采取了不同的方法。而且，我可能会遗漏一些东西，欢迎提出意见。

相反，我使用$(this).attr('name')来设置密钥。因此，当选中任一单选按钮时，您将该值保存到相同的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 key：value对是否与无线电输入匹配。否则，我正在选择两个无线电输入。请注意，在我的场景中，我正在使用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');
  }
});

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

1 个答案: