Javascript 如何在不丢失任何表单数据的情况下重新加载当前页面？

我可以重新加载当前页面而不丢失任何表单数据吗？我曾经

window.location = window.location.href;

及

但这两样东西不能为我得到早期的数据。怎么了？手动刷新浏览器时，一切正常（我不会丢失任何表单数据）。请告诉我怎么弄清楚

这是我的全部代码

<div class="form-actions">
        <form>
            <table cellpadding = "5" cellspacing ="10">
                <tr class="control-group">
                    <td style="width: 100px;">
                        <div>Name:&nbsp;<font color="red">(*)</font></div>
                    </td>
                    <td>
                        <input type="text" id="inputName" placeholder="Name" required>
                    </td>
                </tr>
                <tr class="control-group">
                    <td>
                        <div>Email:&nbsp;<font color="red">(*)</font></div>
                    </td>
                    <td>
                        <input class="span3" placeholder="user@gmail.com" id= "inputEmail" type="email" required>
                    </td>
                </tr>
                <tr class="control-group">
                    <td>
                        <div>Phone:&nbsp;</div>
                    </td>
                    <td>
                        <input type="text" id="inputPhone" placeholder="phone number">
                    </td>
                </tr>
                <tr class="control-group">
                    <td>
                        <div>Subject:&nbsp;<font color="red">(*)</font></div>
                    </td>
                    <td>
                        <input type="text" id="inputSubject" placeholder="Subject" required>
                    </td>
                </tr>
                <tr class="control-group">
                    <td colspan ="2">
                        <div>
                            <div>Detail:&nbsp;</div>
                            <div class="controls">
                                <textarea id="inputDetail"></textarea>
                            </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                    <div>
                        <label style="font-weight: bold;" class="checkbox"> <input id="confirmCheck" value="" type="checkbox">
                                I Agree to the Personal information handling policy
                        </label>
                    </div>
                    <div id = "alert_placeholder"></div>
                        <div class="acceptment">
                            [Personal information handling policy]<br> <br>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <div align="center">
                            <button id="btnConfirm" class="btn btn-primary">Confirm</button>
                            <input type="reset" style="width: 65px; height: 27px;" id="btnReset" class="btn">
                        </div>
                    </td>
                </tr>
            </table>
        </form>
    </div>

姓名：（*）
电邮：（*）
电话：
主题：（*）
详情：
我同意个人信息处理政策
[个人信息处理策略]


证实

在我的JS文件中

function bind() {
$('#btnConfirm').click(function(e) {
    if ($('#confirmCheck').is(":checked")) {
        getConfirmationForSendFAQ();
    }
    else {
        e.preventDefault();
        showalert("You should accept \"Personal Information Policy\" !", "alert-error");
    }
});};function getConfirmationForSendFAQ() {
    var name = $('#inputName').val();
    var email = $('#inputEmail').val();
    var phone = $('#inputPhone').val();
    var subject = $('#inputSubject').val();
    var detail = $('#inputDetail').val();

    $('.form-actions').empty();
    html = [];
    html.push("<table cellpadding ='8' class = 'submitInfo'");
    html.push("<tr>");
    html.push("<td class = 'title'>Name:</div>");
    html.push("<td class = 'value'>"+ name +"</td>");
    html.push("</tr>");

    html.push("<tr>");
    html.push("<td class = 'title'>Email Address:</div>");
    html.push("<td class = 'value'>"+ email +"</td>");
    html.push("</tr>");

    if (phone.trim().length > 0) {
        html.push("<tr>");
        html.push("<td class = 'title'>Phone No:</div>");
        html.push("<td class = 'value'>"+ phone +"</td>");
        html.push("</tr>");
    }

    html.push("<tr>");
    html.push("<td class = 'title'>Subject:</div>");
    html.push("<td class = 'value'>"+ subject +"</td>");
    html.push("</tr>");

    html.push("<tr>");
    html.push("<td class = 'title'>Detail Info:</div>");
    html.push("<td class = 'value'>"+ detail +"</td>");
    html.push("</tr>");

    html.push("<tr>");
    html.push("<td colspan='2'><div align = 'center'>");
    html.push("<button id='btnSend' class='btn btn-primary' style='width: 65px;'>Send</button>");
    html.push("<button id='btnReturn' class='btn btn-inverse' style='width: 65px; height: 27px; margin-left: 5px;'>Return</button>");
    html.push("</div></td></tr>");

    html.push("</table>");
    $('.form-actions').append(html.join(''));
    $('#btnReturn').click(function(e) {
        // HERE I WANT TO KNOW HOW TO DO.....
    });
    $('#btnSend').click(function(e) {
        alert("Doom");
    });}

