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

Question

我们正在构建一个使用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>

JavaScript

$(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"}
}

Answer 1

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

navigator.onLine属性返回 true 或 false 以声明浏览器的当前联机/脱机状态。

您可以在支持online和offline事件的浏览器中侦听该事件，以恢复状态并提交表单。

window.addEventListener( 'online', event => { ... });