javascript - 页面重新加载时如何使存储在本地存储中的表持久化
问题描述
我是编程新手,所以请原谅我的错误。我使用 javascript 动态创建了一个表,它运行良好,但是当我刷新或重新加载页面时,尽管所有值仍存储在本地存储中,但表会消失,所以当我添加另一个值时,新值附加到表的预先存在的值中,这很好。但是,即使页面刷新或重新加载时,我也试图使表持久化,以便始终显示表并且动态添加的值、行和单元格获胜当页面重新加载时不会消失。我正在尝试在没有任何后端的情况下执行此操作。这是实际 webapp 的链接请使用笔记本电脑查看我还没有开始努力使其响应https://chidera-codes.github.io/Banky-webapp/ 我将在下面添加我的代码
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);
}
};
解决方案
<html>
<head>
<title>test</title>
<style>
th,
td,
table {
border: 1px solid black;
text-align: center;
}
</style>
</head>
<body onload="loadTable()">
<button onclick="addData()">Add Data</button>
<label>Account Type</label>
<input id="input_account_type" value="" />
<label>Open Account</label>
<input id="input_open_account" value="" />
<table id="accounts_table"></table>
</body>
<script>
let array = getData();
let table = document.getElementById("accounts_table");
const tableHeaders = [
"Date",
"Account number",
"Input account type",
"Account status",
"Input open account",
"Current Balance",
];
const today = new Date();
const loadTable = () => {
table.append(getTableHeaderRow());
showData();
};
function showData() {
array.forEach((accountData) => {
addToTable(accountData);
});
}
const getTableHeaderRow = () => {
const row = getTR();
tableHeaders.forEach((header) => {
row.append(getTH(header));
});
return row;
};
const getTR = () => {
return document.createElement("tr");
};
const getTH = (tableHeaderName) => {
const th = document.createElement("th");
th.innerHTML = tableHeaderName;
return th;
};
const getTD = (tdValue) => {
const td = document.createElement("td");
td.innerHTML = tdValue;
return td;
};
function addData() {
const newAccountData = {
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$",
};
array.push(newAccountData);
addToTable(newAccountData);
localStorage.setItem("accountData", JSON.stringify(array));
}
const addToTable = (newAccountData) => {
const row = getTR();
Object.keys(newAccountData).forEach((key) => {
row.append(getTD(newAccountData[key]));
});
table.append(row);
};
function getData() {
var str = localStorage.getItem("accountData");
if (str != null) {
return JSON.parse(str);
}
}
</script>
</html>
let array;
let table;
const tableHeaders = [
"Date",
"Account number",
"Input account type",
"Account status",
"Input open account",
"Current Balance",
];
const today = new Date();
function loadTable() {
array = getData();
table = document.getElementById("accounts_table");
console.log(table);
table.append(getTableHeaderRow());
showData();
};
function showData() {
array.forEach((accountData) => {
addToTable(accountData);
});
}
const getTableHeaderRow = () => {
const row = getTR();
tableHeaders.forEach((header) => {
row.append(getTH(header));
});
return row;
};
const getTR = () => {
return document.createElement("tr");
};
const getTH = (tableHeaderName) => {
const th = document.createElement("th");
th.innerHTML = tableHeaderName;
return th;
};
const getTD = (tdValue) => {
const td = document.createElement("td");
td.innerHTML = tdValue;
return td;
};
function addData() {
const newAccountData = {
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$",
};
array.push(newAccountData);
addToTable(newAccountData);
localStorage.setItem("accountData", JSON.stringify(array));
}
const addToTable = (newAccountData) => {
const row = getTR();
Object.keys(newAccountData).forEach((key) => {
row.append(getTD(newAccountData[key]));
});
table.append(row);
};
function getData() {
var str = localStorage.getItem("accountData");
if (str != null) {
return JSON.parse(str);
}
}
th,
td,
table {
border: 1px solid black;
text-align: center;
}
<html>
<head>
<title>test</title>
</head>
<body onload="loadTable()">
<button onclick="addData()">Add Data</button>
<label>Account Type</label>
<input id="input_account_type" value="" />
<label>Open Account</label>
<input id="input_open_account" value="" />
<table id="accounts_table"></table>
</body>
</html>
推荐阅读
- android - Android 画图 - PorterDuffXfermode SRC_IN 不工作
- python - Yolo 基于区域的输出到 openvino 的解释脚本
- java - 对tomcat的套接字http请求,但响应302
- python - Python Selenium Chrome:打开一个新标签 Ctrl + t(按键盘)
- python - 在 for 循环中启动线程会产生多个结果
- postgresql - SQL 在最大日期左连接
- office365 - office365 图形 api 分配私有组的所有者权限
- java - 一个对象引用一个具有另一个类 B 的对象作为其实例变量的类 A 的对象,是否也指向类型 B 的对象?
- python - 使用 Pandas to_html 时如何设置字符集?
- java - 为什么 count 变量必须在 for 循环的大括号外定义?