网页刷新后不删除表单数据

Question

我在网站上有一个表单需要两个文本输入和两个无线电输入（一个无线电输入目前无法正常工作，因为我不知道如何让它们同时打印而不是一个覆盖另一个）。点击提交后，信息会发布在表单下方。我正在努力使页面刷新时，以前输入的信息不会消失。有没有简单的方法可以做到这一点？

我听说过设置 return onsubmit=false，但到目前为止没有成功。

<!--COMMENTING FORM-->
                <div>
                   <div id="getdata">
                   <form id="form1"  onsubmit="return confirmdata(false)">

                        <!--Input (text) asking for input of name-->
                      <p><b>Name:</b><br><input type="text" name="nameValue" value="" id="nameValue"></p>

                      <!--Input (radio) asking for type of output: 
                      <p><b>Type of Event:</b></p>
                        <input type="radio" name="eventType" value="Food"> Food</br>
                        <input type="radio" name="eventType" value="Study"> Study</br>
                        <input type="radio" name="eventType" value="Event"> Event</br>
                        <input type="radio" name="eventType" value="Danger"> Danger</br>

                        TO DO FIX LATER -->

                      <!--Input (radio) asking for location: -->
                      <br>
                      <p><b>Location:</b></p>
                        <input type="radio" name="locationType" value="Library West"> Library West</br>
                        <input type="radio" name="locationType" value="Smathers Library"> Smathers Library</br>
                        <input type="radio" name="locationType" value="Marston Library"> Marston Library</br>
                        <input type="radio" name="locationType" value="Turlington Plaza"> Turlington Plaza</br>

                      <!--Input (text) asking for input of description-->
                      <br>
                      <p><b>Description:</b><br><input type="text" style="width:200px; height:50px;" name="desValue" value="" id="desValue"></p>

                        <!--submit button-->
                        <p><input type="submit" name="myButton" value="Submit!">
                        <input type="reset" value="Reset Form"></p>
                   </form>

                   </div>  

                   <div id="confirm">
                   </div>

                </div>
                </body>
                <!--COMMENTING FORM END-->

                <!-- COMMENTING FORM SCRIPT -->  
                <script type="text/javascript">
                var txt1 = document.getElementById('nameValue');
                var types = document.getElementsByName('eventType');
                var types = document.getElementsByName('locationType');
                var txt2 = document.getElementById('desValue');

                document.getElementById("form1").addEventListener("submit", confirmdata);

                function confirmdata(event) {
                    event.preventDefault();
                    var nameValue = txt1.value;
                    var selected = 'none';
                    var desValue = txt2.value;

                    for (var i = 0; i < types.length; i++) {
                        if (types[i].checked === true) {
                            selected = types[i].value;
                        }
                    }
                        if (selected !== 'none' && nameValue !== '') {
                            //document.getElementById("confirm").innerHTML += '<p><b>Name:</b> ' + nameValue + '</p>';
                            //document.getElementById("confirm").innerHTML += '<p><b>Event Type:</b> ' + selected + '</p>';
                            //document.getElementById("confirm").innerHTML += '<p><b>Additional Details: </b>' + desValue + '</p>';
                            document.getElementById("confirm").innerHTML += '<p> User <b>' + nameValue + '</b> has an event located at <b>' + selected + '</b>. <br><b> Additional details: </b>' + desValue + '</p>';
                            document.getElementById("confirm").innerHTML += '<p><b>--------------------</b> ' + '</p>';
                        } else {
                            alert('Invalid input');
                        }
                        return false;
                }
                </script>
                <!-- COMMENTING FORM SCRIPT END --> 

             
            
              </form>
            </div>
          </div>

Answer 1

您可以将数据存储在浏览器本地存储中，并在页面加载时从本地存储中获取数据并将其放入必填字段中。表单提交成功后，始终清除本地存储的数据。切记不要存储个人数据，如果是共享PC，数据泄露的可能性很大。

Answer 2

要么将信息存储到本地存储，要么拦截onsubmit事件（编辑：结果是表单提交触发了js功能，但没有页面重新加载）。

<form onsubmit="return myFunction()">
  <!-- put form elements here -->
</form>

<script>
function myFunction(){
  //do stuff here
  return false
}
</script>

您始终可以使用 ajax 提交表单而无需重新加载。

网页刷新后不删除表单数据

Webpage to not delete form data after refresh

html

javascript

forms

onsubmit

page-refresh