Объект sessionStorage подобен объекту localStorage за исключением того, что он хранит данные только для одной сессии. Данные удаляются, когда пользователь закрывает определенную вкладку браузера.
Как и localStorage, sessionStorage хранит данные в виде пар ключ/значение и все данные хранятся в виде строки. Методы также одинаковы.
Добавить данные в сессионное хранилище можно следующим способом:
sessionStorage.setItem("testsession", "тестовые данные");
Добавить JSON-объект в хранилище:
var testObject = { 'one': 1, 'two': 2, 'three': 3 };
sessionStorage.setItem('testObject', JSON.stringify(testObject));
Удалить данные из хранилища:
sessionStorage.removeItem("testsession");
sessionStorage.clear(); // полностью очистит хранилище
Считать данные из хранилища:
console.log(sessionStorage.getItem("testsession"));
Распарсить JSON данные из хранилища:
var retrievedObject = sessionStorage.getItem('testObject');
console.log(JSON.stringify(retrievedObject));
Посмотреть и отредактировать sessionStorage в браузере можно с помощью панели инструментов разработчика (F12 в Chrome) во вкладке "Application":
Вызовы API веб-хранилищ являются синхронными, поэтому они могут повлиять на визуализацию пользовательского интерфейса. Используйте Web Storage API для хранения и извлечения минимального объема данных.
API веб-хранилища очень легко использовать для хранения и извлечения данных в браузерах пользователей, т.к. все современные браузеры поддерживают Web Storage API.