localStorage в JavaScript: как сохранить данные в JS

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

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

Установка значения

localStorage.setItem('username', 'Alice');

Получение значения

const username = localStorage.getItem('username');
console.log(username); // Alice

Удаление значения

localStorage.removeItem('username');

Очистка всех данных

localStorage.clear();

Хранение сложных данных

localStorage поддерживает только строки, но можно сохранить объект, преобразовав его в JSON:

const user = { name: 'Alice', age: 25 };
localStorage.setItem('user', JSON.stringify(user));

При получении данных нужно выполнить обратное преобразование:

const storedUser = JSON.parse(localStorage.getItem('user'));
console.log(storedUser.name); // Alice

Проверка наличия ключа

if (localStorage.getItem('username')) {
    console.log('Имя пользователя сохранено');
} else {
    console.log('Имя пользователя отсутствует');
}

Ограничения localStorage

• Данные хранятся в виде строк.
• Максимальный объем хранения — около 5 МБ.
• Доступен только в том же домене.
• Не подходит для хранения конфиденциальной информации (нет шифрования).

Отличия localStorage от sessionStorage

• localStorage сохраняет данные даже после закрытия браузера.
• sessionStorage удаляет данные при закрытии вкладки.

Пример использования sessionStorage:

sessionStorage.setItem('sessionKey', 'sessionValue');
console.log(sessionStorage.getItem('sessionKey'));

localStorage в JavaScript — это удобный способ хранения данных в браузере. Он позволяет сохранять настройки пользователя, кэшировать данные и создавать простые механизмы авторизации без использования серверных решений.