Question

我想要做的是当我在电子邮件文本框中键入值时，该值也会在localstorage的帮助下存储在我的emailCopy中，而不会在电子邮件副本文本框中输入。

我的问题是当我在电子邮件文本框中键入值时，电子邮件文本框的值没有存储在电子邮件副本文本框中。我刷新页面仍然是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")));

});

Answer 1

确保在支持localStorage API的浏览器中运行此代码，该API是HTML5规范的一部分。您可以使用普通的javascript动态检查支持...

function storageSupported() {
  try {
    return 'localStorage' in window && window['localStorage'] !== null;
  } catch (e) {
    return false;
  }
}

或使用Modernizr

if (Modernizr.localstorage)

除此之外，如果您指定了正确的密钥并且确保只绑定一个事件，而不是绑定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元素＆＃39;值。当然，没有什么可以阻止你改变选择器

Answer 2

如果我理解正确，（假设您希望两个字段中的值相同），问题是您正在尝试加载与id元素对应的值来自localStorage。如果用户没有在任何一个文本框中键入任何内容，则相应的值将为空。

一旦用户输入两个字段中显示的内容，您应该更新localstorage中的常用值。

$('#email').on("blur keyup change", function () {
  $('#emailCopy').val($(this).val()); // If you want to display on the go
  localStorage.setItem("email", $(this).val());
});
$('#emailCopy').on("blur keyup change", function () {
  $('#email').val($(this).val()); // If you want to display on the go
  localStorage.setItem("email", $(this).val());
});
$('#email, #emailCopy').val(localStorage.getItem("email"));

Demo

Answer 3

try this

$("#email").blur(function(){
  localStorage.setItem("email", $(this).val());
});
$('#emailCopy').val(localStorage.getItem("email"));

如何使用localstorage将输入框值存储到另一个输入框

3 个答案:

你应该修复什么