LocalStorage и SessionStorage в JavaScript: как хранить данные на стороне клиента

Когда вы пишете веб-приложение, рано или поздно встаёт вопрос: где хранить временные данные пользователя? Например, настройки темы, корзину покупок или просто состояние игры. Конечно, можно отправить всё на сервер, но это лишние запросы и нагрузка. В браузере есть два простых инструмента — LocalStorage и SessionStorage. Они позволяют хранить данные прямо на компьютере пользователя. В этой статье мы разберём, как с ними работать, чем они отличаются и когда что использовать. Я покажу примеры на JavaScript и даже затрону PHP, чтобы вы видели картину целиком.

Что такое LocalStorage и SessionStorage

Оба этих объекта — часть Web Storage API. Они дают возможность хранить пары «ключ-значение» в браузере. Данные сохраняются в виде строк. Если вам нужно хранить объекты или массивы, придётся использовать JSON.stringify и JSON.parse.

Главное отличие — время жизни. LocalStorage хранит данные даже после закрытия браузера. Они остаются, пока вы их не удалите вручную или не очистите кеш. SessionStorage живёт только в рамках одной вкладки. Как только вы закрываете вкладку — данные исчезают. Это удобно для временных сессий, например, для формы регистрации.

Оба хранилища доступны только на том же домене, протоколе и порте. То есть данные с http://example.com не увидит https://example.com. Это безопасно.

Как работать с LocalStorage

LocalStorage — это объект, который висит на window. У него есть несколько методов. Самые популярные: setItem, getItem, removeItem и clear. Давайте посмотрим на примере.

// Сохраняем данные
localStorage.setItem('username', 'Иван');
localStorage.setItem('theme', 'dark');

// Читаем данные
let user = localStorage.getItem('username');
console.log(user); // Выведет 'Иван'

// Удаляем одну запись
localStorage.removeItem('theme');

// Очищаем всё хранилище
localStorage.clear();

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

let settings = { fontSize: 16, color: 'blue' };
localStorage.setItem('settings', JSON.stringify(settings));

// Читаем обратно
let saved = JSON.parse(localStorage.getItem('settings'));
console.log(saved.fontSize); // 16

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

Как работать с SessionStorage

SessionStorage работает точно так же, но данные живут недолго. Вот пример:

// Сохраняем
sessionStorage.setItem('cart', JSON.stringify(['item1', 'item2']));

// Читаем
let cart = JSON.parse(sessionStorage.getItem('cart'));
console.log(cart); // ['item1', 'item2']

// Удаляем
sessionStorage.removeItem('cart');

Если открыть ту же страницу в новой вкладке, SessionStorage будет пустым. Это важно помнить.

Сравнение LocalStorage и SessionStorage

Давайте сведём отличия в таблицу, чтобы было наглядно.

Как видите, разница только в том, как долго данные живут. Выбор зависит от задачи.

Практический пример: корзина покупок на JavaScript

Допустим, вы делаете интернет-магазин. Корзину удобно хранить в LocalStorage, чтобы при перезагрузке страницы товары не пропадали. Вот простой код:

// Добавляем товар в корзину
function addToCart(productId, productName, price) {
    let cart = JSON.parse(localStorage.getItem('cart')) || [];
    cart.push({ id: productId, name: productName, price: price });
    localStorage.setItem('cart', JSON.stringify(cart));
}

// Получаем корзину
function getCart() {
    return JSON.parse(localStorage.getItem('cart')) || [];
}

// Очищаем корзину
function clearCart() {
    localStorage.removeItem('cart');
}

// Пример вызова
addToCart(1, 'Ноутбук', 50000);
addToCart(2, 'Мышь', 1500);
console.log(getCart()); // [{ id: 1, name: 'Ноутбук', price: 50000 }, { id: 2, name: 'Мышь', price: 1500 }]

Обратите внимание: мы проверяем, есть ли уже корзина в хранилище, и если нет — создаём пустой массив. Это типичный паттерн.

Когда подключается PHP

Как PHP-разработчик вы часто будете работать с данными, которые приходят от клиента. LocalStorage — это клиентская история. Но вы можете использовать PHP, чтобы отдать начальные данные или синхронизировать корзину с сервером. Например, при оформлении заказа отправьте данные из LocalStorage через AJAX на сервер.

// PHP-скрипт для сохранения корзины
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $cart = json_decode(file_get_contents('php://input'), true);
    // Сохраняем в базу данных или сессию
    session_start();
    $_SESSION['cart'] = $cart;
    echo json_encode(['status' => 'ok']);
}

А на стороне JavaScript отправка выглядит так:

fetch('/save-cart.php', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: localStorage.getItem('cart')
}).then(response => response.json()).then(data => console.log(data));

Так вы соединяете клиентскую и серверную логику.

Безопасность и ограничения

Никогда не храните в LocalStorage и SessionStorage чувствительные данные: пароли, токены, данные кредитных карт. Почему? Потому что эти данные доступны любому скрипту на странице через JavaScript. Если на сайте есть XSS-уязвимость, злоумышленник легко прочитает хранилище. Для токенов используйте HTTP-only куки, они недоступны из JavaScript.

Ещё одно ограничение — размер. Обычно это 5-10 МБ на домен. Если вы попытаетесь записать больше, браузер выбросит исключение. Всегда оборачивайте запись в try-catch.

try {
    localStorage.setItem('bigData', 'строка огромного размера...');
} catch (e) {
    console.error('Не удалось сохранить данные:', e);
}

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

Итоговое резюме

LocalStorage и SessionStorage — простые и полезные инструменты для хранения данных на стороне клиента. LocalStorage подходит для долгосрочных настроек, SessionStorage — для временных данных сессии. Главное — не хранить секреты и проверять размер. В паре с PHP вы можете строить гибкие веб-приложения, где часть логики на клиенте, часть на сервере. Используйте эти знания с умом.

Студия WNDER