How to store table state in localStorage?

S

Sol-Mayers2020-12-02 01:16:25

JavaScript

Sol-Mayers, 2020-12-02 01:16:25

Good day. The question is - how to save the values and the state of the table in localStorage in such a way that after reloading the page the table does not disappear?

Currently, only the values of the table are stored in localStorage, not the table itself. In other words, after reloading, I can see the values of the table only in the browser's memory, but the table itself with the values from the page is deleted and becomes inactive.

I want to achieve this state:

1) The saveResult function reads the values entered into the fields and saves them in the log table (fieldOfRows). AND! stores values in localStorage. After entering at least 1 entry into the log table, the log becomes available.
2) After reloading the page, the log is still available and records are saved in it.
3) The log with the table of values becomes inaccessible only if there are no values in the log or all values are deleted, but not after a page reload, as is happening now.

<body>
  <header> </header>
  <main>
    <div class="my-wallet-wrap">
      <div class="name-save">
        <div class="name-title">Счетовод</div>
        <div class="two-buttons-wrap">
          <button type="button" class="notebook">
            <svg class="notebook-icon" id="_01-agenda" data-name="01-agenda" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
              <defs>
                <style>
                .cls-1 {
                  stroke-linejoin: round;
                  stroke-width: 2px
                }
                </style>
              </defs>
              <title>01-agenda</title>
              <path class="cls-1" d="M4 5V1h7H31V31H11 4V27" />
              <path class="cls-1" d="M4 5H5A2 2 0 0 1 7 7 2 2 0 0 1 5 9H3A2 2 0 0 1 1 7a2 2 0 0 1 .59-1.41A2 2 0 0 1 3 5z" />
              <path class="cls-1" d="M4 14H5a2 2 0 0 1 2 2 2 2 0 0 1-2 2H3a2 2 0 0 1-2-2 2 2 0 0 1 .59-1.41A2 2 0 0 1 3 14z" />
              <path class="cls-1" d="M4 23H5a2 2 0 0 1 2 2 2 2 0 0 1-2 2H3a2 2 0 0 1-2-2 2 2 0 0 1 .59-1.41A2 2 0 0 1 3 23z" />
              <path class="cls-1" d="M11 1V31z" />
              <path class="cls-1" d="M4 9v5z" />
              <path class="cls-1" d="M4 18v5z" />
              <path class="cls-1" d="M14 23H28z" />
              <path class="cls-1" d="M14 27H28z" />
            </svg>
          </button>
          <button type="button" class="save-button"> Сохранить результат </button> <img class="added-icon" width="30" height="30" src="img/checkmarksquare_111077.svg" alt="checkmark">
          <div class="memory-alert"> Память заполнена.
            <br>Удалите данные! </div>
        </div>
      </div>
      <form action="#" method="post" class="form-wallet">
        <label class="income-wrap"> <span class="income">Доход в месяц</span>
          <input type="text" name="income" placeholder="Введите сумму" class="income-field" required> </label>
        <label class="expense-wrap"> <span class="expense">Расход в месяц</span>
          <input type="text" name="expense" placeholder="Введите сумму" class="expense-field" required> </label>
        <label class="wishful-amount-wrap"> <span class="wishful-amount">Желаемая сумма</span>
          <input type="text" name="amount" placeholder="Введите сумму" class="wishful-amount-field" required> </label>
        <div class="buttons-wrap">
          <button type="button" class="calculation-button">Посчитать</button>
          <button type="reset" class="reset-button">Очистить</button>
        </div>
      </form>
      <div class="how-long">
        <h2 class="how-long-title">Уйдёт времени -</h2>
        <p class="how-long-answer"></p>
      </div>
    </div>
    <div class="gray-wall"></div>
  </main>
  <footer> </footer>
  <template id="white">
    <tr class="white-row">
      <td class="text-table-notebook date-cast"></td>
      <td class="text-table-notebook"></td>
      <td class="text-table-notebook"></td>
      <td class="text-table-notebook"></td>
      <td class="text-table-notebook"></td>
      <td class="table-button-del">
        <button type="button" class="button-delete-note"> </button>
      </td>
    </tr>
  </template>
  <div class="notebook-popup">
    <button type="button" class="exit-button">
      <svg class="exit-icon" width="36" height="36" viewBox="2 2 28 28" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <style>
          .cls-1 {
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-width: 2px
          }
          </style>
        </defs>
        <title/>
        <g id="cross">
          <path class="cls-1" d="M7 7 25 25z" />
          <path class="cls-1" d="M7 25 25 7z" />
        </g>
      </svg>
    </button>
    <h2 class="notebook-title">Журнал</h2>
    <table id="mainTable" class="notebook-table">
      <tbody class="fieldOfRows">
        <tr>
          <th class="title-table-notebook green-border">
            Дата записи
          </th>
          <th class="title-table-notebook green-border">
            <button type="button" class="income-sort">Доход <img src="img/sort_icon_143693.svg" width="12" height="12" alt="sort-icon" class="icon-sort"> </button>
          </th>
          <th class="title-table-notebook green-border">
            <button type="button" class="expense-sort">Расход <img src="img/sort_icon_143693.svg" width="12" height="12" alt="sort-icon" class="icon-sort"> </button>
          </th>
          <th class="title-table-notebook green-border">
            <button type="button" class="amount-sort">Сумма <img src="img/sort_icon_143693.svg" width="12" height="12" alt="sort-icon" class="icon-sort"> </button>
          </th>
          <th class="title-table-notebook green-border">Время</th>
        </tr>
      </tbody>
    </table>
  </div>
  <script src="js/notebook.js"></script>
  <script src="js/calc.js"></script>
