Toni_Dev 
15.07.2023 
0 
1 078 Когда мы пользуемся веб-приложениями и посещаем различные веб-сайты, мы, вероятно, не задумываемся о том, как эти приложения сохраняют и хранят данные на нашем компьютере. В сущности, существует два основных механизма хранения данных в браузере, которые разработчики используют для создания более интерактивных и удобных веб-приложений: 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 может помочь ограничить доступ к этим данным.
