Когда мы пользуемся веб-приложениями и посещаем различные веб-сайты, мы, вероятно, не задумываемся о том, как эти приложения сохраняют и хранят данные на нашем компьютере. В сущности, существует два основных механизма хранения данных в браузере, которые разработчики используют для создания более интерактивных и удобных веб-приложений: LocalStorage и SessionStorage.

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

Пример из жизни

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

LocalStorage

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

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

Сохранение данных в LocalStorage

Чтобы сохранить данные в LocalStorage, мы используем метод setItem(key, value), где key — это уникальный идентификатор для нашего значения, а value — собственно само значение, которое мы хотим сохранить. Давайте рассмотрим пример сохранения имени пользователя:

const username = "John";
localStorage.setItem("username", username);

Извлечение данных из LocalStorage

Чтобы извлечь данные из LocalStorage, мы используем метод getItem(key), передавая ему ключ, под которым данные были сохранены. Пример:

const savedUsername = localStorage.getItem("username");
console.log(savedUsername); // Выведет "John"

Удаление данных из LocalStorage

Если мы хотим удалить данные из LocalStorage, мы можем использовать метод removeItem(key), передавая ему ключ, который мы хотим удалить. Пример:

localStorage.removeItem("username");

Проверка наличия данных в LocalStorage

Иногда нам может понадобиться проверить, существуют ли данные с определенным ключом в LocalStorage.

if (localStorage.getItem("username")) {
  console.log("Данные существуют в LocalStorage");
} else {
  console.log("Данные отсутствуют в LocalStorage");
}

SessionStorage

Подумайте о SessionStorage как о временном хранилище во время посещения кафе. Когда вы приходите в кафе и садитесь за стол, вам выдают специальную корзину, в которую вы можете помещать свои личные вещи. Вы можете положить ключи от машины, кошелек и телефон в корзину и использовать их во время вашего пребывания в кафе. Как только вы уходите из кафе, корзина очищается и ваши вещи больше не доступны. Точно так же SessionStorage хранит данные только в течение текущей сессии и удаляет их, когда пользователь закрывает вкладку или браузер.

Сохранение данных в SessionStorage

Для сохранения данных в SessionStorage мы используем метод setItem(key, value), аналогичный тому, что мы использовали в LocalStorage. Пример:

const email = "example@example.com";
sessionStorage.setItem("email", email);

Извлечение данных из SessionStorage

Для извлечения данных из SessionStorage мы используем метод getItem(key), также аналогичный методу в LocalStorage. Пример:

const savedEmail = sessionStorage.getItem("email");
console.log(savedEmail); // Выведет "example@example.com"

Удаление данных из SessionStorage

Чтобы удалить данные из SessionStorage, мы можем использовать метод removeItem(key):

sessionStorage.removeItem("email");

Очистка SessionStorage

Если нам нужно полностью очистить SessionStorage, мы можем использовать метод clear():

sessionStorage.clear();

Этот код удалит все данные, хранящиеся в SessionStorage.

Что выбрать: LocalStorage или SessionStorage

Использование LocalStorage и SessionStorage зависит от требований и характеристик вашего приложения. Вот список ситуаций, когда рекомендуется использовать каждый из них:

LocalStorage

• Долгосрочное хранение данных: Используйте LocalStorage, если вам необходимо сохранить данные на длительное время, даже после закрытия вкладки или перезагрузки страницы. Например, сохранение пользовательских настроек, предпочтений или истории действий.
• Общие данные между вкладками: Если вам нужно обмениваться данными между различными вкладками в браузере, LocalStorage может быть полезным, поскольку он доступен для всех вкладок, открытых для конкретного домена.
• Хранение кэша или резервной копии: LocalStorage можно использовать для кэширования данных, чтобы ускорить загрузку или сохранить важные данные в случае возникновения сбоев.

SessionStorage

• Временные данные: Используйте SessionStorage, если вам нужно сохранять данные только на время текущей сессии пользователя. Например, временные состояния форм, выбранные элементы или промежуточные результаты.
• Безопасность и конфиденциальность: Если вам важно, чтобы данные были доступны только в рамках текущей сессии, SessionStorage подходит лучше. Поскольку данные в SessionStorage удаляются при закрытии вкладки или браузера, они могут быть более безопасными для хранения конфиденциальных или временных данных.
• Ограничение доступа к данным: Если вам необходимо, чтобы данные были доступны только на определенной странице или в контексте текущей сессии, SessionStorage может помочь ограничить доступ к этим данным.