JavaScript Academy · Урок

Сохранение объектов с помощью JSON

Сериализуйте объекты для сохранения и последующего получения.

«Сохранение объектов с помощью JSON» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.

Хранилище содержит только строки

Web Storage хранит строки, поэтому нельзя сохранить объект напрямую. При сохранении объект превращается в бесполезный текст "[object Object]". Решение — использовать JSON.

localStorage.setItem("user", { name: "Ada" });
console.log(localStorage.getItem("user")); // "[object Object]"

Сериализация с помощью JSON.stringify

Перед сохранением преобразуйте объект в строку JSON с помощью JSON.stringify.

const user = { name: "Ada", age: 36 };
localStorage.setItem("user", JSON.stringify(user));

Десериализация с помощью JSON.parse

При чтении преобразуйте строку обратно в объект с помощью JSON.parse.

const raw = localStorage.getItem("user");
const user = JSON.parse(raw);
console.log(user.name); // "Ada"

Полный цикл преобразования

Полный шаблон таков: при сохранении применяйте stringify, а при чтении — parse. Это работает и для объектов, и для массивов.

localStorage.setItem("nums", JSON.stringify([1, 2, 3]));
const nums = JSON.parse(localStorage.getItem("nums"));
console.log(nums[0]); // 1

Обработка случая null

JSON.parse(null) возвращает null (ошибка не выбрасывается), но обработка отсутствующих данных всё равно может привести к неожиданностям. Укажите запасное значение по умолчанию.

const raw = localStorage.getItem("settings");
const settings = raw ? JSON.parse(raw) : {};

Защита от повреждённых данных

Если сохранённый JSON имеет неверный формат, JSON.parse выбрасывает SyntaxError. Оберните его в try/catch, чтобы одна повреждённая запись не привела к сбою приложения.

function readJSON(key, fallback) {
  try { return JSON.parse(localStorage.getItem(key)) ?? fallback; }
  catch { return fallback; }
}

Повторно используемая функция сохранения

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

function saveJSON(key, value) {
  localStorage.setItem(key, JSON.stringify(value));
}
saveJSON("cart", [{ id: 1, qty: 2 }]);

Что JSON не сохраняет

JSON не может представить функции, undefined, объекты Date (они превращаются в строки), Map и Set. Учитывайте это: сохраняйте даты в виде строк ISO и восстанавливайте их при чтении.

const obj = { fn: () => 1, when: new Date() };
console.log(JSON.stringify(obj)); // {"when":"2026-..."}

Восстановление дат

Поскольку даты сериализуются в строки, после разбора преобразуйте их обратно, если вам нужны методы Date.

const data = JSON.parse(localStorage.getItem("event"));
data.when = new Date(data.when);

Обновление вложенных данных

Чтобы изменить часть сохранённого объекта, прочитайте его, измените копию и запишите её обратно. У хранилища нет API для частичного обновления.

const cart = JSON.parse(localStorage.getItem("cart")) || [];
cart.push({ id: 9, qty: 1 });
localStorage.setItem("cart", JSON.stringify(cart));

Версионирование структуры данных

Структура данных приложения со временем меняется. Сохранение поля version позволяет перенести старые данные в новый формат или удалить их, когда формат изменится.

saveJSON("prefs", { version: 2, theme: "dark" });

Быстрая проверка

Сохранение объектов в Web Storage.

Повторение

Хранилище содержит строки, поэтому перед сохранением применяйте к объектам JSON.stringify, а при чтении — JSON.parse. Защищайте разбор данных с помощью try/catch и задавайте значения по умолчанию. Помните, что JSON не сохраняет функции и undefined, а даты превращает в строки. Обновляйте вложенные данные по схеме «прочитать — изменить — записать» и рассмотрите версионирование структуры сохранённых данных.

Часто задаваемые вопросы

Урок «Сохранение объектов с помощью JSON» бесплатный?

Да — полный текст урока «Сохранение объектов с помощью JSON» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.

Чему я научусь в уроке «Сохранение объектов с помощью JSON»?

Сериализуйте объекты для сохранения и последующего получения. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать JavaScript Academy?

Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Сохранение объектов с помощью JSON»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке JavaScript Academy?

Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к JavaScript Academy