В каком формате хранятся данные в localStorage

В каком формате хранятся данные в localStorage

localStorage — это Web Storage API браузера, который позволяет сохранять данные на клиенте. Данные хранятся в виде пар ключ-значение, где оба элемента являются строками (string). Это критически важно понимать, так как многие разработчики забывают об этом ограничении.

Строковый формат хранения

localStorage хранит всё как текст (UTF-16 строки). Даже если вы попытаетесь сохранить объект или число, они будут автоматически преобразованы в строковое представление.

// Пример: что происходит при сохранении
localStorage.setItem('number', 42);
localStorage.setItem('boolean', true);
localStorage.setItem('object', { name: 'John' });

// При извлечении получаем СТРОКИ:
console.log(typeof localStorage.getItem('number'));   // 'string'
console.log(localStorage.getItem('number'));          // '42'
console.log(typeof localStorage.getItem('boolean'));  // 'string'
console.log(localStorage.getItem('boolean'));         // 'true'
console.log(localStorage.getItem('object'));          // '[object Object]'

Правильное сохранение сложных типов

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

// Правильный способ работы с объектами
const user = {
  id: 1,
  name: 'Alice',
  email: 'alice@example.com',
  preferences: {
    theme: 'dark',
    notifications: true
  }
};

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

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

Практический пример с обработкой ошибок

// Хелпер функции для безопасной работы
const storageHelper = {
  set: (key, value) => {
    try {
      const serialized = typeof value === 'string' ? value : JSON.stringify(value);
      localStorage.setItem(key, serialized);
    } catch (error) {
      console.error('Ошибка при сохранении в localStorage:', error);
    }
  },
  
  get: (key, defaultValue = null) => {
    try {
      const item = localStorage.getItem(key);
      if (!item) return defaultValue;
      
      try {
        return JSON.parse(item);
      } catch {
        // Если парсинг не удался, возвращаем сырую строку
        return item;
      }
    } catch (error) {
      console.error('Ошибка при чтении из localStorage:', error);
      return defaultValue;
    }
  },
  
  remove: (key) => {
    try {
      localStorage.removeItem(key);
    } catch (error) {
      console.error('Ошибка при удалении из localStorage:', error);
    }
  }
};

// Использование
storageHelper.set('config', { timeout: 5000, retries: 3 });
const config = storageHelper.get('config'); // Объект, не строка

Ограничения хранилища

• Размер: ~5-10 МБ на домен (зависит от браузера)
• Формат: только строки
• Синхронность: API синхронный, блокирует поток
• Область видимости: одна вкладка на домен (для одного доменного имени)

sessionStorage vs localStorage

• localStorage — данные остаются до явного удаления или очистки браузера
• sessionStorage — данные удаляются при закрытии вкладки

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

Слушание изменений

// Событие срабатывает при изменении в другой вкладке
window.addEventListener('storage', (event) => {
  console.log(`${event.key} изменился с '${event.oldValue}' на '${event.newValue}'`);
  
  // Можно обновить UI при изменении данных
  if (event.key === 'theme') {
    const newTheme = JSON.parse(event.newValue);
    applyTheme(newTheme);
  }
});

Итоги

Ключевые моменты:

• localStorage хранит только строки
• Для сложных типов используй JSON.stringify() / JSON.parse()
• Всегда оборачивай в try-catch для обработки ошибок
• Помни об ограничении размера (~5-10 МБ)
• В продакшене рассмотри IndexedDB для больших объёмов данных