javascript - 如何使用本地存储将我的输入框值存储到另一个输入框

Question

我想做的是，当我在电子邮件文本框中键入一个值时，该值也将在 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")));

});

Answer 1

只需确保您在支持作为 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 元素的值。当然，没有什么可以阻止您更改选择器