调试表单本地存储

Question

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

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

（链接收回）

目标是，用户访问网站并填写表格（部分或完整）。然后他们可以登录。

下次他们访问该网站时，表格应该是完整的（不包括密码），并且化身应该显示存储在本地存储中的那个。

我无法弄清楚为什么没有显示，无论是兼容性问题还是语法问题等。

解决问题

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

Answer 1

问题是，你有语法错误。

将所有mb-*变量更改为mb_*

例如：

var mb-username

应该是

var mb_username

但您的源代码中还有其他问题：

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

缺少/>结束标记。

你还有另一个错误：

ReferenceError: applySetting is not defined

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

Answer 2

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

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

HTML：

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

JS：

$('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);
}

记住for循环必须在你的domready函数中。检查下面的工作小提琴。像这样你有一个动态的输入字段方法 - 如果你愿意的话，你也可以选择这个。

如果你想要一些更快的选择器，你也可以将ID保存为键并通过id选择输入。更有活力。

Fiddle

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

JS：

$('.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);
  }
}

Fiddle with Selects and Checkboxes