我有一个HTML表和6个输入框，要求用户输入数据，当用户点击输入框时，它会显示保存，因此当用户刷新/重新加载或关闭网页并打开网页备份时，数据必须显示在他之前输入的内容上。
我尝试了一种简单的方法，使用本地存储来获取用户输入的数据，以保存和显示第一个输入框("FY"(，但不起作用，因为当我试图从同一位置获取和保存数据时，它会发生冲突。因此，为了看看它是否有效，如果用户输入任何数据时，它将保存并显示但不起作用，那么就在FY框下显示一行代码。如有任何帮助，将不胜感激
function startTime() {
var today = new Date();
// 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
var suffixes = ['', 'st', 'nd', 'rd', 'th', 'th', 'th', 'th', 'th', 'th', 'th', 'th', 'th', 'th', 'th', 'th', 'th', 'th', 'th', 'th', 'th', 'st', 'nd', 'rd', 'th', 'th', 'th', 'th', 'th', 'th', 'th', 'st', 'nd', 'rd'];
var weekday = new Array(7);
weekday[0] = "Sunday";
weekday[1] = "Monday";
weekday[2] = "Tuesday";
weekday[3] = "Wednesday";
weekday[4] = "Thursday";
weekday[5] = "Friday";
weekday[6] = "Saturday";
var month = new Array(12);
month[0] = "January";
month[1] = "February";
month[2] = "March";
month[3] = "April";
month[4] = "May";
month[5] = "June";
month[6] = "July";
month[7] = "August";
month[8] = "September";
month[9] = "October";
month[10] = "November";
month[11] = "December";
document.getElementById('txt').innerHTML = (weekday[today.getDay()] + ',' + " " + today.getDate() + '<sup>' + suffixes[today.getDate()] + '</sup>' + " " + month[today.getMonth()] + " " + today.getFullYear() + " Time: " + today.toLocaleTimeString());
t = setTimeout(function() {
startTime()
}, 500);
}
// Check browser support
if (typeof(Storage) !== "undefined") {
// Store
localStorage.setItem("FY", document.getElementById("FY"));
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("FY");
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
}.center {
margin-left: auto;
margin-right: auto;
}
.aligned {
display: flex;
align-items: center;
}
span {
padding: 10px;
}
.image {
display: flex;
align-items: center;
}
span {
padding: 10px;
}
.corner {
display: flex;
align-items: right;
}
span {
padding: 10px;
}
* {
box-sizing: border-box;
}
.row {
display: flex;
margin-left: 320px;
margin-right: 770px;
margin-top: -748px;
}
th,
td {
border: 1.5px solid black;
border-collapse: collapse;
text-align: center;
padding: 1.5px
}
.html2canvas {
width: 1700px !important;
height: 1700px !important;
}
table tr {
background: #ffdead;
}
table tr:nth-of-type(2) {
background: white;
}
text-align: center;
body {
background-color: #66b032;
}
h1,
th,
td {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
sup {
vertical-align: super;
font-size: smaller;
}<div class="section">
<form name="apSafety" id="" apSafety "" method="post" action="" enctype="multipart/form-data" onsubmit="return validateChecklistForm()">
<div class="aligned">
<span>   <img src="Wal.png" width="120" height="130" alt=""></span>                  
<b><h1>      
        Woodland DC </h1></b><b><h1 style="font-size:70px;"> Safety Stats</h1></b>
</div>
<table class="center">
<thead>
<tr>
<th style="text-align:center;font-weight: bold;font-size:25px;"><br>April Daily<br>Stats<br> <br></th>
<th style="text-align:center;font-weight: bold;font-size:25px;"><br>FY Goal %  <br></th>
<th style="text-align:center;font-weight: bold;font-size:25px;"><br>OIR  <br></th>
<th style="text-align:center;font-weight: bold;font-size:25px;"><br>Recordable Incidents  <br></th>
<th style="text-align:center;font-weight: bold;font-size:25px;"><br>PIT Incidents  <br></th>
<th style="text-align:center;font-weight: bold;font-size:25px;"><br>Total Incidents  <br></th>
<th style="text-align:center;font-weight: bold;font-size:25px;"><br>Days OIR Free  <br></th>
</tr>
</thead>
<tr>
<td>
<!-- Today's Date is : <label id="text"></label>-->
<div id="txt" style="text-align:center;font-weight: bold;font-size:27px;"></div>
 
</td>
<td>
 
<label for="FY"></label><br><input style="background-color: #151313;text-align:center;height:80px;width:250px;color: #FFFFFF;font-weight: bold;font-size:65px;" type="text" id="FY" name="FY" value=" "><br>
<div id="result"></div>
 
</td>
<td>
 
<label for="OIR"></label><br><input style="background-color: #339214;text-align:center;height:80px;width:250px;color: ##151313;font-weight: bold;font-size:65px;" type="text" id="OIR" name="OIR" value=" "><br>  
</td>
<td>
 
<label for="RI"></label><br><input style="text-align:center;height:80px;width:250px;font-weight: bold;font-size:65px;" type="text" id="RI" name="RI" value=" "><br>  
</td>
<td>
 
<label for="PIT"></label><br><input style="text-align:center;height:80px;width:250px;font-weight: bold;font-size:65px;" type="text" id="PIT" name="PIT" value=" "><br>  
</td>
<td>
 
<label for="TI"></label><br><input style="text-align:center;height:80px;width:250px;font-weight: bold;font-size:65px;" type="text" id="TI" name="TI" value=" "><br>  
</td>
<td>
 
<label for="daysFree"></label><br><input style="text-align:center;height:80px;width:250px;font-weight: bold;font-size:65px;" type="text" id="daysFree" name="daysFree" value=" "><br>  
</td>
</tr>
</table>
<b><h1 style="font-size:50px;">              Push instead of Pull</h1></b>
<div class="image">
<span>
        <img src="Safety1.png" width="450" height="500" alt="">           
     <img src="Safety2.png" width="850" height="450" alt=""></span>
</div>
<div class="corner">
<span>
            
            
            
            
            
            
            
            
 <img src="Walls.png" width="255" height="75" alt=""></span>
</div>
</form>
</div>您可以使用input事件侦听器将数据存储到localStorage。将SOME_ELEMENT替换为要使用的任何元素，并将SOME_DATA_KEY替换为首选的localStorage密钥。
编辑：使用input事件侦听器
// Note: store your input element in a variable and replace SOME_ELEMENT with the variable
SOME_ELEMENT.addEventListener('input', function() {
localStorage.setItem(SOME_DATA_KEY, SOME_ELEMENT.value); // Use .value to get and set text of input but use .textContent to get and set text of other elements (textareas, divs, etc.)
})
// This should run on script load
SOME_ELEMENT.value = localStorage.getItem(SOME_DATA_KEY);
示例(使用ID为FY的变量(：
let FY = document.getElementById('FY');
FY.addEventListener('input', function() {
localStorage.setItem('FY', FY.value);
})
FY.value = localStorage.getItem('FY');
编辑：不要使用beforeunload，因为它不是可靠地激发的
您还可以使用不同的事件将元素值写入localStorage。例如，可以使用beforeunload