Сохранение в браузере

Всё, что страница хранит в переменных, пропадает при перезагрузке, потому что скрипт запускается заново с самого начала. С данными с сервера это не проблема: страница просто загружает их ещё раз. Но личные данные пользователя, например его настройки или отмеченные им фильмы, на сервере не лежат. Страница должна хранить их где-то ещё.

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

Вы сохраняете значение под именем, которое называется ключом, а позже читаете его по тому же ключу:

localStorage.setItem("color", "зелёный");
console.log(localStorage.getItem("color"));
console.log(localStorage.getItem("size"));

localStorage.removeItem("color");
console.log(localStorage.getItem("color"));

зелёный
null
null

• setItem(key, value) сохраняет значение под ключом. Если под этим ключом уже что-то сохранено, новое значение заменяет старое.
• getItem(key) возвращает то, что сохранено под ключом, или null, если ничего нет. Вы знаете null по querySelector(): он означает «ничего».
• removeItem(key) удаляет ключ вместе со значением.

Когда страница открывается, она читает то, что сохранила раньше. getItem() может вернуть null, поэтому сначала проверьте это:

const savedColor = localStorage.getItem("color");
if (savedColor !== null) {
    colorText.textContent = `Ваш любимый цвет: ${savedColor}`;
}

Без проверки новый посетитель увидел бы Ваш любимый цвет: null.

В окне предпросмотра каждое нажатие «Запустить» открывает страницу заново, как перезагрузка, и страница находит то, что сохранила в прошлых запусках, пока упражнение у вас открыто. Как только она что-то сохранит, в консоли появится кнопка Очистить сохранённые данные, которая удаляет всё, как будто страницу никогда не открывали. Сброс кода (круглая стрелка рядом с «Запустить») тоже всё удаляет.