Доброго времени суток. Вопрос такой - как сохранить значения и состояние таблицы в 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();
});
