В каком порядке выполняются скрипты

Формат хранения данных в localStorage

localStorage хранит данные исключительно в виде строк (string). Это один из ключевых аспектов работы с localStorage - браузер не поддерживает сохранение объектов или других типов данных напрямую.

Основное правило

Все значения в localStorage сохраняются и извлекаются как строки (текст):

// Сохранение строки
localStorage.setItem('name', 'John');

// Извлечение - также строка
const name = localStorage.getItem('name');
console.log(typeof name); // 'string'
console.log(name); // 'John'

Проблема с другими типами данных

Если вы пытаетесь сохранить число или булево значение, оно преобразуется в строку:

// Сохранение числа
localStorage.setItem('age', 25);

// Извлечение - это СТРОКА, не число
const age = localStorage.getItem('age');
console.log(typeof age); // 'string'
console.log(age); // '25' (строка, а не число!)
console.log(age + 1); // '251' - конкатенация строк

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

Сохранение объектов - JSON

Для сохранения объектов нужно использовать JSON.stringify():

// Исходный объект
const user = {
  name: 'Alice',
  age: 30,
  email: 'alice@example.com'
};

// Сохранение объекта как JSON-строки
localStorage.setItem('user', JSON.stringify(user));

// Извлечение и парсинг
const savedUser = JSON.parse(localStorage.getItem('user'));
console.log(typeof savedUser); // 'object'
console.log(savedUser.name); // 'Alice'

Сохранение массивов

Аррайи тоже сохраняются через JSON:

const tags = ['react', 'javascript', 'frontend'];

// Сохранение
localStorage.setItem('tags', JSON.stringify(tags));

// Извлечение
const savedTags = JSON.parse(localStorage.getItem('tags'));
console.log(Array.isArray(savedTags)); // true
console.log(savedTags[0]); // 'react'

Сохранение сложных структур

const appState = {
  user: {
    id: 1,
    name: 'Bob',
    profile: {
      avatar: 'https://example.com/avatar.jpg',
      verified: true
    }
  },
  settings: {
    theme: 'dark',
    notifications: true,
    languages: ['ru', 'en']
  }
};

// Сохранение сложного объекта
localStorage.setItem('appState', JSON.stringify(appState));

// Извлечение
const state = JSON.parse(localStorage.getItem('appState'));
console.log(state.user.profile.avatar); // работает корректно

Практический паттерн для работы

В реальных проектах рекомендуется создавать утилиты для работы с localStorage:

const storage = {
  setItem: (key, value) => {
    localStorage.setItem(key, JSON.stringify(value));
  },
  
  getItem: (key, defaultValue = null) => {
    const item = localStorage.getItem(key);
    if (item === null) return defaultValue;
    try {
      return JSON.parse(item);
    } catch (error) {
      console.error(`Failed to parse ${key}:`, error);
      return defaultValue;
    }
  },
  
  removeItem: (key) => {
    localStorage.removeItem(key);
  }
};

// Использование
storage.setItem('user', { name: 'Charlie', age: 28 });
const user = storage.getItem('user', {});
console.log(user.name); // 'Charlie'

Ограничения формата

Что можно сохранить через JSON.stringify():

• Объекты
• Массивы
• Строки, числа, булевы значения
• null

Что НЕЛЬЗЯ сохранить (потеряется информация):

• Функции
• undefined
• Date объекты (преобразуются в строку ISO)
• Map, Set
• Регулярные выражения

const data = {
  date: new Date(),
  func: () => console.log('hello')
};

const json = JSON.stringify(data);
console.log(json);
// '{"date":"2026-04-02T00:00:00.000Z"}'
// функция потеряется, дата стала строкой

Сохранение Date

Для Date объектов используйте специальный подход:

const date = new Date();
localStorage.setItem('date', date.toISOString());

// Извлечение
const savedDate = new Date(localStorage.getItem('date'));
console.log(savedDate instanceof Date); // true

Размер и производительность

• localStorage имеет ограничение в 5-10 MB (в зависимости от браузера)
• Все данные хранятся как строки, поэтому большие объекты увеличивают объем хранилища
• JSON.stringify() и JSON.parse() имеют вычислительную стоимость

Заключение

Запомните: localStorage всегда работает со строками. Если вам нужны другие типы данных - используйте JSON.stringify() для сохранения и JSON.parse() для извлечения. Это универсальный и надежный способ работы с localStorage в современных веб-приложениях.