Что такое localStorage и sessionStorage в JavaScript

В этой статье мы рассмотрим два важных объекта, используемых для хранения данных на клиентской стороне веб-приложений: localStorage и sessionStorage. Эти объекты предоставляют простой, но мощный способ сохранять и извлекать данные, которые могут быть доступны даже после закрытия и повторного открытия вкладки или окна браузера. 🌐

localStorage

localStorage является объектом, который позволяет хранить данные без истечения срока действия. Это означает, что данные, которые вы сохраняете в localStorage, останутся там, даже если пользователь закроет браузер или выключит компьютер. Данные, хранящиеся в localStorage, имеют лимит размера (обычно около 5-10 МБ), и они доступны только для того же домена, что и ваш веб-сайт.

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

// Сохранение данных в localStorage
localStorage.setItem("username", "JohnDoe");

// Извлечение данных из localStorage
let username = localStorage.getItem("username");

// Удаление данных из localStorage
localStorage.removeItem("username");

// Очистка всего localStorage
localStorage.clear();

sessionStorage

sessionStorage — это другой объект, который также позволяет хранить данные на клиентской стороне. Основное отличие от localStorage заключается в том, что данные в sessionStorage сохраняются только на время жизни сессии. Это означает, что данные будут утеряны после закрытия вкладки или окна браузера. 🚀

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

// Сохранение данных в sessionStorage
sessionStorage.setItem("session_id", "12345");

// Извлечение данных из sessionStorage
let session_id = sessionStorage.getItem("session_id");

// Удаление данных из sessionStorage
sessionStorage.removeItem("session_id");

// Очистка всего sessionStorage
sessionStorage.clear();

Курсы по программированию

Помогаем получить новую профессию с гарантией трудоустройства!

Подробнее

Сравнение localStorage и sessionStorage

| Характеристика | localStorage | sessionStorage |
|———————|———————————-|————————————|
| Срок действия | Не истекает | Заканчивается после закрытия вкладки |
| Объем хранения | Ограничен (около 5-10 МБ) | Ограничен (около 5-10 МБ) |
| Доступность | Только для того же домена | Только для того же домена |
| Методы | setItem, getItem, removeItem, clear | setItem, getItem, removeItem, clear |

Теперь вы знаете разницу между localStorage и sessionStorage и как их использовать в своих веб-приложениях. Эти объекты являются отличным инструментом для хранения данных на клиентской стороне и могут быть полезными во многих сценариях разработки. Удачи в изучении веб-разработки! 🎉

Тест на профориентацию

За 10 минут узнайте, как ваш опыт пригодиться в IT индустрии

Подробнее