How to bookmark <div> visibility in browser?

Question

I'm developing a Webpage at the Moment (one single index.html). I got a navbar at the top which contains links to hash refrences (IDs of DIVs). If the user allows JavaScript the links in the navbar are used to execute a Javascript function with the onclick Attribute. Links are suppresed then. The Javascript function disables following the link to the hash reference and hides all divs except the selected one.

What to do to store the state of the page (which divs are hidden and which are visible) in the bookmark when user adds a bookmark to his browser? How to add browser history with the same meaning?

Answer 1

You can use search params to keep track of the page state. Then in your javascript on page load read the search params and reconstruct the page structure to match the params in the url.