Сохранение бронирований

Забронируйте несколько мест и нажмите «Запустить». Места снова свободны, как будто ничего не было: бронирования хранились только в переменной bookings, а при каждом запуске скрипт начинает с начала, так же как когда посетитель снова открывает страницу.

Настоящий кинотеатр хранит бронирования на своём сервере, где собираются бронирования всех посетителей: место, которое забронировал один посетитель, занято для всех остальных. Для этого нужна программа, которая работает на сервере, а это отдельная тема. Ваша страница хранит бронирования в браузере, в localStorage, как в уроке «Данные с сервера». Тогда посетитель найдёт свои бронирования, когда вернётся.

Вы знаете, как это делается: после каждого изменения сохраняйте массив как JSON-текст с помощью JSON.stringify(), а при открытии страницы читайте его обратно с помощью JSON.parse(), если что-то сохранено:

let bookings = [];

const savedBookings = localStorage.getItem("bookings");
if (savedBookings !== null) {
    bookings = JSON.parse(savedBookings);
}

showSeats() уже ищет занятые места в bookings, поэтому сохранённые бронирования показываются как занятые места, как только они загружены. В предпросмотре кнопка консоли Очистить сохранённые данные удаляет их, и места снова свободны.

Типичные ошибки:

• Сохранить массив до того, как в него добавлено новое бронирование. После перезагрузки самого нового бронирования не хватает.
• Сохранить массив без JSON.stringify(). Он сохраняется как текст вроде [object Object], а когда страница открывается снова, JSON.parse() заканчивается ошибкой SyntaxError.