Как предотвратить исчезновение моей динамически сгенерированной таблицы при перезагрузке страницы - PullRequest
Новая
       14

Как предотвратить исчезновение моей динамически сгенерированной таблицы при перезагрузке страницы

0 голосов
/ 16 апреля 2020

Я новичок в программировании, и я только начал работать над этим веб-приложением, которое создает таблицу, когда пользователь вводит данные. Моя проблема в том, что при перезагрузке страницы таблица исчезает. Как я могу это исправить без использования какого-либо бэкэнда. 

form.addEventListener('submit' , (e)=>{
e.preventDefault();
var isValid = validation();
if(isValid){
  var noacct_text = document.getElementById('noacct_text');
  var table = document.getElementById('form');
  var accounts_table = document.getElementById('accounts_table');
  noacct_text.style.display = "none";
  table.style.display = "none";
  accounts_table.style.display = "block";
  var array = new Array();
  function addData(){
    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();
  }

  addData();

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

  function showData(params) {
    getData();
    var table = document.getElementById("accounts_table");
    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");
      var today  = new Date(); 

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

    }


  }
  showData();
...