LocalStorage vs SessionStorage

Основная идея

localStorage и sessionStorage — два типа веб-хранилищ с идентичным API, но разным временем жизни данных. localStorage сохраняет данные навсегда, sessionStorage — только до закрытия вкладки.

Ключевые аспекты

localStorage — данные сохраняются бессрочно, доступны во всех вкладках одного origin
sessionStorage — данные удаляются при закрытии вкладки, изолированы для каждой вкладки
Общий API — оба используют методы setItem(), getItem(), removeItem(), clear()
Объём — оба предоставляют 5-10 МБ (зависит от браузера)
Same-origin — данные доступны только для того же протокола, домена и порта

Плюсы localStorage

Данные сохраняются между сессиями
Доступны во всех вкладках
Подходит для долгосрочных настроек

Плюсы sessionStorage

Автоматическая очистка при закрытии вкладки
Изоляция данных между вкладками
Безопаснее для временных данных

Частые ошибки на собеседованиях

Считают, что sessionStorage удаляется при обновлении страницы (нет, только при закрытии вкладки)
Путают изоляцию: localStorage общий для вкладок, sessionStorage — нет
Забывают, что дублирование вкладки копирует sessionStorage
Не знают, что sessionStorage сохраняется при навигации внутри вкладки

Введение и проблематика

При работе с клиентскими данными важно понимать разницу между localStorage и sessionStorage. Выбор неправильного типа хранилища может привести к утечке данных между сессиями или, наоборот, к потере важных настроек.

Оба хранилища появились в HTML5 как часть Web Storage API. Они имеют идентичный интерфейс, но кардинально отличаются по поведению.

Когда какое хранилище использовать?

Сценарий	Рекомендация
Тема оформления	localStorage
Языковые настройки	localStorage
Данные формы (черновик)	sessionStorage
Временные фильтры	sessionStorage
Корзина покупок	localStorage или sessionStorage (зависит от бизнес-логики)

Базовая теория

Главное отличие: время жизни данных

graph TB
    subgraph localStorage
        A[Данные сохраняются] --> B[Между сессиями]
        B --> C[До ручного удаления]
    end
    subgraph sessionStorage
        D[Данные сохраняются] --> E[До закрытия вкладки]
        E --> F[Автоудаление]
    end

Сравнительная таблица

Характеристика	localStorage	sessionStorage
Время жизни	Бессрочно	До закрытия вкладки
Область видимости	Все вкладки одного origin	Только текущая вкладка
При обновлении страницы	Сохраняется	Сохраняется
При закрытии браузера	Сохраняется	Удаляется
При дублировании вкладки	Общие данные	Копируется в новую вкладку
Объём	5-10 МБ	5-10 МБ

⚠️

При дублировании вкладки (Ctrl+Shift+T или правый клик → "Дублировать") sessionStorage копируется в новую вкладку, но дальше они работают независимо.

Практические примеры

localStorage: сохранение настроек пользователя

// Сохранение темы при выборе пользователем
function setTheme(theme) {
  document.body.className = theme;
  localStorage.setItem('theme', theme);
}
 
// Восстановление темы при загрузке страницы
function loadTheme() {
  const savedTheme = localStorage.getItem('theme') || 'light';
  document.body.className = savedTheme;
}
 
// Вызов при загрузке
loadTheme();

sessionStorage: временные данные формы

// Автосохранение данных формы при вводе
const form = document.querySelector('#registration-form');
 
form.addEventListener('input', (e) => {
  const formData = {
    name: form.name.value,
    email: form.email.value,
    message: form.message.value
  };
  sessionStorage.setItem('formDraft', JSON.stringify(formData));
});
 
// Восстановление при случайном обновлении страницы
function restoreFormData() {
  const draft = sessionStorage.getItem('formDraft');
  if (draft) {
    const data = JSON.parse(draft);
    form.name.value = data.name || '';
    form.email.value = data.email || '';
    form.message.value = data.message || '';
  }
}
 
