Javascript 在刷新之前存储元素中的数据

我有一个包含3个元素的网页，用户将在其中输入文本值，然后按下按钮。提交时，它将处理并返回一些要填充到表中的值

这部分很好用

现在，如果用户刷新页面，所有数据都将消失，3个元素和表看起来是空的

我想这样做。捕获刷新事件并将3个用户输入的值存储在本地存储器中，当页面加载备份时，我会将其发送回控制器以再次填充表

这可能吗？我对网络开发还很陌生，现在已经没有什么想法了

这就是我试过的。这不管用

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);          
            }

---

我无法在窗口中获得警报。onbeforeunload功能弹出。

您可以每次都将其存储在本地存储（或事件会话存储，我认为在您的情况下更好）。然后，每次您在存储上查看该值时。如果发现任何值，则将其发送给控制器

如果是我，我会按照上面所说的，将您的数据保存到（如果用户关闭选项卡/浏览器，数据将丢失）：

Idk，如果您的帖子是异步的或不是。如果它是异步的，您可以在successCallback上调用该函数，如果它不是异步的，则在submit事件上调用它

然后在事件发生时，您可以读取该数据：

$(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);
    }
});

我更喜欢将对象中的一组数据存储到存储器上的单个键中，这就是为什么我使用字符串化和解析对象，因为存储器只接受字符串类型

---

一个简单的建议：永远不要存储密码，让用户自己输入。出于安全原因。

@blex您的评论与我的答案有什么关系？当页面卸载时，我将值存储在会话存储中，并在加载时抓取该数据以将保存的值放在字段中。这只是你的答案，用代码写。@donguy76我希望它有帮助。@blex我的意思是，你应该把它作为你自己的答案发布，你的代码很好。这只是你的浏览器阻止警报发出（因为它可能会干扰）。您可以看到，如果您打开js控制台（F12）并刷新页面，将显示一条消息“Blocked popup…”。

$(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);
    }
});