Как обновлять массив объектов при клике на кнопку? js

Question

Делаю для себя сайт кинотеатра. Есть вот такой код, который берёт атрибуты ряда и номера места, меняет выбранным элементам стиль и добалвяет ряд и номер места в объект ObjectSeat. Мне нужно, чтобы я мог выбирать больше чем одно место, добавлять эту инфу в localStorage и отрисовывать "купленные билеты" на другой вкладке. Видимо, нужно сделать так, что если в localStorage больше, чем один объект, то создавать массив из выбранных объектов, но я не пойму как. Буду очень благодарен за подсказку

let seats = document.querySelectorAll('.seats');
function selectSeats() {
    for(let i = 0; i < seats.length; i++) {
        let dataFlag = seats[i].getAttribute('data-flag');
        let dataRow = seats[i].getAttribute('data-row'),
            dataSeat = seats[i].getAttribute('data-seat');
        seats[i].onclick = function() {
            if(dataFlag == "uncolored") {
                this.classList.add('selectedSeats');
                dataFlag = "colored";
                seats[i].innerHTML += `
                    <span>${dataSeat}</span>
                `;
            } else {
                this.classList.remove('selectedSeats');
                dataFlag = "uncolored";
                seats[i].innerHTML = '';
                
            }
            function selectNumbers() {
                let ObjectSeat = {
                    "tag": "cinemaHall",
                    "row": dataRow,
                    "seat": dataSeat,
                };
                let seatItem = JSON.parse(localStorage.getItem('seat'));
                console.log('my seat is', seatItem);

                if(seatItem != null) {
                    seatItem = {
                        ...seatItem,
                        [ObjectSeat.tag]: ObjectSeat
                    }
                } else {
                    seatItem = {
                        [ObjectSeat.tag]: ObjectSeat
                    }
                }
                localStorage.setItem('seat', JSON.stringify(ObjectSeat));
                    
            }   
            selectNumbers();
        }
    }
}
selectSeats();

Answer 1

Стоит сразу хранить в localStorage массив:

function addSeat(seat) {
    const seats = JSON.parse(localStorage.getItem('seats'));
    
    seats.push(seat);
    
    localStorage.setItem('seats', JSON.stringify(seats));
}

function removeSeat(row, seatNumber) {
    const seats = JSON.parse(localStorage.getItem('seats'));

    const seatsFiltered = seats.filter(seat => seat.row !== row && seat.seat !== seatNumber);

    localStorage.setItem('seats', JSON.stringify(seatsFiltered));
}

function toggleSeat(seat) {
    const seats = JSON.parse(localStorage.getItem('seats'));
    
    const foundSeat = seats.find(s => s.row === seat.row && s.seat === seat.seat);
    
    if (foundSeat == null) {
        addSeat(seat);
    } else {
        removeSeat(seat.row, seat.seat);
    }
}

А на будущее советую присмотреться к IndexedDB для таких вещей

БЛОГ НА HUSL

Как обновлять массив объектов при клике на кнопку? js

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