Добрый день. Испытываю огромные проблемы с пониманием localStorage. У меня есть таблица студентов, в которую я по нажатию кнопки добавляю нового студента, но после обновления таблицы добавленный студент исчезает. Понимаю, что нужно сохранить эту таблицу в localStorage, но не понимаю, как это сделать. Помогите, пожалуйста.
(() => {
const tHadeArr = ['Фамилия, имя, отчество', 'Факультет', 'Дата рождения', 'Года обучения'];
const studentsList = [
{fio: 'Орлов Иван Игоревич', faculty: 'Педагогический', db: '25.09.1982', study: '2018-2022'},
{fio: 'Орлова Анастасия Сергеевна', faculty: 'Физико-математический', db: '29.07.1997', study: '2015-2019'},
{fio: 'Ленкина Тея Кахаберовна', faculty: 'Медицинский', db: '16.10.1996', study: '2013-2017'},
{fio: 'Чертищева Татьяна Викторовна', faculty: 'Медицинский', db: '23.02.1964', study: '2010-2014'},
{fio: 'Орлов Игорь Олимпиевич', faculty: 'Технический', db: '11.06.1964', study: '2006-2010'}
]
function createCustomEl (tag, text) { //функция чтобы добавить тег для элемента
const el = document.createElement(tag); //название тега
if (text) { //если что-то передано в текст
el.textContent = text; //название тега
}
return el;
}
function createTHead (arr) {
const thead = createCustomEl('thead'); //создаем заголовок таблицы
const row = createCustomEl('tr');
arr.forEach(str => {
const cell = createCustomEl('td'); //здесь будет имя столбца
const btn = createCustomEl('button'); //имя бдет кнопкой для фильтрации
btn.textContent = str; //название кнопки из массива с заголовками
cell.append(btn); //добавляем кнопку в строку заголовка таблицы
row.append(cell); //добавляем заголовки в ряд
});
thead.append(row); //добавляем полученные заголовки в таблицу
return thead; //возвращаем заголовки, чтою их можно было добавить на страницу
}
function createStudRow (student) { //создаем таблицу, в которую будем добвлять студентов
const row = createCustomEl('tr'); //создаем строку для данных о студенте
const stfio = createCustomEl('td', student.fio); // с помощью функции создаем ячейку и записываем в нее значение и массива с данными о студентах
const stFacult = createCustomEl('td', student.faculty);
const stdb = createCustomEl('td', student.db);
const stStudy = createCustomEl('td', student.study);
row.append(stfio);
row.append(stFacult);
row.append(stdb);
row.append(stStudy);
return row;
}
function fillTBody (stArr, tBodyEl) { // заполняем таблицу массивом из студентов
tBodyEl.innerHTML = ''; //отчищаем ячейки
for (let st of stArr) { //проходи по данным из массива
const studentRow = createStudRow(st); //записываем в константу результат выполнения функции
tBodyEl.append(studentRow); //добавляем в ячеку
}
}
function createTable () {
const table = createCustomEl('table'); //создаем таблицу
const thead = createTHead (tHadeArr); //создаем заголовки таблицы из массива с заголовками таблицы
const tbody = createCustomEl('tbody'); //создаем тело для таблицы
fillTBody(studentsList, tbody); //рисуем таблицу со студентами
table.append(thead); //добавляем заголовки
table.append(tbody); //добавляем тело
return {
table,
tbody
}
}
function addStudent (stArr, tbody) { // функция добавления студента из формы
const studentObj = { // вместо этого заполненного объекта нужно будет передавать в эту переменную данные из формы
fio: 'Федоров Федор Федорович',
faculty: 'Технический',
db: '11.06.1964',
study: '2006-2010'
};
stArr.push(studentObj);
fillTBody(stArr, tbody);
}
function createApp () { //добавляем содержимое в html-вёрстку
const container = document.querySelector('.conteiner'); // подключаем контейнер
const tableObj = createTable(); // создаем таблицу
container.append(tableObj.table); // добавляем в разметку созданную таблицу
const addBtn = document.querySelector('.add-btn'); // поключаем кнопку
addBtn.addEventListener('click', () => { // навешиваем событие на кнопку, чтобы при клике срабатывала функция
addStudent(studentsList, tableObj.tbody); // функция добавления студента из формы.
});
localStorage.setItem("myKey",JSON.stringify(studentsList));
}
createApp(); // запускаем функцию создания всего приложения
})();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Список студентов</title>
<link rel="stylesheet" href="style.css">
<script defer src="main.js"></script>
</head>
<body>
<div class="conteiner">
<button class="add-btn">Записать</button>
</div>
</body>
</html>
