How to pass a value as a query string when the browser's back button click event occurs?

Question

How to pass a variable in query string format to the url to return when the browser back button is pressed? I am implementing it as an ejs file using javascript.

If you move from page A to page B, and return to the previous page by using the button that returns to page A from page B,

onclick='location.href=" A url/3" ' 

is used to pass a variable to implement the function I want.

However, I want to change location.href in the same format to have the same function when the browser back button is pressed instead of the button I made myself.

window.onpageshow = function(event) {
            if ( event.persisted || (window.Performance && window.PerformanceNavigation.type == 2)) {
                
            } else {
               
            }
      }

I tried using the code above, but when this code was applied in the script tag of page A.ejs, it was executed when accessing page A. I want to write the above code in page B.

I am very curious about how to detect the browser back button click event of page B in the script tag of page B.ejs and pass the value by modifying location.href.

I am thinking a lot about this. I need help.

---

+) A.ejs file html structure.

<div class = 'tab' id = 'tab-1'>
    <!-- View tab-1 -->
</div>

<div class = 'no tab' id = 'tab-2'>
    <!-- tab-2 view -->
</div>

<div class = 'no tab' id = 'tab-3'>
    <!-- Tab-3 View-->
</div>

<div class = 'no tab' id = 'tab-4'>
    <!-- View tab-4 -->
</div>

+) class 'tab' defines the size of the tab and class 'none' makes the tab invisible. When entering page A for the first time, tab-1 is displayed by default. The class of tab-1 is just 'tab', not 'no tab'.

The reason you want to pass the variable 3 back to page A is because I moved from tab 3 to page B. That is, since we want to send variable 3 from page B and go back to page A and get variable 3, therefore only the div tag corresponding to tab-3 is created with class = 'tab'.

+) The code below shows only certain tabs. This code is already implemented in my local area.

let tabs = document.getElementsByClassName('tab');
Let cur_no = <%= curNo %>; //<%= curNo %> is the variable sent by page B. (here 3)
        
if(!cur_no) cur_no = 0; //default

for(let i=0;i<tabs.length;i++) {
      tab[i].classList.add('none'); // Handle  tabs 1 ~ 4 invisible
}

tab[cur_no].classList.remove('none'); // Display only tab number 'cur_no'