Введение
При работе с веб-приложениями вы можете хранить данные локально в браузере пользователя с помощью функции веб-хранилища HTML5.
Веб-хранилище позволяет разработчикам хранить данные, такие как пользовательские настройки, информацию о сеансе и т. д., локально в браузере пользователя. Это улучшает взаимодействие с пользователем и снижает необходимость многократного получения данных с сервера.
Сохраненные данные остаются в браузере и не могут быть перенесены куда-либо еще. Вы можете получить доступ к этим данным и манипулировать ими, чтобы улучшить свои веб-приложения и сделать работу пользователей более удобной.
Веб-хранилище имеет два основных типа: локальное хранилище и хранилище сеансов. В этом сообщении блога вы узнаете о локальном хранилище и хранилище сеансов в JavaScript.
Что такое локальное хранилище и хранилище сеансов?
Локальное хранилище и хранилище сеансов — это типы веб-хранилищ, предоставляемые современными веб-браузерами для хранения данных в браузере пользователя. Оба они позволяют хранить данные в виде пар ключ-значение, которые остаются в браузере даже после того, как пользователь закрывает вкладку браузера или весь сеанс браузера.
Теперь вам может быть интересно, что оба варианта хранения позволяют хранить данные, но что отличает их друг от друга?
Итак, давайте узнаем о локальном хранилище и хранилище сеансов по отдельности, чтобы лучше понять каждое из них.
Локальное хранилище
Локальное хранилище — это вариант веб-хранилища, который позволяет хранить данные в парах «ключ-значение» в веб-браузере без ограничения срока действия. Это означает, что данные, хранящиеся в локальном хранилище, сохраняются в браузере даже после того, как пользователь закрывает вкладку браузера, завершает весь сеанс браузера или уходит со страницы.
Для работы с локальным хранилищем вы можете использовать объект localStorage в JavaScript. Вот как вы можете хранить, получать доступ и удалять данные с помощью локального хранилища:
Сохранение элемента данных
Синтаксис:
localStorage.setItem(key, value);
Здесь «ключ» — это имя или идентификатор элемента данных, который вы хотите сохранить, а «значение» — это значение для этого указанного ключа.
Пример:
// Storing data item in Local Storage
localStorage.setItem('firstName', 'Johan');
localStorage.setItem('lastName', 'Fortner');
localStorage.setItem('email', '[email protected]');
Доступ к элементу данных
Синтаксис:
localStorage.getItem(key);
Пример:
// Accessing data item from Local Storage
const firstName = localStorage.getItem('firstName');
const lastName = localStorage.getItem('lastName');
const email= localStorage.getItem('email');
console.log(firstName); // Output: Johan
console.log(lastName); // Output: Fortner
console.log(email); // Output: [email protected]
Удаление элемента данных
Синтаксис:
localStorage.removeItem(key);
Пример:
// Removing data item from Local Storage
localStorage.removeItem('lastName');
Удаление всех элементов локального хранилища
localStorage.clear();
Хранилище сеансов
Хранилище сеансов похоже на локальное хранилище, но оно хранит данные только на время сеанса страницы. Это означает, что когда пользователь закрывает вкладку или браузер, данные, хранящиеся в хранилище сеансов, будут удалены.
Для работы с хранилищем сеансов вы можете использовать объект sessionStorage в JavaScript. Вот как вы можете хранить, получать доступ и удалять данные с помощью хранилища сеансов:
Сохранение элемента данных
Синтаксис:
sessionStorage.setItem(key, value);
Здесь «ключ» — это имя или идентификатор элемента данных, который вы хотите сохранить, а «значение» — это значение для этого указанного ключа.
Пример:
// Storing data item in Session Storage
sessionStorage.setItem('firstName', 'Johan');
sessionStorage.setItem('lastName', 'Fortner');
sessionStorage.setItem('email', '[email protected]');
Доступ к элементу данных
Синтаксис:
sessionStorage.getItem(key);
Пример:
// Accessing data item from Session Storage
const firstName = sessionStorage.getItem('firstName');
const lastName = sessionStorage.getItem('lastName');
const email= sessionStorage.getItem('email');
console.log(firstName); // Output: Johan
console.log(lastName); // Output: Fortner
console.log(email); // Output: [email protected]
Удаление элемента данных
Синтаксис:
sessionStorage.removeItem(key);
Пример:
// Removing data item from Session Storage
sessionStorage.removeItem('lastName');
Удаление всех элементов хранилища сеанса
sessionStorage.clear();
Проверка поддержки браузером локального и сеансового хранилища
Вот как вы можете проверить поддержку браузером локального и сеансового хранилища.
// Check for localStorage browser support
const localStorageSupported = typeof localStorage !== 'undefined';
// Check for sessionStorage browser support
const sessionStorageSupported = typeof sessionStorage !== 'undefined';
console.log(`localStorage supported: ${localStorageSupported}`);
console.log(`sessionStorage supported: ${sessionStorageSupported}`);
Здесь localStorageSupported проверяет тип localStorage, и если тип localStorage не равен «неопределенному», то значение этой переменной будет установлено на true, что означает, что браузер поддерживает локальное хранилище. В противном случае ему присваивается значение false, что означает, что браузер не поддерживает локальное хранилище.
sessionStorageSupported проверяет тип sessionStorage, и если тип sessionStorage не равен «неопределенному», то значение этой переменной будет установлено на true, что означает, что браузер поддерживает хранение сеансов. В противном случае ему присваивается значение false, что означает, что браузер не поддерживает хранение сеансов.
Различия между локальным хранилищем и сеансовым хранилищем
Вот ключевые различия между локальным хранилищем и хранилищем сеансов.
- Срок жизни данных. Данные, хранящиеся в локальном хранилище, сохраняются в браузере даже после того, как пользователь закрывает вкладку браузера, завершает весь сеанс браузера или уходит со страницы. Это похоже на долговременную память.
Данные, хранящиеся в хранилище сеанса, будут потеряны, когда пользователь закроет вкладку или браузер. Это похоже на кратковременную память. - Емкость хранилища. Емкость локального хранилища может варьироваться от 5 до 10 МБ на домен в зависимости от браузера.
Сессионное хранилище также обеспечивает аналогичную емкость, но обычно этого достаточно для временных нужд. - Область: данные, хранящиеся в локальном хранилище на одной вкладке или в одном окне, доступны сценариям, запущенным на других вкладках или окнах того же исходного домена.
Данные, хранящиеся в хранилище сеансов на одной вкладке, недоступны. к сценариям, работающим в других вкладках или окнах, даже если они принадлежат тому же домену. - Случаи использования: локальное хранилище используется для хранения таких данных, как пользовательские настройки, кэшированные данные, запоминание данных для входа в систему и т. д.
сеансовое хранилище используется для хранения таких данных, как ход выполнения многостраничных форм, корзина покупок, состояния игры и т. д.
Заключение
В заключение, веб-хранилище — это ценная функция, которая позволяет разработчикам хранить данные локально в браузере пользователя.
Существует два основных типа веб-хранилищ: локальное хранилище и сеансовое хранилище. Локальное хранилище хранит данные без ограничения срока действия, что делает их постоянными даже после того, как пользователь закроет браузер или уйдет со страницы. С другой стороны, хранилище сеансов ограничено продолжительностью сеанса страницы и удаляет все данные, когда пользователь закрывает вкладку или браузер.
С обоими вариантами хранения легко работать с помощью JavaScript, что позволяет хранить, получать доступ и удалять данные в парах ключ-значение.
При использовании этих вариантов хранения важно проверить поддержку браузера, чтобы обеспечить единообразную работу вашего веб-приложения в разных браузерах.
Понимая ключевые различия между локальным хранилищем и сеансовым хранилищем, вы можете выбрать подходящий вариант, отвечающий вашим конкретным сценариям использования и улучшающий взаимодействие с пользователем.
Спасибо за прочтение!
Чтобы увидеть больше подобного контента, нажмите здесь.
Продолжайте кодировать!
Спасибо, что дочитали до конца. Пожалуйста, подумайте о том, чтобы подписаться на автора и эту публикацию. Посетите Stackademic, чтобы узнать больше о том, как мы демократизируем бесплатное образование в области программирования во всем мире.
