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 для каждого домена используется отдельный объект хранения — они функционируют и управляются отдельно друг от друга.

Обращаю Ваше внимание, что объем веб-хранилища ограничен размером, и может составлять от 5 до 10 мегабайт, в зависимости от производителя браузера. Это значительно больший объем места на диске в сравнении с cookie, которому доступно всего 4 Кбайта.

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

Свойство	Chrome	Firefox	Opera	Safari	IExplorer	Edge
`sessionStorage`	Да	Да	Да	Да	Да	Да

JavaScript синтаксис:

let mySessionStorage = window.sessionStorage;

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

HTML Living Standard

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

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

<!DOCTYPE html>
<html>
	<head>
		<title>Пример сохранения значения элемента на время сессии браузера</title>
	</head>
	<body>
		<textarea id = "my-text-area" cols = "30" rows = "10"></textarea>
		<script>
	const myTextArea = document.getElementById("my-text-area"); // инициализируем переменную, которая содержит ссылку на элемент с определенным id

	if (sessionStorage.getItem("autosave")) { // определяем имеется ли значение по ключу autosave в хранилище сессии
	  myTextArea.value = sessionStorage.getItem("autosave"); // устанавливаем текстовой области значение, которое соответствует значению ключа autosave в хранилище сессиии
	}

	myTextArea.addEventListener("keyup", function() { // добавляем обработчик события, который срабатывает после того, как нажатая клавиша была отпущена на текстовой области
	  try { // пытаемся выполнить код
	    sessionStorage.setItem("autosave", myTextArea.value); // добавляем ключ со значением нашей текстовой области
	  } catch(error) {  { // перехватываем и обрабатываем ошибку
	    // error logic
	  }
	});
		</script>
	</body>
</html>

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

Кроме того, с использованием метода addEventListener() мы зарегистрировали обработчик события "keyup", который срабатывает после того, как нажатая клавиша была отпущена на текстовой области и с помощью метода setItem() добавляет ключ со значением нашей текстовой области в хранилище сессии (sessionStorage). Обратите внимание, что мы используем конструкцию try...catch, если по каким-то причинам произойдет ошибка, то мы её перехватим. Для проверки работоспособности вы можете ввести произвольное значение в текстовую область и перезагрузить страницу.

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

Пример сохранения значения поля на время сессии браузера

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование методов key() и setItem() объекта Storage</title>
	</head>
	<body>
		<button onclick = "showKeys()">Show keys</button> <!-- добавляем атрибут событий onclick -->
		<span id = "info"></span>
		<script>
	function showKeys() {
	  const info = document.getElementById("info"); // производим поиск элемента по id и инициализируем переменную

	  for(let i = 0; i < 5; i ++) { // создаем цикл с пятью итерациями
	    let key = "demo_key_" + i; // инициализируем строковую переменную
	    let val = i; // инициализируем переменную со значением 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>"; // добавляем содержимое элементу
	  }
	}
		</script>
	</body>
</html>

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

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

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

Пример использования методов key() и setItem() объекта Storage

JavaScript Window