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

【问题标题】：How to make table stored in local storage persistent when page reloads页面重新加载时如何使存储在本地存储中的表持久化
【发布时间】：2020-07-31 18:44:20
【问题描述】：

我是编程新手，所以请原谅我的错误。我使用 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);
}  
};

【问题讨论】：

欢迎，如果您想添加和编辑多行表的行，我建议您使用 indexdDB 替换 localStorage ，查看此文档：developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/…
非常感谢您提供此信息，我会立即查看
欢迎您，如果该评论对您有用，请点击评论左侧的三角形

标签： javascript arrays web frontend web-frontend

【解决方案1】：

    <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>

【讨论】：

非常感谢你，但我很困惑这两个代码是相同的还是不同的，我真的很感激某种解释。谢谢
两者都是一样的，不知何故被复制了。你需要什么样的解释？有什么困惑可以问我。
这是错误 Uncaught ReferenceError: loadTable is not defined at onload (test.html:144)
复制粘贴初始代码 sn -p 并尝试在 html 文件中再次运行。它必须运行没有任何错误。如果您仍然收到错误，请将 onload() 的 es6 函数语法替换为： function loadTable () { table.append(getTableHeaderRow());显示数据（）； };