Как обезопасить себя от ситуации, когда в localStorage по ключу хранится невалидный JSON?

Проблема невалидного JSON

localStorage хранит данные в виде строк. Когда вы сохраняете объект, вы преобразуете его в JSON-строку через JSON.stringify. При чтении вы вызываете JSON.parse, чтобы вернуть объект. Однако данные в localStorage могут быть изменены пользователем, устареть после обновления версии приложения или быть повреждены. Если строка не является корректным JSON, JSON.parse выбросит исключение SyntaxError, что может остановить выполнение скрипта и сломать интерфейс.

Решение через try...catch

Самый простой способ — обернуть парсинг в try...catch. Если возникает ошибка, вы можете вернуть значение по умолчанию или удалить повреждённые данные. Пример:

function getData(key, fallback) {
  try {
    const raw = localStorage.getItem(key);
    return raw ? JSON.parse(raw) : fallback;
  } catch (e) {
    console.warn('Invalid JSON for key', key, e);
    localStorage.removeItem(key); // очистка
    return fallback;
  }
}

const user = getData('user', { name: 'Guest' });

Этот подход гарантирует, что приложение продолжит работать даже при повреждённых данных.

Дополнительные меры безопасности

Помимо try...catch, можно добавить проверку структуры данных после парсинга. Например, убедиться, что полученный объект имеет ожидаемые поля. Это защитит от ситуаций, когда JSON валиден, но не соответствует ожидаемой схеме. Также полезно использовать версионирование ключей: добавлять номер версии в ключ, чтобы при изменении формата данных старые записи не использовались.

Вывод

Всегда используйте try...catch при чтении JSON из localStorage. Это простое правило предотвращает сбои и делает код устойчивым к внешним изменениям данных. Для критичных данных добавьте проверку структуры и очистку повреждённых записей.