Хранилище данных sessionStorage в JavaScript — практическое руководство

В этом руководстве вы узнаете, как использовать 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>
 
 

На странице есть элементы. Самый важный из них — кнопка с 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);
    }
});

Вот последнее приложение.

1. Во-первых, вы выбираете режим, например, легкий режим, sessionStorage сохранит его.
2. Затем вы обновляете страницу. Будет показан ранее выбранный режим.

Чтобы просмотреть данные, хранящиеся в хранилище сеансов, в веб-браузере, щелкните вкладку Приложение и выберите Хранилище сеансов:

Заключение

• sessionStorage позволяет хранить данные только для сеанса. Браузер удалит данные, когда вы закроете вкладку или окно браузера.
• sessionStorage в Джаваскрипт является экземпляром типа Storage, поэтому вы можете использовать методы типа Storage для управления данными в sessionStorage.