Javascript 调试窗体本地存储

我有一个表格（下面的演示链接）

我尝试了8种不同的数据存储方法，但都不起作用

（连杆缩回）

目标是，用户访问站点并填写表单（部分或完整）。如果愿意，他们可以登录

下次他们访问站点时，表单应完整（不包括密码），并且化身应与本地存储中存储的化身一起显示

我不明白为什么什么都不显示，无论是兼容性问题还是语法问题等等

问题解决

---

另一个js脚本一直在干扰它，导致它失败。已解决。

问题是，您有语法错误

将所有

mb-*

变量更改为

mb.*

例如：

var mb-username

应该是

var mb_username

但您的源代码中也存在另一个问题：

<meta name="author" content="Michael Clarke"

---

修复这些错误，并使用您的控制台查看错误。

由于您没有提供任何代码，我不会检查您的网站是否存在错误。相反，我向您展示了一种快速而有效的方法来保存和读取本地存储中的值

值将存储在键/值对中，而键是输入字段的名称

HTML:

JS:

$（'input'）。每个（函数（）{
$（this）.on（'blur'，function（）{
setItem（$（this.attr（'name'），$（this.val（））；
});
});
for（var i=0；i

请记住，for循环必须位于domready函数内部。检查下面的工作小提琴。这样，您就可以对输入字段使用动态方法—如果愿意，您也可以对选择项执行此操作

如果您想要一些更快的选择器，您还可以将ID另存为键，并通过ID选择输入。更具动态性

编辑：根据要求，这里是复选框/选择的示例。这可能不是最好的方法，但它是有效的

JS:

$（'.autofill'）。每个（函数（）{
$（this）.on（'change'，function（）{
if（$（this）.is（'input'））{
if（$（this）.attr（'type'）=='checkbox'）{
如果（$（this）.is（':checked'））{
localStorage.setItem（$（this.attr（'id'），'checked'）；
}否则{
localStorage.setItem（$（this.attr（'id'），''）；
}
}否则{
setItem（$（this.attr（'id'），$（this.val（））；
}
}else if（$（this）.is（'select'））{
localStorage.setItem（$（this.attr（'id'），$（this.find（'option:selected'）.val（））；
}
});
});
for（var i=0；i0）{
storageKeyElement.find（'option[value='+storageValue+']'））.attr（'selected'，'selected'）；
}否则{
storageKeyElement.val（storageValue）；
}
}

---

我已经进行了上述修复，但仍然无法正常工作：/为什么不使用控制台来捕获错误？当我在UsenName中键入一个字符串，然后模糊时，我得到了以下结果：

ReferenceError:QUOTA\u extended\u ERR未定义

我有，但我找不到解决方案，我尝试包含localStorage.clear（）；在try中，因此在存储信息之前，每次都会清除旧信息。但它不断出现错误。这就是为什么每次出现错误时我都会被卡住的原因，另一个错误会出现：/Try to use:

DOMException.QUOTA\u超过了\u ERR

，它修复了控制台错误（只是留下了密码http错误），但没有修复脚本。我假设这对复选框、选择等表单的要求不起作用。有没有办法修改以上内容以覆盖所有表单元素？为什么复选框不起作用？当然，你必须做一些调整。。我为您更新了fiddle-可能不是最好的方法，您当然可以重构代码，但它是有效的-注意：对于多个SelectBox，您必须使用一个包含“Select”的id（在我的情况下）-请根据您的意愿随意调整。。参见编辑

ReferenceError: applySetting is not defined

<input type="text" name="username" id="user" />
<input type="text" name="email" id="email" />

$('input').each(function() {
  $(this).on('blur', function() {
    localStorage.setItem($(this).attr('name'), $(this).val());
  });
});

for (var i = 0; i < localStorage.length; i++){
  var storageKey = localStorage.key(i),
      storageValue = localStorage.getItem(storageKey);
  $('input[name='+storageKey+']').val(storageValue);
}

$('.autofill').each(function () {
  $(this).on('change', function () {
    if ($(this).is('input')) {
        if ($(this).attr('type') == 'checkbox') {
            if ($(this).is(':checked')) {
                localStorage.setItem($(this).attr('id'), 'checked');
            } else {
                localStorage.setItem($(this).attr('id'), '');
            }
        } else {
            localStorage.setItem($(this).attr('id'), $(this).val());
        }
    } else if ($(this).is('select')) {
        localStorage.setItem($(this).attr('id'), $(this).find('option:selected').val());
    }


  });
});

for (var i = 0; i < localStorage.length; i++) {
  var storageKeyElement = $('#' + localStorage.key(i)),
    storageKey = localStorage.key(i),
    storageValue = localStorage.getItem(storageKey);

  if (storageValue == 'checked') {
    storageKeyElement.attr('checked', 'checked');
  } else if (storageKey.indexOf('Select') > 0) {
    storageKeyElement.find('option[value=' + storageValue + ']').attr('selected', 'selected');
  } else {
    storageKeyElement.val(storageValue);
  }
}