我似乎无法弄清楚如何操纵浏览器历史记录

Question

So what I am trying to do is change data based on the navigation of a user. I have 6 main category pages. From those 6 main category pages, I have 12 sub categories that the user can select.

What I am trying to achieve:

Let's say the user selects category one.

• The user selects sub-category 1 from category 1.
• The sub-category page is shown and removes the data not related to category 1.
• The user selects sub-category 2 from sub-category 1 and removes the data not related to category 1.
• The user selects sub-category 3 from sub-category 2 and removes the data not related to category 1.

So I can do the category one to sub-category 1 but how would I do it for lets says sub-category 1 to 2 and from 2 to 3...n times....? Each sub-category has to know which main category was last selected.

I have looked at but can't seem to find a solution.

window.location.hash
history.pushState("","","");
document.referrer

Typically this is a bad design and I understand that but I am limited to what I can do on the server side. So trying to develop a work around....

Answer 1

After trying to work with these and not getting the desired behavior, I was able to find the best solution through several hours of research. The only alternative I could find for passing around data on the client side between pages.

window.location.hash
history.pushState("","","");
document.referrer

So lets say the user navigates to category1

You would set a session storage object

sessionStorage.setItem('last-category', "category1");

The user navigates sub-category 1. You can use this to get the session storage of an object and will show the last set operation for that object.

sessionStorage.getItem("last-category"); -> output category1

The user navigates sub-category 2

sessionStorage.getItem("last-category"); -> output category1

The user navigates to category 2 You would set the session storage object again to show category2

sessionStorage.setItem('last-category', "category2");

The user navigates to sub-category 1

sessionStorage.getItem("last-category"); -> output category2