Запоминать посещенную категорию на сайте

[Igorsrt]

Здравствуйте.
На сайте есть некий каталог с категориями товаров и есть меню с этими самыми категориями.
Когда пользователь заходит в какой-нибудь товар, родительская категория появляется в развернутом виде, т.е. добавляется css класс catalog-nav__item_active.
Это хорошо, но на сайте есть также другие страницы (Новости, Контакты и т.п.). Стоит задача: если пользователь переходит на эти страницы со страницы каталога, то категория каталога в меню должна оставаться открытой (т.е. с классом catalog-nav__item_active).
Насколько я понимаю, подобное можно сделать через куки - id последней активной категории записывается в переменную и затем ему присваевается класс на любых страницах. Но дальше теории дело не пошло. Прошу помощи.

<ul class="catalog-nav__list">
	<li id="cat1" class="catalog-nav__item catalog-nav__item_active">
		<span class="catalog-nav__link js-nav-catalog-button wall">Категория 1</span>
		<ul class="catalog-nav__subnav">
			<li class="catalog-nav__subnav-item first level1">
				<a class="catalog-nav__subnav-link" href="#">Страница 1-1</a>
			</li>
			<li class="catalog-nav__subnav-item level1">
				<a class="catalog-nav__subnav-link" href="#">Страница 1-2</a>
			</li>
			<li class="catalog-nav__subnav-item level1">
				<a class="catalog-nav__subnav-link" href="#">Страница 1-3</a>
			</li>
			<li class="catalog-nav__subnav-item level1">
				<a class="catalog-nav__subnav-link" href="#">Страница 1-4</a>
			</li>
		</ul>
	</li>
	<li id="cat2" class="catalog-nav__item">
		<span class="catalog-nav__link js-nav-catalog-button wall">Категория 2</span>
		<ul class="catalog-nav__subnav">
			<li class="catalog-nav__subnav-item first level1">
				<a class="catalog-nav__subnav-link" href="#">Страница 2-1</a>
			</li>
			<li class="catalog-nav__subnav-item level1">
				<a class="catalog-nav__subnav-link" href="#">Страница 2-2</a>
			</li>
			<li class="catalog-nav__subnav-item level1">
				<a class="catalog-nav__subnav-link" href="#">Страница 2-3</a>
			</li>
			<li class="catalog-nav__subnav-item level1">
				<a class="catalog-nav__subnav-link" href="#">Страница 2-4</a>
			</li>
		</ul>
	</li>
	<li id="cat3" class="catalog-nav__item">
		<span class="catalog-nav__link js-nav-catalog-button wall">Категория 3</span>
		<ul class="catalog-nav__subnav">
			<li class="catalog-nav__subnav-item first level1">
				<a class="catalog-nav__subnav-link" href="#">Страница 3-1</a>
			</li>
			<li class="catalog-nav__subnav-item level1">
				<a class="catalog-nav__subnav-link" href="#">Страница 3-2</a>
			</li>
			<li class="catalog-nav__subnav-item level1">
				<a class="catalog-nav__subnav-link" href="#">Страница 3-3</a>
			</li>
			<li class="catalog-nav__subnav-item level1">
				<a class="catalog-nav__subnav-link" href="#">Страница 3-4</a>
			</li>
		</ul>
	</li>	
</ul>

[ksa]

подобное можно сделать через куки

Есть и более современные средства в браузерах...
https://learn.javascript.ru/localstorage

[Igorsrt]

Есть и более современные средства в браузерах...
https://learn.javascript.ru/localstorage

Да, вроде что-то получилось, спасибо. Хотя не уверен, что этот код достаточно хорош.

$(document).ready(function(){
if (document.querySelector('.catalog-nav__item_active') != null) {	
  let firstBlock = document.querySelector( ".catalog-nav__item_active" );
  var myid = firstBlock.id;
  sessionStorage.setItem('myid', myid);
} 
else if(window.location.pathname=='/'){ sessionStorage.removeItem('myid'); }
else {
  var myid = sessionStorage.getItem('myid');
  if (document.getElementById(myid)) {
  	var element = document.getElementById(myid);
  	element.classList.add("catalog-nav__item_active", "current");
  }
}
});

[ksa]

Хотя не уверен, что этот код достаточно хорош

Главное принцип понять сего действа...
А сами строки могут иметь довольно сложную структуру данных. Например можно сложный объект или массив перевести в json и сохранить.
Потом прочитать, преобразовать в данные и уже с ними работать дальше...