JavaScript свойство Window.sessionStorage

Определение и применение

JavaScript свойство sessionStorage объекта Window возвращает ссылку на объект хранения данных сеанса (объект Storage), которые могут быть доступны только создавшему его источнику до того момента пока сеанс страницы не закончился.

Интерфейс Storage, принадлежащий API веб-хранилища предоставляет доступ к локальному объекту хранения (localStorage), или объекту хранения текущего сеанса (sessionStorage) для определенного домена (создавшего объект хранения источника):

• sessionStorage - поддерживает отдельную область хранения для каждого заданного источника, доступную на время сеанса страницы (пока существует сеанс вкладки, включая перезагрузку и восстановление страницы).
• localStorage - делает то же самое, но сохраняется даже при закрытии и повторном открытии браузера.

Эти механизмы доступны через свойства объекта Window sessionStorage и localStorage (точнее говоря, в браузерах объект Window реализует объекты WindowLocalStorage и WindowSessionStorage, которые содержат свойства localStorage и sessionStorage). Вызов одного из этих свойств создаст экземпляр объекта Storage, с помощью которого можно устанавливать, извлекать и удалять элементы данных из хранилища. Более подробное описание этого объекта вы можете получить перейдя в раздел Storage.

Для localStorage и sessionStorage для каждого источника (сочетания схемы, хоста и порта) используется отдельный объект хранения — они функционируют и управляются отдельно друг от друга.

Поддержка браузерами

Спецификация: multipage

✓Поддерживается во всех основных браузерах с 2015 года.

Показать браузеры

ВсеКомпьютерыМобильные

Совместимостьapi.Window.sessionStorage

Возможность	Компьютеры					Мобильные
	ChromeChrome	EdgeEdge	FirefoxFirefox	OperaOpera	SafariSafari	Chrome AndroidChromeAndroid	Firefox for AndroidFirefoxAndroid	Opera AndroidOperaAndroid	Safari on iOSSafariiOS	Samsung BrowserSamsungAndroid	WebView AndroidWebViewAndroid	WebView on iOSWebViewiOS
sessionStorage	✓4	✓12	✓2	✓10.5	✓4	✓18	✓4	✓11	✓3.2	✓1.0	✓4.4	✓3.2

✓поддерживается◐с ограниченияминет поддержки?нет данных≤31 — не позднее версии 31

JavaScript синтаксис

const mySessionStorage = window.sessionStorage;

Спецификация

HTML Standard.

Исключения

Примеры использования

В следующем примере мы рассмотрим, как восстановить значение элемента после перезагрузки страницы:

<!DOCTYPE html>
<html lang="ru">
<head><meta charset="utf-8"><title>Черновик на время сессии</title></head>
<body>
  <label for="my-text-area">Черновик</label>
  <textarea id="my-text-area" rows="5" cols="30"></textarea>
  <p id="status" role="status"></p>
  <script>
    const myTextArea = document.getElementById('my-text-area');
    const status = document.getElementById('status');
    try {
      const saved = sessionStorage.getItem('autosave');
      if (saved !== null) myTextArea.value = saved;
    } catch (error) {
      status.textContent = 'Не удалось прочитать черновик: ' + error.name;
    }
    myTextArea.addEventListener('input', () => {
      try {
        sessionStorage.setItem('autosave', myTextArea.value);
        status.textContent = 'Черновик сохранён';
      } catch (error) {
        status.textContent = 'Не удалось сохранить черновик: ' + error.name;
      }
    });
  </script>
</body>
</html>

В этом примере мы инициализируем переменную, которая содержит ссылку на элемент с определенным глобальным атрибутом id. После этого с использованием свойства sessionStorage объекта Window и метода getItem() определяем имеется ли значение по ключу autosave в хранилище сессии. Если это значение было установлено ранее, то устанавливаем текстовой области (элемент <textarea>) значение, которое соответствует значению ключа autosave в хранилище сессии.

Событие input срабатывает при пользовательском изменении текста, включая вставку мышью. Обработчик сохраняет значение через setItem() и показывает результат. Ошибки перехватываются и при записи, и при первоначальном чтении: доступ к хранилищу тоже может быть запрещён.

Результат нашего примера:

В следующем примере мы рассмотрим совместное использование методов setItem(), key() и свойства length объекта Storage.

<button>Show keys</button><span id="info"></span>

function showKeys() {
    let info = document.getElementById('info')

    for (let i = 0; i < 5; i++) {
        let key = 'demo_key_' + i
        let val = i
        try {
            sessionStorage.setItem(key, val)
        } catch (error) {
            info.innerHTML = 'Произошла ошибка ' + error.message
        }
    }

    for (let i = 0; i < sessionStorage.length; i++) {
        let currentKeyValue = sessionStorage.key(i)
        info.innerHTML += '<p>Ключ под индексом ' + i + ' равен <b>' + currentKeyValue + '</b></p>'
    }
}

document.querySelector('button').addEventListener('click', function () {
    showKeys()
})

В этом примере с использованием метода addEventListener() при нажатии на кнопку (HTML элемент <button>) вызываем функцию, которая:

• Инициализирует переменную, которая содержит ссылку на элемент с определенным глобальным атрибутом id.
• С использованием цикла и метода setItem() добавляем пять ключей и значений в хранилище сессии (sessionStorage). Обратите внимание, что мы используем конструкцию try...catch, если по каким-то причинам произойдет ошибка, то мы её перехватим, а информацию о ней добавим в качестве нового текстового содержимого элемента <span>.
• После этого с помощью цикла и свойства length объекта Storage мы проходим по всем элементам хранилища сессии и с помощью метода key() выводим все их имена путем добавления содержимого элементу <span> на каждой итерации цикла.

Результат нашего примера: