刷新前從元素存儲數據

Question

我有一個包含3個元素的網頁，用戶將在其中輸入文本值，然后按一個按鈕。 提交后，它將處理並返回一些要填充到表中的值。

這部分工作正常。

現在，如果用戶刷新頁面，則所有數據都將消失，這3個元素和表格將顯示為空。

我想這樣做。 捕獲刷新事件，並將3個用戶輸入的值存儲在本地存儲中，並在頁面加載完成后，將其發送回控制器以再次填充表。

這可能嗎？ 我對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函數中彈出警報 。

Answer 1

您可以隨時將其存儲在本地存儲（或事件會話存儲，我認為這對您而言更好）。 然后，每次您照看存儲中的該值時。 如果發現任何值，則將其發送到控制器。

如果是我，我將按照上面的說明進行操作，將您的數據保存到sessionStorage （這意味着如果用戶關閉標簽/瀏覽器，數據將丟失）：

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

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

如果您的信息不同步，則為Idk。 如果異步，則可以在successCallback上調用該函數，如果不是異步，則在Submit事件上調用它。

然后在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來對對象進行字符串化和解析的原因，因為存儲僅接受字符串類型。

一個簡單的建議：永遠不要存儲密碼，讓用戶輸入密碼。 出於安全原因。