How to remember class active on page reload

I'm new, please tell me if it's possible to do this: there are navigation tabs on the page, I want the selected tabs to be active when the page is reloaded. So that the class="nav-link active" is remembered before reloading the page and automatically applied after reloading.

P.s. while compiling the question, I came across sessionStorage, judging by the description, this is exactly what I need, explain to me, please, how can I apply this to my example?

    <nav>
       <div class="nav nav-tabs justify-content-center" role="tablist">
{% for region in regions %} 
            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#region-{{ department.id }}" type="button" role="tab" aria-controls="region-{{ department.id }}">{{ department.department_name }}</button>
{% endfor %}
       </div>
    </nav>
    <div class="tab-content">
{% for region in regions %} 
        <div class="tab-pane fade" id="region-{{ department.id }}" role="tabpanel"></div>
{% endfor %}
    </div>

I try like this, but only one value is saved and does not change when clicking on other tabs:

$(function($){
    var storage = sessionStorage.getItem('nav-tabs');
	if (storage && storage !== "#") {
		$('.nav-tabs button[data-bs-target="' + storage + '"]').tab('show');
	}

	$('div.nav').on('click', function() {
		var id = $(this).find('button').attr('data-bs-target');
		sessionStorage.setItem('nav-tabs', id);
	});
});

I found!
To my example:

$(function($){
    var storage = sessionStorage.getItem('nav-tabs');
	if (storage && storage !== "#") {
		$('.nav-tabs button[data-bs-target="' + storage + '"]').tab('show');
	}

	$('div.nav').on('click', function() {
	    sessionStorage.clear();
		var id = $(this).find('button.active').attr('data-bs-target');
		sessionStorage.setItem('nav-tabs', id);
	});
});