希望在互联网关闭时脱机存储表单数据，并在互联网活动时提交

66bbxpm5  于 2021-06-18  发布在  Mysql
关注(0)|答案(1)|浏览(385)

我有一个用户输入表，我想当互联网关闭，然后数据将继续存储在字段中。如果用户关闭选项卡并再次打开选项卡，则表单与未提交的表单保持相同。我尝试使用localstorage对象来实现这一点，但没有得到结果。我只想如果用户填写表格，如果互联网关闭了，那么表格数据将存储在本地，当互联网在手机上变得活跃，那么用户将能够提交以前填写的表格。
窗体显示窗体中的所有输入字段。javascript代码用于通过ajax提交表单，函数store用于在浏览器中本地存储数据。数据存储在浏览器中，但如果浏览器关闭而不提交，我将无法再次保留该数据。

  1. // magic.js
  2. $(document).ready(function() {
  4.   // process the form
  5.   $('.form').submit(function(event) {
  7.     // get the form data
  8.     // there are many ways to get this data using jQuery (you can use the class or id also)
  9.     alert("data is here")
  10.     var formData = {
  11.       'name': $('input[name=name]').val(),
  12.       'email': $('input[name=email]').val(),
  13.       'contact': $('input[name=contact]').val(),
  14.       'aadhar_card_number': $('input[name=aadhar_card_number]').val(),
  15.       'aadhar_card_image': $('input[name=file_array[]]').val(),
  16.       'gst_number': $('input[name=gst_number]').val(),
  17.       'gst_image': $('input[name=file_array[]]').val(),
  18.       'tin_number': $('input[name=tin_number]').val(),
  19.       'tin_image': $('input[name=file_array[]]').val(),
  20.       'pan_number': $('input[name=pan_number]').val(),
  21.       'pan_image': $('input[name=file_array[]]').val(),
  22.       'vat_number': $('input[name=vat_number]').val(),
  23.       'vat_image': $('input[name=file_array[]]').val(),
  25.     };
  26.     console.log("name is here--" + name)
  28.     // process the form
  29.     $.ajax({
  30.         type: 'POST', // define the type of HTTP verb we want to use (POST for our form)
  31.         url: 'form_upload.php', // the url where we want to POST
  32.         data: formData, // our data object
  33.         dataType: 'json', // what type of data do we expect back from the server
  34.         encode: true
  35.       })
  36.       // using the done promise callback
  37.       .done(function(data) {
  39.         // log data to the console so we can see
  40.         console.log(data);
  42.         // here we will handle errors and validation messages
  43.       });
  44.     alert("Submitted Successfully")
  46.     // stop the form from submitting the normal way and refreshing the page
  47.     event.preventDefault();
  48.   });
  50. });
  52. function store() {
  54.   var inputRetailerName = document.getElementById("name");
  55.   var inputRetailerEmail = document.getElementById("email");
  56.   var inputRetailerNumber = document.getElementById("number");
  57.   var inputAadharNumber = document.getElementById("aadhar_number");
  58.   var inputAadharImage = document.getElementById("aadhar_image");
  59.   var inputGSTNumber = document.getElementById("gst_number");
  60.   var inputGSTImage = document.getElementById("gst_image");
  61.   var inputTINNumber = document.getElementById("tin_number");
  62.   var inputTINImage = document.getElementById("tin_image");
  63.   var inputPANNumber = document.getElementById("pan_number");
  64.   var inputPANImage = document.getElementById("pan_image");
  65.   var inputVATNumber = document.getElementById("vat_number");
  66.   var inputVATImage = document.getElementById("vat_image");
  68.   localStorage.setItem("name", inputRetailerName.value);
  69.   localStorage.setItem("email", inputRetailerEmail.value);
  70.   localStorage.setItem("number", inputRetailerNumber.value);
  71.   localStorage.setItem("aadhar_number", inputAadharNumber.value);
  72.   localStorage.setItem("aadhar_image", inputAadharImage.value);
  73.   localStorage.setItem("gst_number", inputGSTNumber.value);
  74.   localStorage.setItem("gst_image", inputGSTImage.value);
  75.   localStorage.setItem("tin_number", inputTINNumber.value);
  76.   localStorage.setItem("tin_image", inputTINImage.value);
  77.   localStorage.setItem("pan_number", inputPANNumber.value);
  78.   localStorage.setItem("pan_image", inputPANImage.value);
  79.   localStorage.setItem("vat_number", inputVATNumber.value);
  80.   localStorage.setItem("vat_image", inputVATImage.value);
  82.   retailerName = localStorage.getItem('name');
  83.   alert(inputRetailerName.innerHTML = retailerName);
  85.   retailerEmail = localStorage.getItem('email');
  86.   inputRetailerEmail.innerHTML = retailerEmail;
  88.   retailerNumber = localStorage.getItem('number');
  89.   inputRetailerNumber.innerHTML = retailerNumber;
  91.   retailerAadharNumber = localStorage.getItem('aadhar_number');
  92.   inputAadharNumber.innerHTML = retailerAadharNumber;
  94.   retailerAadharImage = localStorage.getItem('aadhar_image');
  95.   inputAadharImage.innerHTML = retailerAadharImage;
  97.   retailerGSTNumber = localStorage.getItem('gst_number');
  98.   inputGSTNumber.innerHTML = retailerGSTNumber;
  100.   retailerGSTImage = localStorage.getItem('gst_image');
  101.   inputGSTImage.innerHTML = retailerGSTImage;
  103.   retailerTINNumber = localStorage.getItem('tin_number');
  104.   inputTINNumber.innerHTML = retailerTINNumber;
  106.   retailerTINImage = localStorage.getItem('tin_image');
  107.   inputTINImage.innerHTML = retailerTINImage;
  109.   retailerPANNummber = localStorage.getItem('pan_number');
  110.   inputPANNumber.innerHTML = retailerPANNummber;
  112.   retailerPANImage = localStorage.getItem('pan_image');
  113.   inputPANImage.innerHTML = retailerPANImage;
  115.   retailerVATNumber = localStorage.getItem('vat_number');
  116.   inputVATNumber.innerHTML = retailerVATNumber;
  118.   retailerVATImage = localStorage.getItem('vat_image');
  119.   inputVATImage.innerHTML = retailerVATImage;
  121. }
  1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  3. <body>
  4.   <div class="container">
  5.     <div class="row main">
  6.       <div class="main-login main-center">
  7.         <h5>Fill all the details</h5>
  8.         <form class="form" method="post" enctype="multipart/form-data">
  10.           <div class="form-group">
  11.             <label for="name" class="cols-sm-2 control-label">Retailer Name</label>
  12.             <div class="cols-sm-10">
  13.               <div class="input-group">
  14.                 <span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span>
  15.                 <input type="text" class="form-control" name="name" id="name" placeholder="Enter your Name" />
  16.               </div>
  17.             </div>
  18.           </div>
  20.           <div class="form-group">
  21.             <label for="email" class="cols-sm-2 control-label">Retailer Email</label>
  22.             <div class="cols-sm-10">
  23.               <div class="input-group">
  24.                 <span class="input-group-addon"><i class="fa fa-envelope fa" aria-hidden="true"></i></span>
  25.                 <input type="text" class="form-control" name="email" id="email" placeholder="Enter your Email" />
  26.               </div>
  27.             </div>
  28.           </div>
  30.           <div class="form-group">
  31.             <label for="contact" class="cols-sm-2 control-label">Contact Number</label>
  32.             <div class="cols-sm-10">
  33.               <div class="input-group">
  34.                 <span class="input-group-addon"><i class="fa fa-users fa" aria-hidden="true"></i></span>
  35.                 <input type="number" class="form-control" name="contact" id="number" placeholder="Enter your Contact Number" />
  36.               </div>
  37.             </div>
  38.           </div>
  40.           <div class="form-group">
  41.             <label for="aadhar" class="cols-sm-2 control-label">Aadhar Card Number</label>
  42.             <div class="cols-sm-10">
  43.               <div class="input-group">
  44.                 <span class="input-group-addon"><i class="fa fa-cloud-upload" aria-hidden="true"></i></span>
  45.                 <input type="text" class="form-control" name="aadhar_card_number" id="aadhar_number" placeholder="Enter Your Aadhar Card Number" />
  46.               </div>
  47.             </div>
  48.           </div>
  50.           <div class="form-group">
  51.             <label for="aadhar" class="cols-sm-2 control-label">Aadhar Card Image</label>
  52.             <div class="cols-sm-10">
  53.               <div class="input-group">
  54.                 <span class="input-group-addon"><i class="fa fa-cloud-upload" aria-hidden="true"></i></span>
  55.                 <input type="file" class="form-control" name="file_array[]" id="aadhar_image" accept="image/*" capture placeholder="Upload Your Aadhar Card" />
  56.               </div>
  57.             </div>
  58.           </div>
  60.           <div class="form-group">
  61.             <label for="aadhar" class="cols-sm-2 control-label">G.S.T Number</label>
  62.             <div class="cols-sm-10">
  63.               <div class="input-group">
  64.                 <span class="input-group-addon"><i class="fa fa-cloud-upload" aria-hidden="true"></i></span>
  65.                 <input type="text" class="form-control" name="gst_number" id="gst_number" placeholder="Enter Your G.S.T Number" />
  66.               </div>
  67.             </div>
  68.           </div>
  70.           <div class="form-group">
  71.             <label for="aadhar" class="cols-sm-2 control-label">G.S.T Image</label>
  72.             <div class="cols-sm-10">
  73.               <div class="input-group">
  74.                 <span class="input-group-addon"><i class="fa fa-cloud-upload" aria-hidden="true"></i></span>
  75.                 <input type="file" class="form-control" name="file_array[]" id="gst_image" accept="image/*" capture placeholder="Upload Your G.S.T Card" />
  76.               </div>
  77.             </div>
  78.           </div>
  80.           <div class="form-group">
  81.             <label for="aadhar" class="cols-sm-2 control-label">T.I.N Number</label>
  82.             <div class="cols-sm-10">
  83.               <div class="input-group">
  84.                 <span class="input-group-addon"><i class="fa fa-cloud-upload" aria-hidden="true"></i></span>
  85.                 <input type="text" class="form-control" name="tin_number" id="tin_number" placeholder="Enter Your Tin Number" />
  86.               </div>
  87.             </div>
  88.           </div>
  90.           <div class="form-group">
  91.             <label for="aadhar" class="cols-sm-2 control-label">T.I.N Image</label>
  92.             <div class="cols-sm-10">
  93.               <div class="input-group">
  94.                 <span class="input-group-addon"><i class="fa fa-cloud-upload" aria-hidden="true"></i></span>
  95.                 <input type="file" class="form-control" name="file_array[]" id="tin_image" accept="image/*" capture placeholder="Upload Your T.I.N Card" />
  96.               </div>
  97.             </div>
  98.           </div>
  100.           <div class="form-group">
  101.             <label for="aadhar" class="cols-sm-2 control-label">PAN Number</label>
  102.             <div class="cols-sm-10">
  103.               <div class="input-group">
  104.                 <span class="input-group-addon"><i class="fa fa-address-card-o" aria-hidden="true"></i></span>
  105.                 <input type="text" class="form-control" name="pan_number" id="pan_number" placeholder="Enter Your PAN Card Number" />
  106.               </div>
  107.             </div>
  108.           </div>
  110.           <div class="form-group">
  111.             <label for="aadhar" class="cols-sm-2 control-label">PAN Image</label>
  112.             <div class="cols-sm-10">
  113.               <div class="input-group">
  114.                 <span class="input-group-addon"><i class="fa fa-cloud-upload" aria-hidden="true"></i></span>
  115.                 <input type="file" class="form-control" name="file_array[]" id="pan_image" accept="image/*" capture placeholder="Upload Your PAN Card" />
  116.               </div>
  117.             </div>
  118.           </div>
  120.           <div class="form-group">
  121.             <label for="aadhar" class="cols-sm-2 control-label">VAT No</label>
  122.             <div class="cols-sm-10">
  123.               <div class="input-group">
  124.                 <span class="input-group-addon"><i class="fa fa-cloud-upload" aria-hidden="true"></i></span>
  125.                 <input type="text" class="form-control" name="vat_number" id="vat_number" placeholder="Enter Your Aadhar Card Number" />
  126.               </div>
  127.             </div>
  128.           </div>
  130.           <div class="form-group">
  131.             <label for="aadhar" class="cols-sm-2 control-label">VAT Card Image</label>
  132.             <div class="cols-sm-10">
  133.               <div class="input-group">
  134.                 <span class="input-group-addon"><i class="fa fa-cloud-upload" aria-hidden="true"></i></span>
  135.                 <input type="file" class="form-control" name="file_array[]" id="vat_card_image" accept="image/*" capture placeholder="Upload Your VAT Card" />
  136.               </div>
  137.             </div>
  138.           </div>
  140.           <div class="form-group ">
  142.             <input type="submit" value="Submit" id="button" onclick="store()" name="submit" class="btn btn-primary btn-lg btn-block login-button" />
  143.           </div>
  145.         </form>
  146.       </div>
  147.     </div>
  148.   </div>
  150.   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  151.   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  152.   <script type="text/javascript" src="js/store.js"></script>
  153.   <script type="text/javascript" src="js/submit.js"></script>
  154. </body>
  156. <!-- begin snippet: js hide: false console: true babel: false -->
mysqlphpajaxJavaScriptlocal-storage

1条答案

按热度按时间
bjg7j2ky

bjg7j2ky1#

尝试使用lokidb（内存数据库）来持久化数据。您可以将数据持久化到本地存储、索引数据库、会话存储或文件系统的任何位置。http://lokijs.org/#/docs

赞(0）分享  回复(0）举报  2021-06-18
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com