Как сделать таблицу, хранящуюся в локальном хранилище, постоянной при перезагрузке страницы - PullRequest
Новая
       37

Как сделать таблицу, хранящуюся в локальном хранилище, постоянной при перезагрузке страницы

1 голос
/ 18 апреля 2020

Я новичок в программировании, поэтому, пожалуйста, извините за мои ошибки. Я динамически создал таблицу, используя javascript, и она работает хорошо, но когда я обновляю sh или перезагружаю страницу, таблица исчезает, хотя все значения все еще хранятся в локальном хранилище. поэтому, когда я добавляю другое значение, новое значение добавляется к значениям prexistng таблицы, и это здорово. Однако я пытаюсь сделать таблицу постоянной, даже когда страница обновляется или перезагружается таким образом, что таблица всегда отображается и динамически добавленные значения, строки и ячейки не будут равны sh при перезагрузке страницы. Я пытаюсь сделать это без какой-либо серверной части. это ссылка на собственное веб-приложение, пожалуйста, используйте ноутбук, чтобы посмотреть, я не начал работать над тем, чтобы сделать его отзывчивым 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);
}  
};

1 Ответ

1 голос
/ 18 апреля 2020 

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