В этом руководстве вы узнаете, как использовать JavaScript sessionStorage
для хранения данных только одного сеанса.
Объект sessionStorage
хранит данные только для одного сеанса. Это означает, что данные, хранящиеся в sessionStorage
, будут удалены при закрытии браузера.
Сеанс страницы длится до тех пор, пока открыт веб-браузер, и сохраняется после обновления страницы.
Когда вы открываете страницу в новой вкладке или окне, веб-браузер создает новый сеанс.
Если вы открываете несколько вкладок или окон с одним и тем же URL-адресом, веб-браузер создает отдельное sessionStorage
для каждой вкладки или окна. Таким образом, данные, хранящиеся на одной вкладке веб-браузера, не могут быть доступны на другой вкладке.
Когда вы закрываете вкладку или окно, веб-браузер завершает сеанс, очищает данные в sessionStorage и
зависят от протокола страницы. Например, один и тот же сайт javascripttutorial.net
имеет разные sessionStorage
при доступе по http
и https
.
Поскольку данные привязаны к сеансу сервера, они доступны только тогда, когда страница запрашивается с сервера и недоступен, когда страница выполняется локально без сервера.
Поскольку sessionStorage
является экземпляром типа Storage
, вы можете управлять данными с помощью методов Storage:
setItem(name, value)
– установить значение для имениremoveItem(name)
— удалить пару «имя-значение», идентифицированную по имени.getItem(name)
— получить значение для заданного имени.key(index)
– получить имя значения в заданной числовой позиции.clear()
— удалить все значения вsessionStorage
.
Управление данными
1) Доступ к сеансовому хранилищу
Чтобы получить доступ к sessionStorage
, вы используете свойство объекта window
:
window.sessionStorage
Поскольку window
является глобальным объектом, вы можете просто получить доступ к sessionStorage
следующим образом:
sessionStorage
2) Хранение данных
Следующий код сохраняет пару имя-значение в sessionStorage
:
sessionStorage.setItem('mode','dark');
Если в sessionStorage
есть элемент с именем mode
, метод setItem()
обновит значение существующего элемента на dark
. В противном случае он вставит новый элемент.
3) Получение данных
Чтобы получить значение элемента по имени, вы используете метод getItem()
. Следующий пример получает значение элемента ‘ mode
‘:
const mode = sessionStorage.getItem('mode'); console.log(mode); // 'dark'
Если элемента с именем mode
нет, метод getItem()
вернет null
.
4) Удаление элемента по имени
Чтобы удалить элемент по имени, вы используете метод removeItem()
. Следующий код удаляет элемент с именем 'mode'
:
sessionStorage.removeItem('mode');
5) Перебор элементов
Чтобы перебрать все элементы, хранящиеся в sessionStorage
, необходимо выполнить следующие действия:
- Используйте
Object.keys()
, чтобы получить все ключи объектаsessionStorage
. - Используйте
for...of
для перебора ключей и получения элементов по ключам.
Следующий код иллюстрирует шаги:
let keys = Object.keys(sessionStorage); for(let key of keys) { console.log(`${key}: ${sessionStorage.getItem(key)}`); }
6) Удаление всех элементов
Данные, хранящиеся в sessionStorage
, автоматически удаляются при закрытии вкладки/окна веб-браузера.
Кроме того, вы можете использовать метод clear()
для программного удаления всех данных, хранящихся в sessionStorage
.
sessionStorage.clear();
Применение
sessionStorage
имеет множество практических применений. И следующие примечательные:
- Можно использовать для хранения состояния пользовательского интерфейса веб-приложения. Позже, когда пользователь вернется на страницу, вы можете восстановить пользовательский интерфейс, хранящийся в
sessionStorage
. sessionStorage
также можно использовать для передачи данных между страницами вместо использования скрытых полей ввода или параметров URL.
Приложение
Вы создадите простое веб-приложение, которое позволит пользователям выбирать режим — темный или светлый. По умолчанию у него есть светлый режим. И вы будете использовать для запоминания режима при обновлении страницы.
Если вы обновите страницу, выбранный вами режим восстановится, поскольку он хранится в sessionStorage
.
Однако, если вы закроете вкладку или окно, страница вернется в dark
режим, который является режимом по умолчанию.
1) Создание структуры папок проекта
Сначала создайте новую папку с именем session-storage
. В папке session-storage
создайте две подпапки: js
и css
, в которых будут храниться файлы JavaScript и CSS.
Во-вторых, создайте новый index.html
в папке sessionStorage
, файл app.js
в папке js
и файл style.css
в папке css
.
2) Создание HTML-страницы
Ниже показана страница index.html
:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript sessionStorage Demo</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <h1>JavaScript sessionStorage Demo</h1> <p>Click the button to switch to the dark/light mode.</p> <p>Refresh the page to check if the mode is saved.</p> <a id="theme-switcher" class="btn"></a> </div> <script src="js/app.js"></script> </body> </html>
В этом файле index.html
мы размещаем style.css
в разделе заголовка и app.js
в разделе тела.
На странице есть элементы. Самый важный из них — кнопка с id theme-switcher
.
3) Создание файла app.js
Во-первых, объявите две константы, которые будут использоваться в качестве метки кнопки:
const MOON = '🌙'; const SUN = '☀️';
Вы будете использовать SUN
как метку кнопки theme-switcher
тем в темном режиме и MOON
в светлом режиме.
Во-вторых, объявите три константы для темного, светлого и режима по умолчанию:
const DARK_MODE = 'dark'; const LIGHT_MODE = 'light'; const DEFAULT_MODE = DARK_MODE;
В-третьих, выберите переключатель theme-switcher
кнопки с помощью querySelector()
:
const btn = document.querySelector('#theme-switcher');
В-четвертых, определите новую функцию setMode()
для изменения режима:
function setMode(mode = DEFAULT_MODE) { if (mode === DARK_MODE) { btn.textContent = SUN; document.body.classList.add(DARK_MODE); } else if (mode === LIGHT_MODE) { btn.textContent = MOON; document.body.classList.remove(DARK_MODE); } }
В темном режиме setMode()
меняет кнопку на SUN
и добавляет класс DARK_MODE
к элементу body.
А в светлом режиме setMode()
изменяет метку кнопки на MOON
и удаляет класс DARK_MODE
из элемента body.
Ниже показан CSS светового режима. Цвет фона белый, а цвет текста черный:
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-size: 16px; background-color: #fff; color: #333; line-height: 1.7; transition: 0.2s ease-in-out; padding: 20px; }
В темном режиме цвет фона черный, а цвет текста белый:
.dark { background - color: black; color: #fff; }
Чтобы переключиться со светлого на темный режим, вы добавляете класс .dark к элементу body и наоборот.
В-пятых, определите функцию init()
, которая будет запускаться при загрузке страницы:
function init() { let storedMode = sessionStorage.getItem('mode'); if (!storedMode) { storedMode = DEFAULT_MODE; sessionStorage.setItem('mode', DEFAULT_MODE); } setMode(storedMode); }
В этой функции мы используем метод getItem()
для получения режима, хранящегося в sessionStorage
.
Если в sessionStorage
нет элемента mode
, функция init()
переключит страницу в режим по умолчанию, то есть в темный режим. В противном случае он устанавливает режим, хранящийся в sessionStorage
.
В-шестых, прикрепите обработчик события клика к кнопке theme-switcher
:
btn.addEventListener('click', function() { let mode = sessionStorage.getItem('mode'); if (mode) { let newMode = mode == DARK_MODE ? LIGHT_MODE: DARK_MODE; setMode(newMode); sessionStorage.setItem('mode', newMode); } });
Обработчик события click получает режим, сохраненный в sessionStorage.
Если элемент режима существует, он переключает режим. Другими словами, светлый режим становится темным и наоборот.
Затем он использует метод setItem()
для обновления элемента режима в sessionStorage
до нового.
Ниже показан полный файл app.js:
const MOON = '🌙'; const SUN = '☀️'; const DARK_MODE = 'dark'; const LIGHT_MODE = 'light'; const DEFAULT_MODE = DARK_MODE; const btn = document.querySelector('#theme-switcher'); init(); function init() { let storedMode = sessionStorage.getItem('mode'); if (!storedMode) { storedMode = DEFAULT_MODE; sessionStorage.setItem('mode', DEFAULT_MODE); } setMode(storedMode); } function setMode(mode = DEFAULT_MODE) { if (mode === DARK_MODE) { btn.textContent = SUN; document.body.classList.add(DARK_MODE); } else if (mode === LIGHT_MODE) { btn.textContent = MOON; document.body.classList.remove(DARK_MODE); } } btn.addEventListener('click', function() { let mode = sessionStorage.getItem('mode'); if (mode) { let newMode = mode == DARK_MODE ? LIGHT_MODE: DARK_MODE; setMode(newMode); sessionStorage.setItem('mode', newMode); } });
Вот последнее приложение.
- Во-первых, вы выбираете режим, например, легкий режим,
sessionStorage
сохранит его. - Затем вы обновляете страницу. Будет показан ранее выбранный режим.
Чтобы просмотреть данные, хранящиеся в хранилище сеансов, в веб-браузере, щелкните вкладку Приложение и выберите Хранилище сеансов:
Заключение
sessionStorage
позволяет хранить данные только для сеанса. Браузер удалит данные, когда вы закроете вкладку или окно браузера.sessionStorage
в Джаваскрипт является экземпляром типаStorage
, поэтому вы можете использовать методы типа Storage для управления данными вsessionStorage
.