localStorage не сохраняется при перезагрузке страницы браузера

Question

Для того чтобы данные localStorage отображались при перезагрузке мне необходимо записать полученные данные из функции в переменную, и добавить в контейнер? Если так делаю выдает [object, Object], хотя в application отображается массив объектов.

(() => {
    function getItemsData() {
        let students = localStorage.getItem('Студенты');
        if (students) return JSON.parse(students);
        else return [];
    }

    const studentData = getItemsData();

function createStudentsApp(container, title) {
        const studentsForm = createStudentsForm();
        const studentsTable = createTable();
        const studentsAppTitle = createAppTitle(title);
        
        container.append(studentsAppTitle, studentsForm.form, studentsTable.table);

        studentsForm.form.addEventListener('submit', (event) => {
            event.preventDefault();
            const formData = new FormData(studentsForm.form);

            const obj = {};

            for (const [name, value] of formData) {
                obj[name] = value;
            }


            const tr = document.createElement('tr');
            const html = `
            <td>${obj.surname} ${obj.firstname} ${obj.middlename}</td>
            <td>${obj.birthdate}</td>
            <td>${obj.startstudyyear}</td>
            <td>${obj.faculty}</td> 
            `
            tr.innerHTML = html;

            studentsTable.table.append(tr);



            let students = getItemsData();
            students.push(obj);
            
            localStorage.setItem('Студенты', JSON.stringify(students));


        })
})()

Answer 1

Все сохраняется в localStorage!

Вы получаете данные в переменную studentData, но попросту не используете ее. Наверное у Вас в функции createTable() функция getNewRow должна быть с параметром, а ниже получение сохраненного списка и его отображение:

     function getNewRow(student) {
         let row = document.createElement('tr');

         let newStudent = {
             fullName: student.firstName + ' ' + student.surName + ' ' + student.muddleName,
             dateOfBirth: student.birthDate,
             startsYear: student.startsStudyYear,
             faculty: 'эконом',
         }

         for (let data of Object.values(newStudent)) {
             let column = document.createElement('td');
             column.textContent = data;
             row.append(column);
         }
         return row
     }


     const studentData = getItemsData();

     studentData.forEach( student => {
         let newRow = getNewRow(student);
         table.append(newRow);
     })

Когда используете объекты, то нужно следить за регистром символов при объявлении свойств!

БЛОГ НА HUSL

localStorage не сохраняется при перезагрузке страницы браузера

Ответы (1 шт):