@Sol-Mayers

Как сохранить состояние таблицы в localStorage?

Доброго времени суток. Вопрос такой - как сохранить значения и состояние таблицы в localStorage таким образом, что-бы после перезагрузки страницы таблица не исчезала?

В настоящий момент в localStorage сохраняются лишь значения таблицы, но не сама таблица. Иными словами, после перезагрузки я могу увидеть значения таблицы только в памяти браузера, но вот сама таблица со значениями со страницы удаляется и становится неактивна.

Хочу добиться такого состояния:

1) Функция saveResult считывает введённые в поля значения и сохраняет их в таблице журнала (fieldOfRows). И! сохраняет значения в localStorage. После введения в таблицу журнала хотя-бы 1 записи, журнал становится доступным.
2) После перезагрузки страницы журнал по прежнему остаётся доступным и в нём сохранены записи.
3) Журнал с таблицой значений становится недоступным только в том случае, если ни одного значения в журнале нет или все значения удалены, но не после перезагрузки страницы, как происходит сейчас.

<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();
  });
  • Вопрос задан
  • 102 просмотра
Пригласить эксперта
Ответы на вопрос 1
JamesHatfield
@JamesHatfield
Front-end developer
Сразу говорю не вникал полностью в код. Но могу отметить, что как правила данные хранят в формате json, то есть перед сохранением нужно перевести в json формат, а когда берешь их из localStorage парсить обратно.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
Intspirit Краснодар
от 80 000 до 150 000 ₽
Artezio Москва
от 160 000 до 220 000 ₽