Веб-хранилища localStorage и sessionStorage: разница, применение

Для кого эта статья:

• Веб-разработчики и программисты
• Студенты и обучающиеся на курсах веб-разработки

• Специалисты по кибербезопасности и разработке интерфейсов

  Кто из нас не сталкивался с проблемой потери введённых данных после случайного закрытия вкладки браузера? Представьте, что пользователь заполняет объёмную форму заявки, а интернет внезапно пропадает — всё насмарку! Или, может, вы хотите, чтобы ваше веб-приложение запоминало настройки пользователя между посещениями сайта? Здесь на помощь приходят браузерные хранилища localStorage и sessionStorage — мощные инструменты JavaScript для хранения данных прямо в браузере пользователя. Они позволяют решить задачи персистентности данных, но работают по-разному, и знание их особенностей — ключ к оптимальной архитектуре вашего приложения. 🔐

Освоить тонкости работы с браузерными хранилищами вы можете на курсе Обучение веб-разработке от Skypro. В программе вас ждут не только теоретические знания о localStorage и sessionStorage, но и практические задания по созданию интерактивных веб-приложений с сохранением состояния. Вы научитесь создавать приложения, которые не теряют данные пользователя даже при проблемах с соединением — навык, высоко ценимый работодателями!

Что такое Web Storage API: localStorage и sessionStorage

Web Storage API — это набор механизмов, позволяющих браузерам хранить пары ключ-значение, привязанные к конкретному домену. В отличие от cookies, хранилища имеют значительно большую ёмкость (обычно 5-10 МБ против 4 КБ у cookies) и не отправляются автоматически на сервер с каждым HTTP-запросом. 🧠

API веб-хранилища предоставляет два основных объекта:

• localStorage — сохраняет данные без срока давности, даже после закрытия браузера
• sessionStorage — сохраняет данные только в рамках текущей вкладки/сессии браузера

Оба хранилища доступны через глобальные объекты в окне браузера. Работать с ними можно напрямую через JavaScript, используя простой синтаксис:

// Запись в localStorage
localStorage.setItem('username', 'John');

// Запись в sessionStorage
sessionStorage.setItem('temporaryToken', '12345abcde');

Web Storage был представлен как часть спецификации HTML5, и сегодня поддерживается всеми современными браузерами. Он стал незаменимым инструментом для разработчиков, позволяя создавать более отзывчивые и устойчивые веб-приложения.

Алексей Петров, ведущий frontend-разработчик

Однажды наша команда столкнулась с серьёзной проблемой: пользователи жаловались на потерю данных при заполнении многоэтапной формы бронирования. Особенно часто это происходило на мобильных устройствах, где соединение нестабильно.

Мы внедрили автосохранение с помощью sessionStorage: при каждом заполнении поля данные сохранялись локально. Если пользователь случайно закрывал вкладку, при возврате форма восстанавливалась в прежнем состоянии в рамках той же сессии.

Для критически важных данных мы использовали localStorage с шифрованием — это позволило пользователям вернуться к заполнению даже спустя несколько дней. Результат? Количество успешных конверсий выросло на 23%, а число обращений в поддержку снизилось на 41%.

Различия между localStorage и sessionStorage

Хотя localStorage и sessionStorage используют одинаковый API, между ними существуют фундаментальные различия, которые определяют, когда следует использовать каждое из них. Понимание этих различий позволит вам принимать более обоснованные архитектурные решения. 🧩

Ключевые особенности localStorage:

• Данные сохраняются между сеансами браузера
• Данные доступны во всех вкладках и окнах одного домена
• Идеален для долгосрочных настроек пользовательского интерфейса, списков избранного, токенов авторизации и т.д.
• Не имеет встроенного механизма истечения срока действия данных

Ключевые особенности sessionStorage:

• Данные доступны только в рамках текущей вкладки
• Данные очищаются при закрытии вкладки/окна
• Идеален для временных данных: состояние пошаговых форм, корзины покупок, временных токенов
• Обеспечивает изоляцию данных между вкладками одного сайта

Использование sessionStorage особенно полезно в многовкладочной среде: когда пользователь открывает несколько экземпляров вашего приложения, каждый экземпляр получает свое изолированное хранилище. Это предотвращает коллизии данных между вкладками.

localStorage, напротив, позволяет организовать "общение" между вкладками: изменение в одной вкладке может быть обнаружено и обработано в другой через событие storage:

// Отслеживание изменений в localStorage из другой вкладки
window.addEventListener('storage', (event) => {
console.log('Ключ был изменен: ', event.key);
console.log('Старое значение: ', event.oldValue);
console.log('Новое значение: ', event.newValue);
});

Основные методы работы с браузерными хранилищами

