Урок №12: Локальное хранилище (localStorage) и JSON

В этом уроке мы познакомимся с тем, как в JavaScript можно сохранять данные в браузере с помощью localStorage и как работать с форматом данных JSON. Это важно для создания интерактивных и удобных веб-приложений, которые «помнят» данные пользователя даже после закрытия страницы.

Что такое localStorage и зачем он нужен

localStorage — это встроенное в браузер хранилище, куда можно сохранять данные в виде пар «ключ-значение». Эти данные остаются сохранёнными даже если пользователь закроет браузер и вернётся позже.

Используется для:

• сохранения настроек пользователя (тема сайта, язык, размер шрифта);
• запоминания корзины в интернет-магазине;
• кэширования данных для быстрой загрузки;
• хранения промежуточных данных при заполнении форм.

Что такое JSON и зачем он нужен

JSON (JavaScript Object Notation) — это текстовый формат для хранения и передачи структурированных данных, похожий на объекты в JavaScript.

Он нужен для того, чтобы удобно хранить сложные данные (например, объекты и массивы) в виде строки — это важно, потому что localStorage работает только с текстом.

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

Пример объекта и JSON

Допустим, у нас есть объект с информацией о пользователе:

const user = {
  name: "Анатолий",
  age: 30,
  hobbies: ["спорт", "программирование", "путешествия"]
};
    

Чтобы сохранить этот объект в localStorage, нужно преобразовать его в строку с помощью JSON.stringify():

const jsonString = JSON.stringify(user);
localStorage.setItem("user", jsonString);
    

Чтобы получить данные обратно и преобразовать их в объект — используем JSON.parse():

const savedUser = localStorage.getItem("user");
const userObj = JSON.parse(savedUser);
console.log(userObj.name); // Анатолий
    

Попробуйте прямо здесь:

Что делает пример: вы заполняете простую форму. После нажатия на кнопку данные сохраняются в localStorage и отображаются в формате JSON. Также можно очистить сохранённые данные.

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

Что дальше

Теперь ты познакомился с хранением данных в браузере и форматом JSON. В следующем уроке мы рассмотрим асинхронность в JavaScript: setTimeout, Promise и async/await.