Перейти на PRO

Как хранить JSON в localStorage

Тип вопроса: JavaScript Вероятность: 10% Категория: Frontend Разработчик

Ответ

Для хранения JSON в localStorage нужно преобразовать объект в строку с помощью JSON.stringify() перед сохранением, а при извлечении — парсить обратно через JSON.parse().

Пример:

// Сохранение
const user = { name: 'Alice', age: 25 };
localStorage.setItem('user', JSON.stringify(user));

// Получение
const storedUser = JSON.parse(localStorage.getItem('user'));
console.log(storedUser); // { name: 'Alice', age: 25 }

Нюансы:

  1. localStorage хранит только строки, поэтому без JSON.stringify() объект сохранится как [object Object].
  2. При ошибке парсинга (например, если данные повреждены) JSON.parse() выбросит исключение — оберните в try/catch.
  3. Лимит localStorage — ~5MB, учитывайте это для больших данных.

Ответ 18+ 🔞

Ага, слушай, вот тебе жизненная ситуация. Представь, ты такой: «О, надо бы эту мою объектную хуету в localStorage запихнуть, там же удобно!». И ты пишешь localStorage.setItem('myData', myCoolObject). А потом приходишь забирать — а там, блядь, не объект, а строка [object Object]. И ты сидишь, такой: «Ну что за пиздец? Куда мои данные делись?».

А вся фишка в том, что эта штука — localStorage — она, как упоротый бюрократ, принимает только строки. Ей похуй на твои сложные объекты с массивами внутри. Ей подавай текст.

Поэтому, чтобы не облажаться, нужно сделать два простых шага, как ритуал:

  1. Перед тем как засунуть — превращаем объект в строку. Волшебная палочка — JSON.stringify().

    const user = { name: 'Alice', age: 25 };
localStorage.setItem('user', JSON.stringify(user));

    Всё, теперь в хранилище лежит не кривая рожа объекта, а аккуратная JSON-строка. localStorage доволен.

  2. Когда достаём — делаем обратный фокус. Достаём строку и оживляем её через JSON.parse().

    const storedUser = JSON.parse(localStorage.getItem('user'));
console.log(storedUser); // { name: 'Alice', age: 25 } — вуаля!

Но есть, конечно, подводные ебучки, куда ж без них:

  • Парсинг может наебнуться. Если кто-то (или что-то) там в хранилище накосячило и данные битые, JSON.parse() тебе выкинет ошибку, и всё встанет. Поэтому, если не уверен, оберни это дело в try/catch, чтобы не получить неожиданный пиздец посреди кода.
  • Место не безграничное. Лимит — где-то 5 мегабайт. Это, конечно, овердохуища для настроек или токена, но если ты туда решишь пихнуть всю библиотеку фоток своей кошки в base64 — быстро упрёшься в потолок, и будет тебе «QuotaExceededError», что в переводе на русский — «иди нахуй со своим объёмом».

Короче, запомни: засунул — stringify, достал — parse. И будет тебе счастье, а не «[object Object]» в ответ.

© ХакСобесов, 2026
support@hacksobesov.com