这里有新编码员。我有一个动态 html 表，其中包含用户输入的详细信息以及他们输入详细信息的时间。但我需要存储数据，即使我刷新或关闭浏览器，它也会保留..
这是html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Down Logsheet</title>
<!-- css file link -->
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="parent">
<div class="add-logsheet">
</div>
<div class="logsheet-table">
<h3 class="title">エラー履歴システム</h3>
<p1 id="title">入力情報</p1>
<div class="sub-box">
<div class="operatorside"style="width:50%; float:left">
<label id="operator">依頼者</label>
<input type="text"
id="lotid"
name="lotid"
value=""
style="width:20%"
placeholder="ロットNo。">
<input type="text"
id="employeeid"
name="employeeid"
value=""
style="width:20%"
placeholder="依頼者名を入力">
<!--Enter Error instead of selection-->
<!--<input type="text"
id="errorid"
name="errorid"
value=""
placeholder="入力エラー内容">-->
<!--<div id="div1"></div>-->
<select style="width:20%" name="errorid" id="errorid" type="text" onchange="showfield(this.options[this.selectedIndex].value)">
<option value="noinput" disabled selected>エラーを選択</option>
<option value="電極スクラッチ">電極スクラッチ</option>
<option value="フィーダNG">フィーダNG</option>
<option value="電極崩壊">電極崩壊</option>
<option value="突出誤差">突出誤差</option>
<option value="障害">障害</option>
<option value="Other">その他</option>
</select>
<!--<a href=\A>--><button id="submit-button2" class="btn"onclick="firstinput()">提出する</button><!--</a>-->
<div id="div1"></div>
</div>
<div class="maintenanceside" style="width:50%; float:right">
<label id="maintenance">KP</label>
<input type="text"
id="maintenanceid"
name="maintenanceid"
value=""
style="width:20%"
placeholder="KPを入力"
disabled>
<input type="text"
id="actiondone"
name="actiondone"
style="width:20%"
placeholder="是正措置"
disabled>
<select style="width:20%" disabled name="ackid" id="ackid" type="text">
<option value="" disabled selected>謝辞</option>
<option value="NOT OK">NOT OK</option>
<option value="OK">OK</option>
</select>
<!--<a href=\a>--><button disabled id="submit-button1" class="btn" onclick="addToTable()">提出する</button><!--</a><br>-->
</div>
</div>
<div class="table-body2">
<!--<label for="StatusTable" style="text-align: center;" style="width:100%">STATUS</label>-->
<!--<p style="text-align: center;">STATUS</p>-->
<table id="StatusTable" style="width=100%" border="2">
<caption class="captionstatus">情報</caption>
<thead>
<tr>
<!--<th style="width:5%">No.</th>-->
<th style="width:20%">ロットNo。</th>
<th style="width:20%">発生日時</th>
<th style="width:20%">依頼者</th>
<th style="width:40%">エラー内容</th>
<!--<th style="width:10%">KP</th>-->
</tr>
</thead>
<tbody id="status">
</tbody>
</table>
</div>
<div class="table-body">
<!--<label for="myTable" style="text-align: left">機器No. SW 39</label>-->
<table id="myTable" style="width=100%" border ="2">
<caption class="mainstatus">機器No.<input type="text" id="machineid" value="" style="width:5%"> </caption>
<thead>
<tr>
<th style="width:5%">番号No.</th>
<th style="width:5%">機器No.</th>
<th style="width:5%">ロットNo。</th>
<th style="width:10%">依頼者</th>
<th style="width:15%">エラー内容</th>
<th style="width:10%">KP</th>
<th style="width:15%">是正措置</th>
<th style="width:10%">操作可能</th>
<th style="width:10%">発生日時</th>
<th style="width:10%">終了日時</th>
<th style="width:10%">合計時間 (分)</th>
</tr>
</thead>
<tbody id="main">
</tbody>
</table>
<h3 class="maintablefooter" id="no-data">機器のダウンタイム監視(No Data Available)</h3>
<div class="footer">
<button id="exportToExcel" onclick="exportTableToExcel('myTable')">エクスポートデータ(.xls)</button>
<!--<button id="button5" class="btn"onclick="TestLang()">try</button>-->
<p1 type="text" value="datenow" id="datenow"></p1>
<!-- <button id="submit-button3" class="btn"onclick="save_data()">SAVE</button> -->
<!-- <button id="submit-button4" class="btn"onclick="load_data()">LOAD</button> -->
</div>
</div>
</div>
</div>
</body>
<!--java script source file-->
<!--script-->
<script type="text/javascript" src="index.js"></script>
</html>
<script type="text/javascript" src="tabletoexcel.js"></script>
</html>
<script type="text/javascript" src="datetime.js"></script>
</html>
<script type="text/javascript" src="tableborder.js"></script>
</html>
我要保留的表是“myTable”，tbody 为“main”
这是 JavaScript：
var employeeid= [];
var errorid= [];
var machineid=[];
var index= [];
var maintenanceid= [];
var ackid= [];
var c= 1;
var g= 1;
var time1= [];
var time2= [];
var actiondone= [];
var employeeid2=[];
var errorid2=[];
var index1= [];
var lotid= [];
var lotid2= [];
var time1st= [];
var totaltime =[];
var endTime=[];
var starT=[];
var time3=[];
var errorencountered=[];
var tr4=[];
var trial=[];
function firstinput(){
var sub11= document.getElementById('employeeid').value;
let errorencountered=document.getElementById('errorid').value;
if (errorencountered==='Other'){
var sub22=document.getElementById('others123').value;
}
else {
var sub22=document.getElementById('errorid').value;
}
var sub33= document.getElementById('lotid').value;
const sub55= new Date();
starT=new Date().getTime();
var sub69=document.getElementById('machineid').value;
if(sub11&&sub22&&sub69 !=='')
{
employeeid= [...employeeid,sub11];
errorid= [...errorid,sub22];
time1= [...time1,sub55];
index1= [...index1,g];
lotid= [...lotid,sub33];
displayTable1();
}
else
alert("入力不完全(Input Incomplete)");
}
document.getElementById('status').appendChild(tr4);
}
function displayTable1(){
const length= employeeid.length;
tr4=document.createElement('tr');
for(var i=0;i<length;i++)
{
tr4.innerHTML='';
var ad33=document.createElement('td');
ad33.innerHTML= lotid[i];
tr4.appendChild(ad33);
var ad5=document.createElement('td');
ad5.innerHTML= time1[i];
tr4.appendChild(ad5);
var ad2=document.createElement('td');
ad2.innerHTML= employeeid[i];
tr4.appendChild(ad2);
var ad3=document.createElement('td');
ad3.style.backgroundColor = "red";
ad3.style.color= "black";
ad3.innerHTML= errorid[i];
tr4.appendChild(ad3);
document.getElementById('status').appendChild(tr4);
}
g++;
document.getElementById("submit-button2").disabled = true;
document.getElementById("submit-button1").disabled = false;
document.getElementById("employeeid").disabled = true;
document.getElementById("errorid").disabled = true;
document.getElementById("lotid").disabled = true;
document.getElementById("maintenanceid").disabled = false;
document.getElementById("ackid").disabled = false;
document.getElementById("actiondone").disabled = false;
}
function addToTable(){
document.getElementById('no-data').style.display="none";
var sub1= document.getElementById('employeeid').value;
let errorencountered=document.getElementById('errorid').value;
if (errorencountered==='Other'){
var sub2=document.getElementById('others123').value;
}
else {
var sub2=document.getElementById('errorid').value;
}
var sub3= document.getElementById('maintenanceid').value;
var sub4= document.getElementById('ackid').value;
var sub7= document.getElementById('actiondone').value;
var sub33 =document.getElementById('lotid').value;
var sub69 =document.getElementById('machineid').value;
const sub6= new Date().getTime();
const sub68= new Date();
var sub77 = ((sub6-starT)/1000)/60;
sub77 = sub77.toFixed(2);
if(sub1&&sub2&&sub3&&sub4 !=='')
{
machineid= [...machineid,sub69];
employeeid2= [...employeeid2,sub1];
errorid2= [...errorid2,sub2];
maintenanceid= [...maintenanceid,sub3];
actiondone= [...actiondone,sub7];
lotid2= [...lotid2,sub33];
ackid= [...ackid,sub4];
time3= [...time3,sub68];
index= [...index,c];
totaltime=[...totaltime,sub77];
myDeleteFunction();
displayTable();
}
else
alert("入力不完全(Input Incomplete)");
}
function displayTable(){
const length= employeeid2.length;
var tr=document.createElement('tr');
for(var i=0;i<length;i++)
{
tr.innerHTML='';
var td1=document.createElement('td');
td1.innerHTML= index[i];
tr.appendChild(td1);
var td89=document.createElement('td');
td89.innerHTML= machineid[i];
tr.appendChild(td89);
var td33=document.createElement('td');
td33.innerHTML= lotid2[i];
tr.appendChild(td33);
var td2=document.createElement('td');
td2.innerHTML= employeeid2[i];
tr.appendChild(td2);
var td3=document.createElement('td');
td3.innerHTML= errorid2[i];
tr.appendChild(td3);
var td4=document.createElement('td');
td4.innerHTML= maintenanceid[i];
tr.appendChild(td4);
var td5=document.createElement('td');
td5.innerHTML= actiondone[i];
tr.appendChild(td5);
var td6=document.createElement('td');
td6.innerHTML= ackid[i];
tr.appendChild(td6);
var td7=document.createElement('td');
td7.innerHTML= time1[i];
tr.appendChild(td7);
var td8=document.createElement('td');
td8.innerHTML= time3[i];
tr.appendChild(td8);
var td9=document.createElement('td');
td9.innerHTML=totaltime[i];
tr.appendChild(td9);
document.getElementById('main').appendChild(tr);
}
c++;
document.getElementById('employeeid').value='';
document.getElementById('errorid').value='';
document.getElementById('maintenanceid').value='';
document.getElementById('ackid').value='';
document.getElementById('actiondone').value='';
document.getElementById('lotid').value='';
document.getElementById('div1').innerHTML='';
document.getElementById("submit-button2").disabled = false;
document.getElementById("submit-button1").disabled = true;
document.getElementById("employeeid").disabled = false;
document.getElementById("errorid").disabled = false;
document.getElementById("lotid").disabled = false;
document.getElementById("maintenanceid").disabled = true;
document.getElementById("ackid").disabled = true;
document.getElementById("actiondone").disabled = true;
}
function myDeleteFunction() {
document.getElementById("StatusTable").deleteRow(1);
}
function showfield(name){
if(name=='Other')document.getElementById('div1').innerHTML='その他: <input type="text" name="other" value="" id="others123" placeholder="ご指定ください" >';
else document.getElementById('div1').innerHTML='';
}
我希望 tbody 为 'main' 的 'myTable' 将保留..我是 javascript 新手，还不熟悉 localStorage，而且我似乎找不到关于 localStorage 的有关我的序列的指南用 javascript 制作的。
您可以在本地存储中存储数据字符串...使用 JSON.stringify() 将行数组转换为字符串，然后像这样存储...
// Convert the data to JSON string and save to localStorage
localStorage.setItem('myTableData', JSON.stringify(dataToSave));
然后您可以再次从 localStorage 中加载数据，然后将其解析回对象数组，如下所示...
var storedData = localStorage.getItem('myTableData');
var parsedData = JSON.parse(storedData);