JSON, localStorage и твой первый fetch

Сериализуй данные в JSON, сохраняй их в браузере через localStorage и получай удалённые данные с помощью fetch.

10 мин · 3 вопросов

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

const task = { title: "Review the lesson", done: false };

const json = JSON.stringify(task);
console.log(json);
// {"title":"Review the lesson","done":false}

const parsed = JSON.parse(json);
console.log(parsed.done); // false

localStorage хранит данные в браузере, даже после закрытия вкладки. Идеально для выбранной темы, черновика или списка задач. Так как хранится только текст, мостом служит JSON: сериализуй перед setItem, десериализуй после getItem.

const tasks = [
  { title: "Buy bread", done: false },
  { title: "Review the lesson", done: true }
];

localStorage.setItem("tasks", JSON.stringify(tasks));

const raw = localStorage.getItem("tasks");
const saved = raw ? JSON.parse(raw) : [];
console.log(saved.length); // 2

Последний кирпичик: получение данных с сервера. fetch отправляет HTTP-запрос и возвращает промис. С async/await код читается сверху вниз: ты ждёшь ответ, проверяешь, что он корректен, а затем ждёшь декодирование JSON, которое тоже асинхронно.

async function loadUsers() {
  const response = await fetch(
    "https://jsonplaceholder.typicode.com/users"
  );
  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }
  const users = await response.json();
  console.log(users[0].name);
}

loadUsers();

Проверка знаний

Убедись, что запомнил ключевые моменты этого урока.

1. Что делает JSON.stringify?
   • Он превращает строку JSON в объект JavaScript
   • Он превращает значение JavaScript в строку JSON
   • Он проверяет синтаксис файла JSON
2. Что возвращает localStorage.getItem для несуществующего ключа?
   • Пустую строку
   • undefined
   • null
   • Выбрасывается ошибка
3. Почему пишут await response.json(), а не просто response.json()?
   • Потому что response.json() возвращает промис
   • Чтобы превратить ответ в строку
   • Чтобы повторить запрос, если он не удался