// Очистка после успешной отправки
form.addEventListener('submit', () => {
  sessionStorage.removeItem('formDraft');
});

Сравнение поведения

// Вкладка 1
localStorage.setItem('user', 'Иван');
 
// Вкладка 2 (того же сайта)
console.log(localStorage.getItem('user')); // 'Иван'
 
// После закрытия и открытия браузера
console.log(localStorage.getItem('user')); // 'Иван'

Пограничные кейсы

⚠️

Навигация в пределах вкладки: sessionStorage сохраняется при переходе между страницами одного сайта в той же вкладке. Это позволяет передавать данные между страницами.

// Страница 1: products.html
sessionStorage.setItem('selectedProduct', '123');
window.location.href = 'checkout.html';
 
// Страница 2: checkout.html
const productId = sessionStorage.getItem('selectedProduct'); // '123'

Событие storage: Работает только для localStorage. Позволяет синхронизировать данные между вкладками.

// Событие storage срабатывает только для localStorage
// и только в ДРУГИХ вкладках (не в той, где произошло изменение)
 
window.addEventListener('storage', (event) => {
  if (event.key === 'user') {
    console.log('Пользователь изменился:', event.newValue);
  }
});

Продвинутые аспекты

Выбор хранилища на основе требований

class StorageManager {
  constructor(type = 'local') {
    this.storage = type === 'local' ? localStorage : sessionStorage;
  }
 
  set(key, value) {
    try {
      this.storage.setItem(key, JSON.stringify(value));
      return true;
    } catch (e) {
      console.error('Storage error:', e);
      return false;
    }
  }
 
  get(key, defaultValue = null) {
    const item = this.storage.getItem(key);
    if (item === null) return defaultValue;
    try {
      return JSON.parse(item);
    } catch {
      return item;
    }
  }
 
  remove(key) {
    this.storage.removeItem(key);
  }
 
  clear() {
    this.storage.clear();
  }
}
 
// Использование
const permanentStorage = new StorageManager('local');
const tempStorage = new StorageManager('session');
 
permanentStorage.set('preferences', { theme: 'dark' });
tempStorage.set('wizardStep', 2);

Гибридный подход

// Корзина: localStorage для долгосрочного хранения,
// sessionStorage для "гостевой" сессии
 
function getCart() {
  // Сначала проверяем sessionStorage (для гостей)
  let cart = sessionStorage.getItem('cart');
 
  // Если нет, проверяем localStorage (для залогиненных)
  if (!cart && isUserLoggedIn()) {
    cart = localStorage.getItem('cart');
  }
 
  return cart ? JSON.parse(cart) : [];
}
 
function saveCart(cart) {
  const data = JSON.stringify(cart);
 
  if (isUserLoggedIn()) {
    localStorage.setItem('cart', data);
    sessionStorage.removeItem('cart');
  } else {
    sessionStorage.setItem('cart', data);
  }
}

Плюсы и минусы

Аспект	localStorage	sessionStorage
Персистентность	Сохраняется всегда	Только на время сессии
Безопасность	Данные остаются	Автоочистка
Синхронизация вкладок	Да (через event)	Нет
Изоляция	Нет	Да
Подходит для	Настройки, кэш	Временные данные

Вопросы интервьюера

Q: Что произойдёт с sessionStorage при обновлении страницы (F5)?

Данные сохранятся. sessionStorage удаляется только при закрытии вкладки, не при обновлении.

Q: Можно ли синхронизировать данные между вкладками через sessionStorage?

Нет, sessionStorage изолирован для каждой вкладки. Для синхронизации используйте localStorage и событие storage.

Q: Что выбрать для хранения токена авторизации?

Ни то, ни другое. Оба уязвимы к XSS. Для токенов рекомендуются httpOnly cookies.

Q: Удаляется ли sessionStorage при переходе на другую страницу?

Нет, если переход происходит в той же вкладке и в пределах одного origin.

React Front-end Инженер