Javascript 如何使用HTML5本地存储功能将HTML表单数据附加到JSON对象

我们正在使用HTML5和JS构建一个web应用程序。我们希望在脱机状态下以JSON格式存储HTML表单数据，而不提交表单。一旦连接到互联网，我们要提交表格。我们可能有多个表单记录，因此所有表单数据都应该附加到JSON文件中。那么，使用新的HTML5“本地存储”和使用本机JS/jquery的JSON有可能实现这一点吗？提前谢谢

HTML

    <form action="#" name="StudentRegistration" onsubmit="dataSave()" onchange="dataSave()">
   <table cellpadding="5" width="400" bgcolor="f2f2f2" align="center"
      cellspacing="5" border="0" style="border: 1px solid #ddd;">
      <tr>
         <td colspan=2>
            <center><font size=4><b>Student Registration Form</b></font></center>
         </td>
      </tr>
      <tr>
         <td width="40%">Name</td>
         <td width="60%"><input type="text" class="field" name=textnames id="textname" size="30"></td>
      </tr>
      <tr>
         <td>Father Name</td>
         <td><input type="text" class="field" name="fathername" id="fathername"
            size="30"></td>
      </tr>
      <tr>
         <td>Postal Address</td>
         <td><input type="text" class="field" name="paddress" id="paddress" size="30"></td>
      </tr>
      <tr>
         <td>Personal Address</td>
         <td><input type="text" class="field" name="personaladdress"
            id="personaladdress" size="30"></td>
      </tr>
      <tr>
         <td>Sex</td>
         <td><input type="radio" class="field" name="sex" value="male" size="10">Male
            <input type="radio" class="field" name="sex" value="Female" size="10">Female
         </td>
      </tr>
      <tr>
         <td>City</td>
         <td>
            <select name="City" class="field" id="city">
               <option value="-1" selected>select..</option>
               <option value="New Delhi">NEW DELHI</option>
               <option value="Mumbai">MUMBAI</option>
               <option value="Goa">GOA</option>
               <option value="Patna">PATNA</option>
            </select>
         </td>
      </tr>
      <tr>
         <td>Course</td>
         <td>
            <select name="Course" class="field" id="course">
               <option value="-1" selected>select..</option>
               <option value="B.Tech">B.TECH</option>
               <option value="MCA">MCA</option>
               <option value="MBA">MBA</option>
               <option value="BCA">BCA</option>
            </select>
         </td>
      </tr>
      <tr>
         <td>District</td>
         <td>
            <select name="District" class="field" id="district">
               <option value="-1" selected>select..</option>
               <option value="Nalanda">NALANDA</option>
               <option value="UP">UP</option>
               <option value="Goa">GOA</option>
               <option value="Patna">PATNA</option>
            </select>
         </td>
      </tr>
      <tr>
         <td>State</td>
         <td>
            <select Name="State" class="field" id="state">
               <option value="-1" selected>select..</option>
               <option value="New Delhi">NEW DELHI</option>
               <option value="Mumbai">MUMBAI</option>
               <option value="Goa">GOA</option>
               <option value="Bihar">BIHAR</option>
            </select>
         </td>
      </tr>
      <tr>
         <td>PinCode</td>
         <td><input type="text" class="field" name="pincode" id="pincode" size="30"></td>
      </tr>
      <tr>
         <td>EmailId</td>
         <td><input type="text" class="field" name="emailid" id="emailid" size="30"></td>
      </tr>
      <tr>
         <td>DOB</td>
         <td><input type="text" class="field" name="dob" id="dob" size="30"></td>
      </tr>
      <tr>
         <td>MobileNo</td>
         <td><input type="text" class="field" name="mobileno" id="mobileno" size="30"></td>
      </tr>
      <tr>
         <td><input type="reset" class="btns"></td>
         <td colspan="2"><input type="submit" value="Submit Form" class="btns" /></td>
      </tr>
   </table>
</form>

---

是的，只需将所有表单数据收集到一个对象中并将该对象推送到一个数组中，就可以在数组中包含多个表单的数据。 然后字符串化该数组并将其写入本地。 如果要存储大量字符串，请记住本地存储限制

navigator.onLine

属性返回true或false以说明浏览器的当前联机/脱机状态

您还可以在支持它的浏览器中侦听

联机

和

脱机

事件，以恢复状态并提交表单

---

window.addEventListener（'online'，event=>{…}）
是，但请记住localStorage/JSON是基于字符串的；因此，如果您的表单允许文件上传等复杂类型，那么当您序列化表单数据时，它们将丢失。您所描述的是“渐进式web应用”（PWA）。做一些研究。谷歌有一本很好的入门书
$(document).ready(function() {
    var setFieldString = JSON.parse(localStorage.getItem('fieldString')); 
    //var radio = localStorage.getItem('radioValue');
    console.log(setFieldString);
    $("#textname").val(setFieldString.textname);
    $("#fathername").val(setFieldString.fathername);
    $("#paddress").val(setFieldString.paddress);
    $("#personaladdress").val(setFieldString.personaladdress);
    $("#city").val(setFieldString.city);
    $("#course").val(setFieldString.course);
    $("#district").val(setFieldString.district);
    $("#state").val(setFieldString.state);
    $("#pincode").val(setFieldString.pincode);
    $("#emailid").val(setFieldString.emailid);
    $("#dob").val(setFieldString.dob);
    $("#mobileno").val(setFieldString.mobileno); 
});
function dataSave(){
    var fields = {};
    $('.field').each(function(){
        fields[this.id] = this.value;
    }) 
    localStorage.setItem('fieldString',JSON.stringify(fields));

          // Output: {"field-01":"on","field-02":"1234"}
    console.log(JSON.parse(localStorage.getItem('fieldString')));   //Output: Object {field-01: "on", field-02: "1234"}
}