我有一个包含 3 个元素的网页,用户将在其中输入文本值,然后按按钮。提交时,它将处理并返回一些要填充到表中的值。
这部分工作正常。
现在,如果用户刷新页面,所有数据都会消失,3 个元素和表格看起来是空的。
我想这样做。捕获刷新事件并将 3 个用户输入的值存储在本地存储中,当页面重新加载时,我会将其发送回 Controller 以再次填充表。
这可以做到吗?我对网络开发还很陌生,并且没有什么想法。
这是我尝试过的。但这是行不通的。
window.onbeforeunload = function() {
localStorage.setItem(name, $('#name_field').val());
localStorage.setItem(id, $('#id_field').val());
localStorage.setItem(pw, $('#pw_field').val());
alert("am here")
}
window.onload = function() {
var name= localStorage.getItem(name);
if (name != null) $('#name_field').val(name);
var id= localStorage.getItem(id);
if (id!= null) $('#id_field').val(id);
var pw= localStorage.getItem(pw);
if (pw!= null) $('#pw_field').val(pw);
}
我永远无法弹出window.onbeforeunload函数中的警报。
最佳答案
您可以每次将其存储在本地存储(或事件 session 存储,我认为这更适合您的情况)上。然后每次您在存储上查看该值时。如果发现任何值,请将其发送到 Controller 。
如果是我的话我会按照上面说的那样,将你的数据保存到 sessionStorage
(这意味着如果用户关闭选项卡/浏览器,数据将丢失):
var saveData = function()
{
var data =
{
id: $("#id_field").val(),
name: $("#name_field").val(),
pw: $("#pw_field").val()
};
sessionStorage.setItem("formValues", JSON.stringify(data));
}
不知道您的帖子是否异步。如果它是异步的,您可以在 successCallback 上调用该函数,如果它不是异步的,则可以在提交事件上调用它。
然后在ready
事件,您可以读取该数据:
$(document).ready(function()
{
var data = sessionStorage.getItem("formValues");
// Check if there is any user data already saved
if (data)
{
data = JSON.parse(sessionStorage.getItem("formValues"));
$("#id_field").val(data.id);
$("#name_field").val(data.name);
$("#pw_field").val(data.pw);
}
});
我更喜欢将对象中的一组数据存储到存储上的单个键中,这就是我使用JSON
的原因字符串化和解析对象,因为存储只接受字符串类型。
一个简单的建议:永远不要存储密码,让用户输入密码。出于安全原因。
关于javascript - 刷新前存储元素中的数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29265415/