Как сохранить таблицу, в которую добавили элемент через js, после обновления страницы?
Добрый день. Испытываю огромные проблемы с пониманием 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(); // запускаем функцию создания всего приложения })(); |
(() => { 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> |
<!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>
Дополнительно:
Так у вас уже все готово
function createApp () { //добавляем содержимое в html-вёрстку // прочитать список studentList = JSON.parse(localStorage.getItem("myKey") ?? '[]'); 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)); }); // А это не надо // localStorage.setItem("myKey",JSON.stringify(studentsList)); } |
function createApp () { //добавляем содержимое в html-вёрстку // прочитать список studentList = JSON.parse(localStorage.getItem("myKey") ?? '[]'); 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)); }); // А это не надо // localStorage.setItem("myKey",JSON.stringify(studentsList)); }
- Кстати, шаблонные строки будут и нагляднее, и вставка сразу целой строки в innerHTML происходит быстрее, чем поочередное создание каждого элемента
function createStudRow (student) { return ` <tr> <td>${student.fio}</td> <td>${student.faculty}</td> <td>${student.db}</td> <td>${student.study}</td> </tr> `; }
function createStudRow (student) { return ` <tr> <td>${student.fio}</td> <td>${student.faculty}</td> <td>${student.db}</td> <td>${student.study}</td> </tr> `; }
- Не сработало, он ругается на studentsList = localStorage.getItem("myKey");
- Lion97icvc, объявите список как переменную, через let
- Сергей delphinpro, Спасибо, попробую)
- Сергей delphinpro, тоже не сработало, теперь он не добавляет в массив новый элемент
- Lion97icvc, это потому что у вас опечатка в функции createTable
- fillTBody(studentsList, tbody); //рисуем таблицу со студентами + fillTBody(studentList, tbody); //рисуем таблицу со студентами
- fillTBody(studentsList, tbody); //рисуем таблицу со студентами + fillTBody(studentList, tbody); //рисуем таблицу со студентами
https://codepen.io/delphinpro/pen/oNQzMNL
- Сергей delphinpro, Благодарю за помощь. При клики несколько раз записать он добавляет несколько одинаковых фамилий, обновляю страницу и все остается на своих местах, но при добавлении (после обновления страницы) новых записей он стирает все ранее добавленные записи, которые были сделаны до обновления страницы.
- Сергей delphinpro, немного поправила код, вроде все работает как нужно. Спасибо Вам огромное за помощь).
- Lion97icvc, так пометь ответ решением.
Уважай себя и других, а в особенности ответившего.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для сохранения таблицы, в которую вы добавили элемент через JavaScript, после обновления страницы, вам нужно использовать методы хранения данных, такие как localStorage или sessionStorage.
Прежде всего, у вас должна быть функция, которая добавляет элементы в таблицу через JavaScript. Например, если у вас есть таблица с id "myTable" и вы добавляете строки в нее, ваш код может выглядеть примерно так:
function addRow() { var table = document.getElementById("myTable"); var row = table.insertRow(); var cell1 = row.insertCell(0); var cell2 = row.insertCell(1); cell1.innerHTML = "Новая ячейка 1"; cell2.innerHTML = "Новая ячейка 2"; }
Теперь, чтобы сохранить состояние таблицы после обновления страницы, вы можете использовать localStorage. Вот как это можно сделать:
// Проверяем, есть ли данные в localStorage if(localStorage.getItem("tableData")) { // Если есть, восстанавливаем таблицу из данных в localStorage document.getElementById("myTable").innerHTML = localStorage.getItem("tableData"); } // Добавляем элемент в таблицу и сохраняем данные в localStorage function addRow() { var table = document.getElementById("myTable"); var row = table.insertRow(); var cell1 = row.insertCell(0); var cell2 = row.insertCell(1); cell1.innerHTML = "Новая ячейка 1"; cell2.innerHTML = "Новая ячейка 2"; // Сохраняем данные таблицы в localStorage localStorage.setItem("tableData", table.innerHTML); }
Теперь, когда вы добавляете новый элемент в таблицу через JavaScript, данные таблицы будут сохранены в localStorage. При обновлении страницы данные будут восстановлены из localStorage и таблица останется в том же состоянии, в котором вы ее оставили.
Обратите внимание, что localStorage имеет ограничение на объем данных (обычно около 5-10 МБ), поэтому не злоупотребляйте его использованием. Если у вас большой объем данных или требуется сохранять их более долгое время, то лучше использовать серверное хранилище данных.