如何使用localStorage保留输入

Question

我想要做的是，当我typed或selected在我的投入，如果我刷新页面它仍然保留值。

当前输出： http : //jsfiddle.net/5kcsn/71/

脚本：

document.querySelector('#fname, #lname, #email, #reemail, #password, #gender, #bmonth, #bday, #byear').innerHTML = "";

var save = document.createElement('input,select');
document.querySelector('#fname, #lname, #email, #reemail, #password, #gender, #bmonth, #bday, #byear').appendChild(save);

if (!save.value) {
save.value = window.localStorage.getItem('value');
}

save.addEventListener('keyup', function () {
window.localStorage.setItem('value', save.value);
}, false);

Answer 1

在document.ready顶部添加以下事件处理程序，当任何字段值更改并在localStorage存储值时将调用此事件处理程序。

完整的工作演示

（填写数据并在演示页面上单击运行将重新加载，但数据将保持不变）

$('#fname, #lname, #email, #reemail, #password, #gender, #bmonth, #bday, #byear').on("change", function () {
    localStorage.setItem($(this).attr("id"), $(this).val())
});

以下代码将在页面加载时从localStorage恢复值

$('#fname, #lname, #email, #reemail, #password, #gender, #bmonth, #bday, #byear').each(function (ind, val) {
    if ($(val).attr("id") != "gender") {
        $(val).val(localStorage.getItem($(val).attr("id")))
    }
    else {
        if (localStorage.getItem($(val).attr("id")) == "male")
            $("#gender[value=male]").prop("checked", true);
        else
            $("#gender[value=female]").prop("checked", true);
    }
});