Мы создаем веб-приложение с использованием HTML5, JS. Мы хотим хранить данные HTML-формы в формате JSON в автономном режиме без отправки формы. После подключения к Интернету мы хотим отправить форму. У нас может быть несколько записей формы, поэтому все данные формы должны быть добавлены в файл JSON. Так возможно ли добиться этого с новым «локальным хранилищем» HTML5 и JSON, используя собственный JS / jquery? Заранее спасибо.
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.info(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.info(JSON.parse(localStorage.getItem('fieldString'))); //Output: Object {field-01: "on", field-02: "1234"}
}
Вы описываете "прогрессивное веб-приложение" (PWA). Проведите небольшое исследование по этому поводу. У Google есть хороший букварь developers.google.com/web/progressive-web-apps
Да, просто соберите все данные формы в объект и отправьте этот объект в массив, чтобы вы могли иметь данные нескольких форм внутри массива. Затем преобразовать этот массив в строку и записать его в локальный. Помните об ограничениях localStorage, если вы храните огромное количество строк.
Свойство navigator.onLine
возвращает истину или ложь, чтобы указать текущий статус браузера онлайн / офлайн.
И вы можете прослушивать события online
и offline
в браузерах, которые его поддерживают, чтобы восстановить состояние и отправить форму.
window.addEventListener( 'online', event => { ... });
Да, но имейте в виду, что localStorage / JSON основаны на строках; поэтому, если ваша форма допускает сложные типы, такие как загрузка файлов, они будут потеряны при сериализации данных формы.