Question

我是编程的新手，请原谅我的错误。我使用javascript动态创建了一个表，并且效果很好，但是当我刷新或重新加载页面时，该表会失效，尽管所有值仍存储在本地存储中，所以当我添加另一个时值，新值将附加到表的prexistng值上，这很棒。但是，即使页面刷新或重新加载时，我仍试图使该表保持不变，以使该表始终显示并且动态添加值，行重新加载页面时，单元格不会消失。我正尝试在没有任何后端的情况下执行此操作。这是实际网络应用程序的链接，请使用笔记本电脑查看我尚未开始使其具有响应性https://chidera-codes.github.io/Banky-webapp/ 我将在下面添加我的代码

variable

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

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

1 个答案: