Клиент: Хранение информации в SessionStorage

SessionStorage — это объект веб-хранилища, доступный в браузере, который позволяет хранить данные в рамках сессии. Это значит, что информация будет сохраняться при перезагрузке страницы, но будет очищена, как только пользователь закроет вкладку или браузер.

SessionStorage очень похож на LocalStorage: он также предоставляет объект в браузере для хранения данных. SessionStorage и localStorage являются частью концепции веб-хранилища и предоставляют возможности для хранения данных на клиенте.

Также как и localStorage, sessionStorage предоставляет следующие методы::

• setItem( key, value ):
  Добавляет пару ключ-значение в sessionStorage. Если ключ уже существует, его значение обновляется.

• getItem( key ):
  Возвращает значение по ключу. Возвращает null, если ключ не существует.

• removeItem( key ):
  Удаляет пару ключ-значение по указанному ключу.

• clear():
  Удаляет все пары ключ-значение из sessionStorage.

• key( index ):
  Возвращает имя ключа по индексу.

• length:
  Свойство, показывающее количество элементов, хранящихся в sessionStorage.

// Добавляем значение в sessionStorage
sessionStorage.setItem( 'name', 'Developer' );

// Читаем значение из sessionStorage
var name = sessionStorage.getItem( 'name' );
console.log( name );  
// Выведет: "Developer"

// Удаляем значение из sessionStorage
sessionStorage.removeItem( 'name' );

// Чистим все sessionStorage
sessionStorage.clear();

SessionStorage обычно используется для хранения данных о текущей сессии. Это может включать в себя информацию о том, вошел ли пользователь в систему, какие товары он добавил в корзину покупок, и другую информацию, связанную с текущим сеансом пользователя.

Проверка существования значения по ключу:

if( sessionStorage.getItem( 'myKey' ) === null )
{
	console.log( 'Значение с ключом "myKey" не существует' );
} 
else 
{
	console.log( 'Значение с ключом "myKey" существует' );
}

Проверка существования по значению:

var exists = false;
for( var i = 0; i < sessionStorage.length; i++ )
{
	var key = sessionStorage.key(i);
	if( sessionStorage.getItem( key ) === 'myValue' )
	{
    	exists = true;
    	break;
	}
}
console.log( exists ? 'Значение "myValue" существует' : 'Значение "myValue" не существует' );

Пример использования length и key(index) в sessionStorage:

// Добавляем некоторые значения в sessionStorage
sessionStorage.setItem('key1', 'value1');
sessionStorage.setItem('key2', 'value2');
sessionStorage.setItem('key3', 'value3');

// Получаем количество ключей в sessionStorage
var numberOfKeys = sessionStorage.length;
console.log( numberOfKeys ); 
// Выведет: 3

// Получаем и выводим все ключи и их значения
for( var i = 0; i < sessionStorage.length; i++ )
{
	var key = sessionStorage.key(i);
	var value = sessionStorage.getItem(key);
	console.log(key + " " + value);
}

Порядок ключей в sessionStorage, как и в localStorage, не гарантирован и может варьироваться в зависимости от браузера и его версии.

Ещё одно важное отличие между localStorage и sessionStorage

Когда вы используете localStorage, данные доступны на всех вкладках и окнах в одном и том же домене. Но когда вы используете sessionStorage, каждая вкладка и окно имеют свой собственный набор данных. Это означает, что если вы устанавливаете значения в sessionStorage в одной вкладке, эти значения не будут доступны на других вкладках или окнах в том же домене.

Это делает sessionStorage идеальным для случаев, когда вы хотите хранить данные, которые строго привязаны к определенной сессии и не должны быть доступны где-либо ещё.

В качестве примера давайте предположим, что вы хотите хранить временные данные о состоянии игры. Если игрок открывает игру в новой вкладке, вы, вероятно, захотите начать с чистого листа, а не использовать состояние игры из другой вкладки. В этом случае sessionStorage будет более подходящим вариантом.

Однако, как и с любыми данными на стороне клиента, нужно помнить о вопросах безопасности. И localStorage, и sessionStorage должны использоваться только для хранения данных, которые безопасны для раскрытия. Они не предназначены для хранения конфиденциальной информации, такой как учетные данные пользователя.