What are possible cases making window.history.stat

Question

I have my website's query string URL like:

?budget=0-&year=0-&kms=0-&so=-1&sc=-1&pn=1

When user go to next page (From page 1 to page 2):

1. We explicity increment pn (page number by 1) and set it in query string URL.

   Changed query string:

   ?budget=0-&year=0-&kms=0-&so=-1&sc=-1&pn=2
   

   I also store the old query string, it looks like:

   ?budget=0-&year=0-&kms=0-&so=-1&sc=-1&pn=1
   

2. I then push both to window history to change URL and save previous for browser back:

   window.history.pushState(oldQS, null, newQS);
   

3. After doing this, when I am on page2, I check window.history.state. It stores my previous state:

   ?budget=0-&year=0-&kms=0-&so=-1&sc=-1&pn=1
   

4. I press browser back from page2 to get back to page1. I put a breakpoint on:

   $(window).on('popstate', function(e) {
       console.log(e.originalEvent.state)
   });
   

   e.originalEvent.state is null.

Observations:

• The window.history.state is not null and stores correct value when I am on page2.
• It gets null value when I click browser back.

What I have done so far:

(Has not worked.)

• put breakpoint on hashchange event but didn't help as there's no # in the URL.

• put breakpoint on every window.history function on my Javascript code like pushState(), replaceState() but none of it is getting hit when I press browser back.

I don't know what all other places/function to look at which might be changing window.history.state to null.

How can I figure out how and where did it become null by clicking browser back?

Answer 1

You asked:

I don't know what all other places/function to look at which might be changing window.history.state to null.

How can I figure out how and where did it become null by clicking browser back?

Let's read the W3C HTML5 specification:

5.5.2 The History interface

...

The state attribute of the History interface must return the last value it was set to by the user agent. Initially, its value must be null.

Conclusion: when the document loaded, the history.state is initially null.

5.6.10 History traversal

When a user agent is required to traverse the history to a specified entry, [...], the user agent must act as follows.

...

10. If the entry is a state object entry, let state be a structured clone of that state object. Otherwise, let state be null.

...

12. Let state changed be true if the Document of the specified entry has a latest entry, and that entry is not the specified entry; otherwise let it be false.

...

14. 1. If state changed is true, fire a trusted event with the name popstate at the Window object of the Document, using the PopStateEvent interface, with the state attribute initialized to the value of state. [...]

Conclusion: when navigating back to the state when the document was loaded, the state triggered with the popstate event is null.