我有一个用户输入表单，当互联网出现故障时，我想要该表单，然后数据将保留存储在字段中。如果用户关闭该选项卡并再次打开该选项卡，则表单将保持不变并且未提交。我正在尝试使用 localStorage 对象执行此操作，但没有得到结果。我只是希望，如果用户填写表单，并且如果当时互联网出现故障，那么表单数据将存储在本地，当互联网在手机上活跃时，用户将能够提交之前填写的表单。
表单显示表单中的所有输入字段。 JavaScript代码用于通过ajax提交表单，函数store用于将数据存储在浏览器本地。数据正在存储在浏览器中，但如果浏览器在未提交的情况下关闭，我将无法再次保留该数据。
// magic.js
$(document).ready(function() {
// process the form
$('.form').submit(function(event) {
// get the form data
// there are many ways to get this data using jQuery (you can use the class or id also)
alert("data is here")
var formData = {
'name': $('input[name=name]').val(),
'email': $('input[name=email]').val(),
'contact': $('input[name=contact]').val(),
'aadhar_card_number': $('input[name=aadhar_card_number]').val(),
'aadhar_card_image': $('input[name=file_array[]]').val(),
'gst_number': $('input[name=gst_number]').val(),
'gst_image': $('input[name=file_array[]]').val(),
'tin_number': $('input[name=tin_number]').val(),
'tin_image': $('input[name=file_array[]]').val(),
'pan_number': $('input[name=pan_number]').val(),
'pan_image': $('input[name=file_array[]]').val(),
'vat_number': $('input[name=vat_number]').val(),
'vat_image': $('input[name=file_array[]]').val(),
};
console.log("name is here--" + name)
// process the form
$.ajax({
type: 'POST', // define the type of HTTP verb we want to use (POST for our form)
url: 'form_upload.php', // the url where we want to POST
data: formData, // our data object
dataType: 'json', // what type of data do we expect back from the server
encode: true
})
// using the done promise callback
.done(function(data) {
// log data to the console so we can see
console.log(data);
// here we will handle errors and validation messages
});
alert("Submitted Successfully")
// stop the form from submitting the normal way and refreshing the page
event.preventDefault();
});
});
function store() {
var inputRetailerName = document.getElementById("name");
var inputRetailerEmail = document.getElementById("email");
var inputRetailerNumber = document.getElementById("number");
var inputAadharNumber = document.getElementById("aadhar_number");
var inputAadharImage = document.getElementById("aadhar_image");
var inputGSTNumber = document.getElementById("gst_number");
var inputGSTImage = document.getElementById("gst_image");
var inputTINNumber = document.getElementById("tin_number");
var inputTINImage = document.getElementById("tin_image");
var inputPANNumber = document.getElementById("pan_number");
var inputPANImage = document.getElementById("pan_image");
var inputVATNumber = document.getElementById("vat_number");
var inputVATImage = document.getElementById("vat_image");
localStorage.setItem("name", inputRetailerName.value);
localStorage.setItem("email", inputRetailerEmail.value);
localStorage.setItem("number", inputRetailerNumber.value);
localStorage.setItem("aadhar_number", inputAadharNumber.value);
localStorage.setItem("aadhar_image", inputAadharImage.value);
localStorage.setItem("gst_number", inputGSTNumber.value);
localStorage.setItem("gst_image", inputGSTImage.value);
localStorage.setItem("tin_number", inputTINNumber.value);
localStorage.setItem("tin_image", inputTINImage.value);
localStorage.setItem("pan_number", inputPANNumber.value);
localStorage.setItem("pan_image", inputPANImage.value);
localStorage.setItem("vat_number", inputVATNumber.value);
localStorage.setItem("vat_image", inputVATImage.value);
retailerName = localStorage.getItem('name');
alert(inputRetailerName.innerHTML = retailerName);
retailerEmail = localStorage.getItem('email');
inputRetailerEmail.innerHTML = retailerEmail;
retailerNumber = localStorage.getItem('number');
inputRetailerNumber.innerHTML = retailerNumber;
retailerAadharNumber = localStorage.getItem('aadhar_number');
inputAadharNumber.innerHTML = retailerAadharNumber;
retailerAadharImage = localStorage.getItem('aadhar_image');
inputAadharImage.innerHTML = retailerAadharImage;
retailerGSTNumber = localStorage.getItem('gst_number');
inputGSTNumber.innerHTML = retailerGSTNumber;
retailerGSTImage = localStorage.getItem('gst_image');
inputGSTImage.innerHTML = retailerGSTImage;
retailerTINNumber = localStorage.getItem('tin_number');
inputTINNumber.innerHTML = retailerTINNumber;
retailerTINImage = localStorage.getItem('tin_image');
inputTINImage.innerHTML = retailerTINImage;
retailerPANNummber = localStorage.getItem('pan_number');
inputPANNumber.innerHTML = retailerPANNummber;
retailerPANImage = localStorage.getItem('pan_image');
inputPANImage.innerHTML = retailerPANImage;
retailerVATNumber = localStorage.getItem('vat_number');
inputVATNumber.innerHTML = retailerVATNumber;
retailerVATImage = localStorage.getItem('vat_image');
inputVATImage.innerHTML = retailerVATImage;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container">
<div class="row main">
<div class="main-login main-center">
<h5>Fill all the details</h5>
<form class="form" method="post" enctype="multipart/form-data">
<div class="form-group">
<label for="name" class="cols-sm-2 control-label">Retailer Name</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="name" id="name" placeholder="Enter your Name" />
</div>
</div>
</div>
<div class="form-group">
<label for="email" class="cols-sm-2 control-label">Retailer Email</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope fa" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="email" id="email" placeholder="Enter your Email" />
</div>
</div>
</div>
<div class="form-group">
<label for="contact" class="cols-sm-2 control-label">Contact Number</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-users fa" aria-hidden="true"></i></span>
<input type="number" class="form-control" name="contact" id="number" placeholder="Enter your Contact Number" />
</div>
</div>
</div>
<div class="form-group">
<label for="aadhar" class="cols-sm-2 control-label">Aadhar Card Number</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-cloud-upload" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="aadhar_card_number" id="aadhar_number" placeholder="Enter Your Aadhar Card Number" />
</div>
</div>
</div>
<div class="form-group">
<label for="aadhar" class="cols-sm-2 control-label">Aadhar Card Image</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-cloud-upload" aria-hidden="true"></i></span>
<input type="file" class="form-control" name="file_array[]" id="aadhar_image" accept="image/*" capture placeholder="Upload Your Aadhar Card" />
</div>
</div>
</div>
<div class="form-group">
<label for="aadhar" class="cols-sm-2 control-label">G.S.T Number</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-cloud-upload" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="gst_number" id="gst_number" placeholder="Enter Your G.S.T Number" />
</div>
</div>
</div>
<div class="form-group">
<label for="aadhar" class="cols-sm-2 control-label">G.S.T Image</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-cloud-upload" aria-hidden="true"></i></span>
<input type="file" class="form-control" name="file_array[]" id="gst_image" accept="image/*" capture placeholder="Upload Your G.S.T Card" />
</div>
</div>
</div>
<div class="form-group">
<label for="aadhar" class="cols-sm-2 control-label">T.I.N Number</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-cloud-upload" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="tin_number" id="tin_number" placeholder="Enter Your Tin Number" />
</div>
</div>
</div>
<div class="form-group">
<label for="aadhar" class="cols-sm-2 control-label">T.I.N Image</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-cloud-upload" aria-hidden="true"></i></span>
<input type="file" class="form-control" name="file_array[]" id="tin_image" accept="image/*" capture placeholder="Upload Your T.I.N Card" />
</div>
</div>
</div>
<div class="form-group">
<label for="aadhar" class="cols-sm-2 control-label">PAN Number</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-address-card-o" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="pan_number" id="pan_number" placeholder="Enter Your PAN Card Number" />
</div>
</div>
</div>
<div class="form-group">
<label for="aadhar" class="cols-sm-2 control-label">PAN Image</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-cloud-upload" aria-hidden="true"></i></span>
<input type="file" class="form-control" name="file_array[]" id="pan_image" accept="image/*" capture placeholder="Upload Your PAN Card" />
</div>
</div>
</div>
<div class="form-group">
<label for="aadhar" class="cols-sm-2 control-label">VAT No</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-cloud-upload" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="vat_number" id="vat_number" placeholder="Enter Your Aadhar Card Number" />
</div>
</div>
</div>
<div class="form-group">
<label for="aadhar" class="cols-sm-2 control-label">VAT Card Image</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-cloud-upload" aria-hidden="true"></i></span>
<input type="file" class="form-control" name="file_array[]" id="vat_card_image" accept="image/*" capture placeholder="Upload Your VAT Card" />
</div>
</div>
</div>
<div class="form-group ">
<input type="submit" value="Submit" id="button" onclick="store()" name="submit" class="btn btn-primary btn-lg btn-block login-button" />
</div>
</form>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/store.js"></script>
<script type="text/javascript" src="js/submit.js"></script>
</body>
<!-- begin snippet: js hide: false console: true babel: false -->最佳答案
尝试使用Loki DB(内存数据库)进行数据持久化。您可以将数据保存在本地存储、索引数据库、 session 存储或文件系统的任何位置。 http://lokijs.org/#/docs
关于javascript - 希望在互联网出现故障时离线存储表单数据并在互联网活跃时提交，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52983975/