Javascript 如何在页面重新加载时使存储在本地存储器中的表持久化

我不熟悉编程，所以请原谅我的错误。我使用javascript动态创建了一个表，它运行良好，但当我刷新或重新加载页面时，表会显示，尽管所有值仍存储在本地存储中，所以当我添加另一个值时，新的值被附加到表的预先存在的值中，这很好。但是，我正在尝试使表持久化，即使在刷新或重新加载页面时也是如此，以便始终显示表，并且在重新加载页面时，动态添加的值、行和单元格不会消失。我正在尝试在没有任何后端的情况下执行此操作。 这是一个实际网络应用程序的链接，请使用笔记本电脑查看我还没有开始努力使其响应 我将在下面添加我的代码

function showData() {
getData();

let table = document.getElementById("accounts_table");
var x = table.rows.length;
while (--x){
table.deleteRow(x);
}

for(i = 0 ; i < array.length; i++){
var row= document.createElement("tr");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var td3 = document.createElement("td");  
var td4 = document.createElement("td"); 
var td5 = document.createElement("td"); 
var td6 = document.createElement("td");


td1.innerHTML = array[i].date;
td2.innerHTML  = array[i].account_number ;
td3.innerHTML  = array[i].input_account_type;
td4.innerHTML = array[i].account_status;
td5.innerHTML  = array[i].input_open_account;
td6.innerHTML  = array[i].current_balance ;
row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);
row.appendChild(td4);
row.appendChild(td5);
row.appendChild(td6);
table.children[0].appendChild(row);

}


};

let array = new Array();
function addData(){
array = getData();
getData();
var today  = new Date(); 
array.push({
date:today.toLocaleDateString("en-US"),
account_number :Math.floor ('22'  + Math.random() * 100000000),
input_account_type:document.getElementById("input_account_type").value,
account_status :'Draft',
input_open_account :' ₦' + document.getElementById("input_open_account").value + ".00",
current_balance : ' ₦' + "0.00"

});
localStorage.setItem('accountData', JSON.stringify(array));
showData();
return false;
};

function getData() {
var str = localStorage.getItem('accountData');
if(str != null){
return JSON.parse(str);
}  
};

函数showData（）{
getData（）；
let table=document.getElementById（“accounts_table”）；
var x=table.rows.length；
而（--x）{
表1.1删除行（x）；
}
对于（i=0；i

测试
th，
运输署，
桌子{
边框：1px纯黑；
文本对齐：居中；
}
添加数据
帐户类型
开户
让数组=getData（）；
let table=document.getElementById（“accounts_table”）；
const tableHeaders=[
“日期”，
“帐号”，
“输入帐户类型”，
“帐户状态”，
“输入开户”，
“当前余额”，
];
const today=新日期（）；
常量加载表=（）=>{
table.append（getTableHeaderRow（））；
showData（）；
};
函数showData（）{
array.forEach（（accountData）=>{
addToTable（accountData）；
});
}
常量getTableHeaderRow=（）=>{
常量行=getter（）；
tableHeaders.forEach（（标题）=>{
append（getTH（header））；
});
返回行；
};
常量getter=（）=>{
返回文件.createElement（“tr”）；
};
const getTH=（tableHeaderName）=>{
const th=document.createElement（“th”）；
th.innerHTML=tableHeaderName；
返回th；
};
常量getTD=（tdValue）=>{
const td=document.createElement（“td”）；
td.innerHTML=tdValue；
返回td；
};
函数addData（）{
常量newAccountData={
日期：今天。toLocaleDateString（“en-US”），
账号：数学楼层（“22”+数学随机（）*100000000），
输入帐户类型：document.getElementById（“输入帐户类型”）.value，
账户状态：“汇票”，
输入开户账户：
document.getElementById（“输入开户”）.value+“.00$”，
当前余额：“0.00$”，
};
array.push（newAccountData）；
addToTable（newAccountData）；
setItem（“accountData”，JSON.stringify（数组））；
}
常量addToTable=（newAccountData）=>{
常量行=getter（）；
Object.key（newAccountData）.forEach（（key）=>{
append（getTD（newAccountData[key]）；
});
表.追加（行）；
};
函数getData（）{
var str=localStorage.getItem（“accountData”）；
如果（str！=null）{
返回JSON.parse（str）；
}
}

welcome，如果您想添加和编辑多行表的行，我建议您使用IndexDb替换localStorage，查看此文档：非常感谢您提供的信息，我将立即查看您的欢迎，如果此评论对您有用，请点击评论左侧的三角形谢谢你这么多，但我很困惑这两个代码是相同的还是不同的我真的很想得到某种解释。你需要什么样的解释？您可以问我是否有任何混淆。这是错误Uncaught ReferenceError:loadTable未在onload（test.html:144）中定义复制粘贴初始代码段并尝试在html文件中再次运行。它必须在没有任何错误的情况下运行。如果仍然出现错误，则将onload（）的es6函数语法替换为：函数loadTable（）{table.append（getTableHeaderRow（））；showData（）；}；