如何在不丢失任何表单数据的情况下重新加载当前页面? [英] How to reload current page without losing any form data?

查看：34
本文介绍了如何在不丢失任何表单数据的情况下重新加载当前页面?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

window.location = window.location.href;

和 

window.location.reload(true);

但这两个东西无法为我获取早期的表单数据.怎么了 ?手动刷新浏览器时，没问题(我不会丢失任何表单数据).请指导我如何弄清楚.

这是我的完整代码...

<表格><table cellpadding ="5" cellpacing="10"><td style="width: 100px;"><div>名称:<<font color="red">(*)</font></div></td><td><input type="text" id="inputName" placeholder="Name" required></td></tr><td><div>电子邮件:<<font color="red">(*)</font></div></td><td><input class="span3" placeholder="user@gmail.com" id="inputEmail" type="email" required></td></tr><td><div>电话:&nbsp;</div></td><td><input type="text" id="inputPhone" placeholder="电话号码"></td></tr><td><div>主题:<<font color="red">(*)</font></div></td><td><input type="text" id="inputSubject" placeholder="Subject" required></td></tr><td colspan ="2"><div><div>详细信息:&nbsp;</div><div class="控件"><textarea id="inputDetail"></textarea>
</td></tr><tr><td colspan="2"><div><label style="font-weight: bold;"类=复选框"><input id="confirmCheck" value="" type="checkbox">我同意个人信息处理政策

<div id = "alert_placeholder"></div><div class="acceptment">[个人信息处理方针]<br><br>

</td></tr><tr><td colspan="2"><div align="center"><button id="btnConfirm" class="btn btn-primary">确认</button><input type="reset" style="width: 65px; height: 27px;"id="btnReset" class="btn">

</td></tr></表单>

在我的 JS 文件中..

function bind() {$('#btnConfirm').click(function(e) {if ($('#confirmCheck').is(":checked")) {getConfirmationForSendFAQ();}别的 {e.preventDefault();showalert("您应该接受"个人信息政策" !", "alert-error");}});};函数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("");html.push("<td class = 'title'>名称:</div>");html.push(""+ name +"");html.push("</tr>");html.push("");html.push("<td class = 'title'>邮箱地址:</div>");html.push(""+ email +"");html.push("</tr>");如果 (phone.trim().length > 0) {html.push("");html.push("<td class = 'title'>电话号码:</div>");html.push(""+ phone +"");html.push("</tr>");}html.push("");html.push("<td class = 'title'>主题:</div>");html.push(""+ subject +"");html.push("</tr>");html.push("");html.push("<td class = 'title'>详细信息:</div>");html.push(""+ detail +"");html.push("</tr>");html.push("");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) {//这里我想知道怎么做.....});$('#btnSend').click(function(e) {警报(厄运")；});}

解决方案

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

最简单和最广泛支持的是 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");//...}

如果数据不存在，

getItem 返回 null.

如果您只想存储临时数据，请使用 sessionStorage 而不是 localStorage.

Can I reload current page without losing any form data? I used..

window.location = window.location.href;

and 

window.location.reload(true);

But these two things can't get earlier form datas for me. What is wrong ? When refresh browser manually, it is fine (I don't lose any form data). Please guide me how to figure it out.

Here is my full code...

<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>

And at my JS file..

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

解决方案

You can use various local storage mechanisms to store this data in the browser such as Web Storage, IndexedDB, WebSQL (deprecated) and File API (deprecated and only available in Chrome) (and UserData with IE).

The simplest and most widely supported is WebStorage where you have persistent storage (localStorage) or session based (sessionStorage) which is in memory until you close the browser. Both share the same API.

You can for example (simplified) do something like this when the page is about to reload:

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 works synchronously so this may work here. Optionally you can store the data for each blur event on the elements where the data is entered.

At page load you can check:

window.onload = function() {

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

    // ...
}

getItem returns null if the data does not exist.

Use sessionStorage instead of localStorage if you want to store only temporary.

这篇关于如何在不丢失任何表单数据的情况下重新加载当前页面?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