Итоги

В этом уроке вы узнали, что:

• Сервер — это компьютер в интернете, который хранит файлы сайта и отправляет их тем, кто попросит. Страница тоже может запросить у него данные.
• Данные передаются в виде текста, обычно в формате JSON. Он похож на массивы и объекты в JavaScript, но ключи и текст в нём всегда в двойных кавычках, после последнего элемента нет запятой, а комментариев нет. Файлы с JSON имеют расширение .json.
• JSON.parse(text) превращает текст JSON в массивы и объекты; JSON.stringify(value) превращает их в текст JSON.
• await fetch("animals.json") запрашивает файл у сервера и ждёт ответа; await response.json() читает его содержимое как JSON. Оба вызова должны находиться в функции async, а пользоваться данными можно только после них.
• response.ok равен false, если сервер ответил ошибкой, например 404 Not Found при опечатке в имени файла. Проверяйте его и вместо данных показывайте сообщение об ошибке.
• Сообщение вроде Загрузка… говорит пользователю, что данные уже в пути. Показывайте его перед fetch() и убирайте, когда данные окажутся на странице.
• Храните загруженные данные в переменной и рисуйте страницу по ним функцией, которую вызываете заново при каждом изменении, с помощью createElement() и методов массивов.
• localStorage хранит данные в браузере, в том числе после перезагрузки: setItem(key, value) сохраняет, getItem(key) читает (null, если ничего не сохранено), а removeItem(key) удаляет.
• localStorage хранит только текст, поэтому массивы и объекты сохраняйте через JSON.stringify(), а читайте через JSON.parse(). Загружайте сохранённое сразу, как только страница откроется.

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

Но сначала немного практики: страница с рецептами и флажком, который оставляет только вегетарианские рецепты и запоминает, отмечен ли он.