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

IT技术 javascript jquery html jquery-ui
2021-02-07 09:54:46

我可以在不丢失任何表单数据的情况下重新加载当前页面吗?我用了..

window.location = window.location.href;

window.location.reload(true);

但是这两件事对我来说无法获得早期的表格数据。怎么了 ?手动刷新浏览器时,没问题(我不会丢失任何表单数据)。请指导我如何弄清楚。

这是我的完整代码...

<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");
    });}
6个回答

您可以使用各种本地存储机制将这些数据存储在浏览器中,例如 Web Storage、IndexedDB、WebSQL(已弃用)和 File API(已弃用且仅在 Chrome 中可用)(以及 UserData 与 IE)。

最简单和最广泛支持的是 WebStorage,您可以在其中拥有持久存储 ( 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 Storage 是同步工作的,所以这可以在这里工作。您可以选择将每个模糊事件的数据存储在输入数据的元素上。

在页面加载时,您可以检查:

window.onload = function() {

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

    // ...
}

getItemnull如果数据不存在则返回

如果您只想临时存储,请使用sessionStorage代替localStorage

这对我有用,非常感谢。但我需要更正你的答案:1) localStorage.setItem('name', ... 2) if (name !== null) $('#inputName').val('name'); => 没有引号这个解决方案对我不起作用。我通过 WebStorage 上的官方指南更正了它。
2021-03-17 09:54:46
我不喜欢的一件事是:你怎么知道什么时候清理存储?第一个想法是清除表单提交,但假设数据被提交到存储然后用户决定他们不想提交这些数据。现在它们永久停留在损坏状态,直到它们的 localStorage 被清除(或表单提交)
2021-03-18 09:54:46
@ Ken - Abdias Software history.go(-1); 或 history.back(); 这些将重定向上一页。不是以前的,我想重新加载当前页面,我已经和那个兄弟一起测试过!谢谢...
2021-03-29 09:54:46
@Cataclysm 是否打算返回到您可以改用的表格history.go(-1);
2021-04-01 09:54:46
我有 100 个输入(同一页面上有 5 个表单)我们是否可以选择在不设置每个输入的情况下完成它@k3n
2021-04-03 09:54:46

我修改了 K3N 的代码以满足我的目的,并添加了一些注释来帮助其他人弄清楚 sessionStorage 是如何工作的。

<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>
好点子!注意sessionStorage 在 session 结束时被清除,而 localStorage 会无限期地保留。考虑数据隐私时需要考虑的事项。
2021-04-07 09:54:46

在 GitHub 上找到这个。专为它打造。

https://gist.github.com/zaus/4717416

谢谢!不要重新发明轮子!:-)
2021-03-23 09:54:46

这个答案对我非常有帮助,省去了手动浏览每个字段的麻烦:

使用 jQuery 存储复杂表单的状态

window.location.reload() // without passing true as argument

为我工作。

在 Chrome 上像魅力一样工作
2021-03-18 09:54:46
对于 IE,这不会保留页面的字段值。由于我现在遇到这个问题,我正在查看Julian K 的链接,它看起来很有希望保存值,刷新然后恢复它们。本地存储解决方案也可能有效,尽管出于数据隐私原因,一些公司政策禁止使用本地存储解决方案。
2021-03-25 09:54:46