在刷新之前存储来自元素的数据

Question

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

中的值

这部分工作正常。

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

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

这可以吗？我是 Web 开发的新手，运行没有想法。

这是我试过的。这行不通。

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 函数中的 alert 弹出。

Answer 1

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

如果是我我会按照我上面说的那样，将你的数据保存到sessionStorage（这意味着如果用户关闭tab/browser，数据将丢失）：

var saveData = function()
{
    var data = 
    {
        id: $("#id_field").val(),
        name: $("#name_field").val(),
        pw: $("#pw_field").val()
    };

   sessionStorage.setItem("formValues", JSON.stringify(data));
}

不知道你的 post 是否异步。如果它是异步的，您可以在 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对对象进行字符串化和解析的原因，因为存储只接受字符串类型。

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

在刷新之前存储来自元素的数据

Storing data from elements before a refresh

javascript

jquery

local-storage