Web Storage API предоставляет простой и удобный интерфейс для работы с данными. Оба хранилища — localStorage и sessionStorage — используют одинаковые методы, что упрощает их изучение и применение. Давайте рассмотрим основные методы и приёмы работы с ними. 🛠️

Основные методы для работы с хранилищами:

• setItem(ключ, значение) — сохраняет пару ключ-значение
• getItem(ключ) — получает значение по ключу
• removeItem(ключ) — удаляет значение по ключу
• clear() — очищает всё хранилище
• key(индекс) — получает ключ по порядковому номеру
• length — свойство, возвращающее количество элементов в хранилище

Пример базового использования методов:

// Сохранение данных
localStorage.setItem('user', 'John');

// Получение данных
const user = localStorage.getItem('user'); // "John"

// Удаление конкретных данных
localStorage.removeItem('user');

// Полная очистка хранилища
localStorage.clear();

// Получение количества элементов
const count = localStorage.length;

// Получение ключа по индексу
const firstKey = localStorage.key(0);

При работе с объектами или массивами следует помнить, что хранилище может хранить только строки. Для сохранения сложных структур необходимо их сериализовать:

// Сохранение объекта
const user = {
name: 'John',
age: 30,
preferences: {
theme: 'dark',
notifications: true
}
};

localStorage.setItem('user', JSON.stringify(user));

// Получение и десериализация объекта
const savedUser = JSON.parse(localStorage.getItem('user'));
console.log(savedUser.preferences.theme); // "dark"

Альтернативный синтаксис доступа через операторы объекта также доступен, но менее рекомендуется из-за возможных конфликтов с существующими свойствами объекта:

// Альтернативный синтаксис (не рекомендуется для основного использования)
localStorage.user = JSON.stringify(user);
const savedUser = JSON.parse(localStorage.user);

Для обеспечения обратной совместимости и обработки ошибок рекомендуется проверять доступность API перед использованием:

function isStorageAvailable(type) {
try {
const storage = window[type];
const testKey = '__storage_test__';
storage.setItem(testKey, testKey);
storage.removeItem(testKey);
return true;
} catch (e) {
return false;
}
}

if (isStorageAvailable('localStorage')) {
// localStorage доступен
} else {
// Используйте альтернативный подход
}

Ограничения и безопасность при хранении данных

При использовании браузерных хранилищ важно понимать их ограничения и потенциальные риски безопасности. Эти знания помогут вам разрабатывать более надёжные и безопасные приложения. ⚠️

Основные ограничения хранилищ:

Вопросы безопасности при использовании хранилищ:

• XSS-уязвимости — злоумышленник может внедрить JavaScript-код, который получит доступ к хранилищу
• Конфиденциальность данных — хранилища доступны для любого JavaScript-кода, выполняемого в контексте вашего домена
• Отсутствие шифрования — данные хранятся в открытом виде и могут быть просмотрены пользователем через инструменты разработчика
• Постоянство данных — localStorage сохраняет данные даже после закрытия браузера, что может создать проблемы с конфиденциальностью

Рекомендации по безопасному использованию:

1. Никогда не храните чувствительные данные (пароли, номера кредитных карт, ключи API с полным доступом) в открытом виде
2. Для авторизационных токенов используйте кратковременные токены с обновлением
3. Реализуйте шифрование на клиентской стороне для критически важных данных:

// Пример шифрования данных перед сохранением
function secureStore(key, data, userSecret) {
// Простая демонстрация, в реальных проектах используйте
// библиотеки шифрования, например CryptoJS
const encryptedData = btoa(JSON.stringify(data) + userSecret);
localStorage.setItem(key, encryptedData);
}

function secureRetrieve(key, userSecret) {
const encryptedData = localStorage.getItem(key);
if (!encryptedData) return null;

try {
const decoded = atob(encryptedData);
if (decoded.endsWith(userSecret)) {
const jsonStr = decoded.slice(0, -userSecret.length);
return JSON.parse(jsonStr);
}
return null;
} catch (e) {
return null;
}
}

При превышении лимита объема хранилища браузер может выбросить исключение. Чтобы избежать проблем, всегда оборачивайте операции с хранилищем в блок try/catch:

try {
localStorage.setItem('bigData', veryLargeString);
} catch (e) {
console.error('Не удалось сохранить данные: ', e);
// Реализуйте запасной вариант или уведомите пользователя
}

Марина Соколова, специалист по кибербезопасности

Работая над аудитом безопасности финтех-стартапа, я обнаружила, что разработчики хранили номера банковских карт в localStorage в открытом виде. Это критическая уязвимость: любой скрипт на сайте или расширение браузера могли получить эти данные.

Мы разработали систему, где чувствительные данные шифровались с использованием Web Crypto API перед сохранением в localStorage. Ключ шифрования никогда не сохранялся в браузере, а генерировался на основе ввода пользователя.