</body>

let openNotebook = document.querySelector('.notebook');
  let notebook = document.querySelector('.notebook-popup');
  let closeNotebook = document.querySelector('.exit-button');
  let saveResult = document.querySelector('.save-button');
  let addedIcon = document.querySelector('.added-icon');
  let fieldOfRows = document.querySelector('.fieldOfRows');
  let mainTable = document.querySelector('.notebook-table');
  let deleteButton = document.querySelector('.button-delete-note');
  let incomeSort = document.querySelector('.income-sort');
  let expenseSort = document.querySelector('.expense-sort');
  let amountSort = document.querySelector('.amount-sort');
  let wall = document.querySelector('.gray-wall');
  let textTable = document.querySelector('.text-table-notebook');

  saveResult.addEventListener('click', function(event) {
    getMoove();
    setTimeout(deleteMoove, 1500);
    window.calc.getNoteEnable();
    let makeTable = function() {
      let newRow = document.createElement('tr');
      fieldOfRows.appendChild(newRow);
      newRow.classList.add('white-row');
      let tdOne = document.createElement('td');
      tdOne.classList.add('text-table-notebook');
      tdOne.classList.add('date-cast');
      let tdTwo = document.createElement('td');
      tdTwo.classList.add('text-table-notebook');
      let tdThree = document.createElement('td');
      tdThree.classList.add('text-table-notebook');
      let tdFour = document.createElement('td');
      tdFour.classList.add('text-table-notebook');
      let tdFive = document.createElement('td');
      tdFour.classList.add('text-table-notebook');
      let tdSix = document.createElement('td');
      tdSix.classList.add('table-button-del');
      let makeDeleteButton = document.createElement('button');
      makeDeleteButton.classList.add('button-delete-note');
      tdSix.appendChild(makeDeleteButton);
      newRow.appendChild(tdOne);
      newRow.appendChild(tdTwo);
      newRow.appendChild(tdThree);
      newRow.appendChild(tdFour);
      newRow.appendChild(tdFive);
      newRow.appendChild(tdSix);

      let data = new Date();
      let year = data.getFullYear();
      let month = data.getMonth();
      let day = data.getDate();

      tdOne.innerHTML = day + '.' + month + '.' + year;
      tdTwo.innerHTML = window.calc.income.value;
      tdThree.innerHTML = window.calc.expense.value;
      tdFour.innerHTML = window.calc.amount.value;
      tdFive.innerHTML = window.calc.result.textContent;

      localStorage.setItem('tdOne', tdOne.innerHTML);
      localStorage.setItem('tdTwo', tdTwo.innerHTML);
      localStorage.setItem('tdThree', tdThree.innerHTML);
      localStorage.setItem('tdFour', tdFour.innerHTML);
      localStorage.setItem('tdFive', tdFive.innerHTML);

    }
    makeTable();
    window.calc.getSaveDisable();
  });

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

S

Sergey Zenkovich, 2020-12-02
@JamesHatfield

At once I speak did not penetrate completely into the code. But I can note that, according to the rules, data is stored in json format, that is, before saving, you need to convert it to json format, and when you take it from localStorage, parse it back.