调试表单本地存储
Debug form local storage
我有一个表格(下面的演示 link)。
我已经尝试了大约 8 种不同的存储数据的方法,但都行不通。
(link 已收回)
目标是用户访问网站并填写表格(部分或完整)。然后他们可以根据需要登录。
下次他们访问网站时,表格应该完整(不包括密码)并且头像应该显示为存储在本地存储中的那个。
我不明白为什么什么都不显示,是兼容性问题还是语法问题等等。
问题已解决
另一个 js 脚本一直在干扰它,导致它失败。已解决。
问题是,你有语法错误。
将所有 mb-*
变量更改为 mb_*
例如:
var mb-username
应该是
var mb_username
但是您的源代码中还有其他问题:
<meta name="author" content="Michael Clarke"
缺少 />
结束标记。
你还有另一个错误:
ReferenceError: applySetting is not defined
修复这些错误,并使用您的控制台查看错误。
我不会检查您的网站是否有错误,因为您没有提供任何代码。相反,我向您展示了一种快速有效的方法来保存和读取 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 输入。更有活力。
编辑:根据要求,这里是 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);
}
}
我有一个表格(下面的演示 link)。
我已经尝试了大约 8 种不同的存储数据的方法,但都行不通。
(link 已收回)
目标是用户访问网站并填写表格(部分或完整)。然后他们可以根据需要登录。
下次他们访问网站时,表格应该完整(不包括密码)并且头像应该显示为存储在本地存储中的那个。
我不明白为什么什么都不显示,是兼容性问题还是语法问题等等。
问题已解决
另一个 js 脚本一直在干扰它,导致它失败。已解决。
问题是,你有语法错误。
将所有 mb-*
变量更改为 mb_*
例如:
var mb-username
应该是
var mb_username
但是您的源代码中还有其他问题:
<meta name="author" content="Michael Clarke"
缺少 />
结束标记。
你还有另一个错误:
ReferenceError: applySetting is not defined
修复这些错误,并使用您的控制台查看错误。
我不会检查您的网站是否有错误,因为您没有提供任何代码。相反,我向您展示了一种快速有效的方法来保存和读取 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 输入。更有活力。
编辑:根据要求,这里是 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);
}
}