Дополнительно внедрили проверки целостности данных и механизм автоматического удаления при подозрительной активности. После внедрения этих мер приложение успешно прошло сертификацию PCI DSS, что позволило компании работать с платежными системами напрямую.

Практические сценарии применения веб-хранилищ

Веб-хранилища — универсальные инструменты, находящие применение во множестве сценариев современной веб-разработки. Их правильное использование может значительно улучшить пользовательский опыт и производительность приложений. Рассмотрим наиболее распространённые и эффективные способы их применения. 🚀

Сценарии для localStorage:

• Пользовательские настройки и предпочтения — темы оформления, размеры шрифта, языковые настройки
• Кэширование данных — сохранение редко изменяющихся данных для уменьшения количества запросов к серверу
• Автосохранение форм — сохранение незаконченного ввода в формах для восстановления после перезагрузки
• Локальная история просмотров — отслеживание просмотренных товаров или статей
• "Помнить меня" — сохранение токенов аутентификации для автологина (с соблюдением мер безопасности)
• Офлайн-режим — базовое хранение данных для работы в офлайне

Сценарии для sessionStorage:

• Многостраничные формы — сохранение данных между шагами формы
• Корзины покупок — временное хранение выбранных товаров в рамках сессии
• История навигации по сайту — сохранение пути пользователя для функции "Назад"
• Временные токены — хранение одноразовых токенов аутентификации
• Изоляция данных между вкладками — когда каждой вкладке требуется независимое состояние

Пример реализации автосохранения формы:

// HTML: <textarea id="editor" placeholder="Начните писать..."></textarea>

const editor = document.getElementById('editor');

// Загрузка сохраненного текста при открытии страницы
window.addEventListener('load', () => {
const savedText = localStorage.getItem('draft');
if (savedText) {
editor.value = savedText;
}
});

// Сохранение при каждом изменении
editor.addEventListener('input', () => {
localStorage.setItem('draft', editor.value);
});

// Кнопка очистки черновика
document.getElementById('clearDraft').addEventListener('click', () => {
localStorage.removeItem('draft');
editor.value = '';
});

Пример реализации многостраничной формы с sessionStorage:

// Шаг 1: Сохраняем персональные данные
function savePersonalInfo() {
const formData = {
name: document.getElementById('name').value,
email: document.getElementById('email').value,
phone: document.getElementById('phone').value
};

sessionStorage.setItem('formStep1', JSON.stringify(formData));
window.location.href = 'step2.html'; // Переход на следующий шаг
}

// Шаг 2: Загружаем сохраненные данные и продолжаем
function loadStep2() {
const step1Data = JSON.parse(sessionStorage.getItem('formStep1') || '{}');

// Показываем ранее введенные данные
document.getElementById('summary-name').textContent = step1Data.name || '';
document.getElementById('summary-email').textContent = step1Data.email || '';

// Если нет данных с предыдущего шага, возвращаем на шаг 1
if (!step1Data.name) {
alert('Пожалуйста, заполните сначала персональные данные');
window.location.href = 'step1.html';
}
}

Пример синхронизации данных между вкладками с localStorage:

// Страница 1: Отправляет сообщение другим вкладкам
function broadcastMessage(message) {
localStorage.setItem('broadcastMessage', JSON.stringify({
message,
timestamp: Date.now()
}));
}

// Страница 2: Слушает сообщения
window.addEventListener('storage', (event) => {
if (event.key === 'broadcastMessage') {
const data = JSON.parse(event.newValue);
console.log(`Получено новое сообщение: ${data.message}`);

// Обновляем интерфейс с новыми данными
document.getElementById('notification').textContent = data.message;
document.getElementById('notification').style.display = 'block';
}
});

При разработке приложений следует учитывать следующие практические рекомендации:

1. Всегда предусматривайте вариант, когда хранилище недоступно или его объем ограничен
2. Периодически очищайте устаревшие данные, чтобы не превышать лимиты хранилища
3. Используйте префиксы для ключей, чтобы избежать конфликтов между разными компонентами приложения
4. Организуйте структуру хранимых данных — лучше хранить один структурированный объект, чем множество отдельных значений
5. Реализуйте версионирование сохраняемых данных, чтобы обеспечить обратную совместимость при обновлениях приложения

Технологии localStorage и sessionStorage открывают широкие возможности для создания быстрых, отзывчивых и удобных веб-приложений. Они позволяют сохранять и восстанавливать состояние интерфейса, кэшировать данные, улучшать пользовательский опыт при нестабильном соединении. При этом важно помнить про ограничения хранилищ и не хранить в открытом виде чувствительные данные. Грамотно используя эти инструменты, вы сможете создавать приложения, которые работают бесперебойно и обеспечивают лучший пользовательский опыт даже в условиях неидеального интернет-соединения.