调试表单本地存储

Question

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

我已经尝试了大约 8 种不同的存储数据的方法，但都行不通。

（link 已收回）

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

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

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

问题已解决

另一个 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 中的值。

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

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 函数内。检查下面的工作 fiddle。像这样你有一个输入字段的动态方法 - 如果你愿意，你也可以为 selects 这样做。

如果你想要更快一些 select 或者你也可以将 ID 保存为键并 select 通过 id 输入。更有活力。

Fiddle

编辑：根据要求，这里是 checkboxes/selects 的示例。这可能不是最好的方法，但它确实有效。

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

调试表单本地存储

Debug form local storage

javascript

jquery

html

forms

local-storage

问题已解决