函数绑定（）{
$（“#btnConfirm”）。单击（函数（e）{
如果（$（'confirmCheck'）。是（“：checked”））{
getConfirmationForSendFAQ（）；
}
否则{
e、 预防默认值（）；
showalert（“您应接受\“个人信息策略\”！“，“警报错误”）；
}
});};函数getConfirmationForSendFAQ（）{
var name=$（'#inputName'）.val（）；
var email=$（'#inputEmail'）.val（）；
var phone=$（'#inputPhone'）.val（）；
var subject=$（'#inputSubject'）.val（）；
var detail=$（'#inputDetail'）.val（）；
$（'.form actions'）.empty（）；
html=[]；
html.push（“您必须提交数据并重新加载页面（带有数据的服务器端呈现表单），仅重新加载不会保留数据。只是您的浏览器可能在手动刷新时缓存表单数据（不同浏览器之间不相同）。
您可以使用localStorage（）在刷新页面之前保存值。
我通常会自动向服务器提交自己的表单，并用填充的参数重新加载页面。用服务器收到的参数替换占位符参数。
同意HTML5 LocaStorage。
您可以使用各种本地存储机制在浏览器中存储这些数据，如Web存储、IndexedDB、WebSQL（已弃用）和文件API（已弃用且仅在Chrome中可用）（以及IE中的UserData）

最简单和最广泛支持的是Web存储，其中您有持久存储（
localStorage
）或基于会话的（
sessionStorage
），它们在关闭浏览器之前都在内存中。两者共享相同的API

例如，当页面即将重新加载时，您可以（简化）执行以下操作：

window.onbeforeunload = function() {
    localStorage.setItem("name", $('#inputName').val());
    localStorage.setItem("email", $('#inputEmail').val());
    localStorage.setItem("phone", $('#inputPhone').val());
    localStorage.setItem("subject", $('#inputSubject').val());
    localStorage.setItem("detail", $('#inputDetail').val());
    // ...
}

Web存储是同步工作的，因此在这里可以工作。您可以选择将每个模糊事件的数据存储在输入数据的元素上

在页面加载时，您可以检查：

window.onload = function() {

    var name = localStorage.getItem("name");
    if (name !== null) $('#inputName').val("name");

    // ...
}

getItem
如果数据不存在，则返回
null

如果您只想存储临时存储，请使用
sessionStorage
而不是
localStorage
。
在GitHub上找到它。专门为它创建的

这个答案对我非常有帮助，省去了手动查看每个字段的麻烦：


适合我。
我修改了K3N的代码以满足我的需要，并添加了一些注释以帮助其他人了解会话存储是如何工作的

<script>
    // Run on page load
    window.onload = function() {

        // If sessionStorage is storing default values (ex. name), exit the function and do not restore data
        if (sessionStorage.getItem('name') == "name") {
            return;
        }

        // If values are not blank, restore them to the fields
        var name = sessionStorage.getItem('name');
        if (name !== null) $('#inputName').val(name);

        var email = sessionStorage.getItem('email');
        if (email !== null) $('#inputEmail').val(email);

        var subject= sessionStorage.getItem('subject');
        if (subject!== null) $('#inputSubject').val(subject);

        var message= sessionStorage.getItem('message');
        if (message!== null) $('#inputMessage').val(message);
    }

    // Before refreshing the page, save the form data to sessionStorage
    window.onbeforeunload = function() {
        sessionStorage.setItem("name", $('#inputName').val());
        sessionStorage.setItem("email", $('#inputEmail').val());
        sessionStorage.setItem("subject", $('#inputSubject').val());
        sessionStorage.setItem("message", $('#inputMessage').val());
    }
</script>


//在页面加载时运行
window.onload=函数（）{
//如果sessionStorage正在存储默认值（例如名称），请退出该函数，不还原数据
if（sessionStorage.getItem（'name'）=“name”）{
返回；
}
//如果值不为空，请将其还原到字段中
var name=sessionStorage.getItem（'name'）；
if（name！==null）$（'#inputName'）.val（name）；
var email=sessionStorage.getItem（'email'）；
if（email！==null）$（'#inputEmail'）.val（email）；
var subject=sessionStorage.getItem（'subject'）；
if（subject！==null）$（'#inputSubject'）.val（subject）；
var message=sessionStorage.getItem（'message'）；
if（message！==null）$（'#inputMessage'）.val（message）；
}
//刷新页面之前，请将表单数据保存到sessionStorage
window.onbeforeunload=函数（）{
setItem（“name”，$（“#inputName”）.val（）；
sessionStorage.setItem（“email”，$（“#inputEmail”）.val（）；
sessionStorage.setItem（“subject”，$（“#inputSubject”）.val（）；
setItem（“message”，$（“#inputMessage”）.val（）；
}
正如一些答案所提到的，这是一个很好的选择，您当然可以自己做，但如果您正在寻找一个完善的选项，GitHub上已经有一个这样做的项目。
您可以使用我编写的库，它处理表单（de）通过将值保存到本地/会话存储进行序列化。此方法类似于，但不需要jQuery，也不将明文密码保存到web存储

let myForm = document.getElementById('my-form')
FormPersistence.persist(myForm, true)

ea的可选第二个参数
<script>
    // Run on page load
    window.onload = function() {

        // If sessionStorage is storing default values (ex. name), exit the function and do not restore data
        if (sessionStorage.getItem('name') == "name") {
            return;
        }

        // If values are not blank, restore them to the fields
        var name = sessionStorage.getItem('name');
        if (name !== null) $('#inputName').val(name);

        var email = sessionStorage.getItem('email');
        if (email !== null) $('#inputEmail').val(email);

        var subject= sessionStorage.getItem('subject');
        if (subject!== null) $('#inputSubject').val(subject);

        var message= sessionStorage.getItem('message');
        if (message!== null) $('#inputMessage').val(message);
    }

    // Before refreshing the page, save the form data to sessionStorage
    window.onbeforeunload = function() {
        sessionStorage.setItem("name", $('#inputName').val());
        sessionStorage.setItem("email", $('#inputEmail').val());
        sessionStorage.setItem("subject", $('#inputSubject').val());
        sessionStorage.setItem("message", $('#inputMessage').val());
    }
</script>

let myForm = document.getElementById('my-form')
FormPersistence.persist(myForm, true)

document.getElementById("input").addEventListener("keyup", function(e){
  var someVarName = input.value;
  sessionStorage.setItem("someVarKey", someVarName);
  input.value = sessionStorage.getItem("someVarKey");
});