Как добавить данные HTML-формы к объекту JSON с помощью функции локального хранилища HTML5

Мы создаем веб-приложение с использованием 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"}
}

Да, но имейте в виду, что localStorage / JSON основаны на строках; поэтому, если ваша форма допускает сложные типы, такие как загрузка файлов, они будут потеряны при сериализации данных формы.

Mitya 10.08.2018 14:03

Вы описываете "прогрессивное веб-приложение" (PWA). Проведите небольшое исследование по этому поводу. У Google есть хороший букварь developers.google.com/web/progressive-web-apps

charlietfl 10.08.2018 14:04
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
2
102
1

Ответы 1

Да, просто соберите все данные формы в объект и отправьте этот объект в массив, чтобы вы могли иметь данные нескольких форм внутри массива. Затем преобразовать этот массив в строку и записать его в локальный. Помните об ограничениях localStorage, если вы храните огромное количество строк.

Свойство navigator.onLine возвращает истину или ложь, чтобы указать текущий статус браузера онлайн / офлайн.

И вы можете прослушивать события online и offline в браузерах, которые его поддерживают, чтобы восстановить состояние и отправить форму.

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

Другие вопросы по теме