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

大灾变:

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

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="[email protected]" 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");
    });}
用户1693593:

您可以使用各种本地存储机制在浏览器中存储此数据,例如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存储是同步工作的,因此在这里可以工作。(可选)您可以将每个模糊事件的数据存储在输入数据的元素上。

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

window.onload = function() {

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

    // ...
}

getItemnull如果数据不存在,则返回

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在不重新加载页面的情况下获取表单数据?

如何在不更改javascript中的URL的情况下重新加载当前页面一次?

如何在不更改当前页面的情况下执行操作?

Django在不使用路径的情况下重新加载当前页面

将表单数据提交给 servlet 并在不重新加载页面的情况下检索答案?

如何在不刷新或在codeigniter中重新加载页面的情况下显示ajax分页数据?

如何在不丢失任何数据的情况下安装64位版本的Firefox?

如何在不丢失任何数据的情况下迁移Realm-Kotlin

如何在不丢失任何内部数据的情况下用Ubuntu替换Linux Mint?

如何在不丢失现有数据的情况下重新启动Fabric Composer?

如何在不丢失个人数据的情况下重新安装混乱的14.04

如何在不重新加载页面的情况下提交文件选择表单?

如何在不刷新页面的情况下重新加载javascript

如何在不刷新角度7,8的情况下重新加载整个页面?

如何在不刷新整个页面的情况下重新加载组件?

表单未重新加载当前页面

如何在不丢失数据的情况下安装Ubuntu?

如何在不丢失数据的情况下“关闭” juju?

如何在不丢失数据的情况下安装 ubuntu

如何在不丢失任何内容(主题,数据库等)的情况下修复/重新安装magento系统文件?

如何提交表单如何在不重新加载表单提交页面的情况下获取会话计数

如何在不重新加载页面的情况下对数据进行分页?

如何在不重新加载页面的情况下使用ajax发送数据?(节点)

如何在不重新加载页面的情况下刷新Selenium Webdriver DOM数据?

如何在不刷新窗口的情况下从后端重新加载数据?

如何在ReactJS中重新加载当前页面?

如何在不覆盖选项卡内容的情况下使用小书签通过电子邮件发送到当前页面的链接?

分开无法识别我当前在外部磁盘上的分区。如何在不丢失数据的情况下进行修复?

如何在不重新加载页面的情况下以角度 2 设置或删除当前路线中的 queryParams