Работа с localStorage: методы, хранение объектов и защита данных

localStorage — это встроенное в браузер хранилище данных на стороне клиента. В отличие от cookies, данные в localStorage не передаются на сервер с каждым запросом и не имеют срока истечения — они хранятся до явного удаления. Максимальный размер — около 5 МБ на домен.

Отличие от sessionStorage и cookies

	localStorage	sessionStorage	cookie
Срок хранения	Постоянно	До закрытия вкладки	Задаётся вручную
Объём	~5 МБ	~5 МБ	~4 КБ
Доступ с сервера	Нет	Нет	Да
Область видимости	Весь домен	Вкладка	Весь домен

Основные методы

// Записать
localStorage.setItem('key', 'value');

// Прочитать (вернёт null если ключа нет)
const value = localStorage.getItem('key');

// Удалить один ключ
localStorage.removeItem('key');

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

// Количество записей
console.log(localStorage.length);

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

// Записать

localStorage.setItem('key', 'value');

// Прочитать (вернёт null если ключа нет)

const value = localStorage.getItem('key');

// Удалить один ключ

localStorage.removeItem('key');

// Очистить всё хранилище

localStorage.clear();

// Количество записей

console.log(localStorage.length);

// Получить ключ по индексу

const key = localStorage.key(0);

Хранение объектов и массивов

localStorage хранит только строки. Для объектов используйте JSON:

// Сохранить объект
const user = { id: 1, name: 'Иван', roles: ['admin', 'editor'] };
localStorage.setItem('user', JSON.stringify(user));

// Прочитать объект
const stored = localStorage.getItem('user');
const user = stored ? JSON.parse(stored) : null;

// Безопасное чтение с дефолтным значением
function getItem(key, defaultValue = null) {
    try {
        const item = localStorage.getItem(key);
        return item !== null ? JSON.parse(item) : defaultValue;
    } catch (e) {
        return defaultValue;
    }
}

// Сохранить объект

const user = { id: 1, name: 'Иван', roles: ['admin', 'editor'] };

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

// Прочитать объект

const stored = localStorage.getItem('user');

const user = stored ? JSON.parse(stored) : null;

// Безопасное чтение с дефолтным значением

function getItem(key, defaultValue = null) {

try {

const item = localStorage.getItem(key);

return item !== null ? JSON.parse(item) : defaultValue;

} catch (e) {

return defaultValue;

}

Запись через квадратные скобки

localStorage['theme'] = 'dark';          // запись
const theme = localStorage['theme'];     // чтение
delete localStorage['theme'];           // удаление

localStorage['theme'] = 'dark'; // запись

const theme = localStorage['theme']; // чтение

delete localStorage['theme']; // удаление

Хранение данных с временной меткой

localStorage не удаляет данные автоматически. Чтобы реализовать «протухание», сохраняйте время записи:

function setWithExpiry(key, value, ttlMs) {
    localStorage.setItem(key, JSON.stringify({
        value,
        expiry: Date.now() + ttlMs,
    }));
}

function getWithExpiry(key) {
    const item = localStorage.getItem(key);
    if (!item) return null;
    const { value, expiry } = JSON.parse(item);
    if (Date.now() > expiry) {
        localStorage.removeItem(key);
        return null;
    }
    return value;
}

// Сохранить на 1 час
setWithExpiry('cache_key', { data: 'some data' }, 60 * 60 * 1000);
const data = getWithExpiry('cache_key');

function setWithExpiry(key, value, ttlMs) {

localStorage.setItem(key, JSON.stringify({

value,

expiry: Date.now() + ttlMs,

}));

}

function getWithExpiry(key) {

const item = localStorage.getItem(key);

if (!item) return null;

const { value, expiry } = JSON.parse(item);

if (Date.now() > expiry) {

localStorage.removeItem(key);

return null;

}

return value;

}

// Сохранить на 1 час

setWithExpiry('cache_key', { data: 'some data' }, 60 * 60 * 1000);

const data = getWithExpiry('cache_key');

Обработка переполнения хранилища

function safeSetItem(key, value) {
    try {
        localStorage.setItem(key, JSON.stringify(value));
        return true;
    } catch (e) {
        if (e.name === 'QuotaExceededError') {
            console.warn('localStorage переполнен');
            // Можно очистить старые записи и попробовать снова
        }
        return false;
    }
}

function safeSetItem(key, value) {

try {

localStorage.setItem(key, JSON.stringify(value));

return true;

} catch (e) {

if (e.name === 'QuotaExceededError') {

console.warn('localStorage переполнен');

// Можно очистить старые записи и попробовать снова

}

return false;

}

Реакция на изменения в других вкладках

// Событие storage срабатывает в ДРУГИХ вкладках того же домена
window.addEventListener('storage', (event) => {
    console.log('Изменён ключ:', event.key);
    console.log('Старое значение:', event.oldValue);
    console.log('Новое значение:', event.newValue);
});

// Событие storage срабатывает в ДРУГИХ вкладках того же домена

window.addEventListener('storage', (event) => {

console.log('Изменён ключ:', event.key);

console.log('Старое значение:', event.oldValue);

console.log('Новое значение:', event.newValue);

});

Когда НЕ использовать localStorage

Для хранения токенов авторизации (JWT) — уязвимо к XSS-атакам, лучше httpOnly cookie
Для больших объёмов данных (используйте IndexedDB)
Для данных, которые должны быть доступны на сервере (используйте cookie или запросы к API)