我想做的是,当我在电子邮件文本框中键入一个值时,该值也将在 localstorage 的帮助下存储在我的 emailCopy 中,而无需在电子邮件副本文本框中键入它。
我的问题是,当我在电子邮件文本框中键入一个值时,电子邮件文本框的值并未存储在电子邮件副本文本框中。我刷新了页面,电子邮件副本仍然是空的。
html:
email: <input type="text" name="email" id="email" />
email copy: <input type="text" name="emailCopy" id="emailCopy" />
脚本:
$('#email, #emailCopy').on("blur keyup change", function () {
localStorage.setItem($(this).attr("id"), $(this).val());
});
$('#email, #emailCopy').each(function (ind, val) {
$(val).val(localStorage.getItem($(val).attr("id")));
});
最佳答案
只需确保您在支持作为 HTML5 规范一部分的 localStorage API 的浏览器中运行此代码。您可以使用纯 javascript 动态检查支持...
function storageSupported() {
try {
return 'localStorage' in window && window['localStorage'] !== null;
} catch (e) {
return false;
}
}
或使用 Modernizr
if (Modernizr.localstorage)
除此之外,如果您指定了正确的键并确保只绑定(bind)一个事件,而不是绑定(bind) blur
、change
和 keyup
同时...
$(function(){
$('input').val(localStorage.getItem($('#email').attr("id")));
$('#email').keyup(function(){
localStorage.setItem($(this).attr("id"), $(this).val());
$('#emailConfirm').val(localStorage.getItem($(this).attr("id")));
});
});
这是一个 JS Fiddler Example
你应该修复什么
下面的函数不会像您预期的那样工作...这不是您应该使用 each
$('#email, #emailCopy').each(function (ind, val) {
$(val).val(localStorage.getItem($(val).attr("id")));
});
而是在准备好的函数中使用以下内容...
$('input').val(localStorage.getItem($('#email').attr("id")));
因为它将为所有 input
元素设置值,所以它将通过其键检索本地存储项并将其设置为所有 input
元素的值。当然,没有什么可以阻止您更改选择器
关于javascript - 如何使用本地存储将我的输入框值存储到另一个输入框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25378631/