我可以重新加载当前页面而不丢失任何表单数据吗?我用了..
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: <font color="red">(*)</font></div> </td> <td> <input type="text" id="inputName" placeholder="Name" required> </td> </tr> <tr class="control-group"> <td> <div>Email: <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: </div> </td> <td> <input type="text" id="inputPhone" placeholder="phone number"> </td> </tr> <tr class="control-group"> <td> <div>Subject: <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: </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"); });}
您可以使用各种本地存储机制在浏览器中存储此数据,例如Web Storage,IndexedDB,WebSQL(不建议使用)和File API(不建议使用,仅在Chrome中可用)(以及带IE的UserData)。
最简单且得到最广泛支持的是WebStorage,您可以在其中存储持久性存储(localStorage)或基于会话的(sessionStorage),直到关闭浏览器为止。两者共享相同的API。
localStorage
sessionStorage
例如,您可以在页面即将重新加载时(简化)执行以下操作:
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如果数据不存在,则返回。
getItem``null
如果您只想存储临时文件,请使用sessionStorage代替localStorage。