Prevent duplicate instances in window.history
<p>I have a main page where you can load other pages into a container. 
When a page is loaded you're still on the main page but the browser URL should be set to the URL of the loaded page. 
When closing the loaded page, the URL should be reset to the url of main page.</p>

<p>I would like to solve this by simply using <code>history.replaceState</code> or <code>pushState</code>, and not having to go back in the browser history (because going back causes some browsers to refresh and messes up scrolling).</p>

<p>My current solution is </p>

<pre><code>clickLoadPage =&gt; (pageUrl) { 
    closeOtherLoadedPages();
    if (isOnMainPage())
        pushState(pageUrl)
    else
        replaceState(pageUrl)
 } 
clickUnloadPage =&gt; () {
    replaceState(mainpageUrl);
}
</code></pre>

<p><em>Note: It's designed to only have one page loaded at any time. 
Example: First load page1. Then load page2. Desired effect: page1 is closed, the url is replaced by page2. At that state, going Back in the browser would return to the main page url.</em></p>

<p>The problem is that every time you load a new page, and then close it, a new state with main page is added to window history. There should only be 1 of those states but I end up with several.</p>

<p>Is it possible to solve this some other way? I'm not that familiar with the <code>window.history</code> api, is it possible to do things like remove a state, or ensuring that no duplicates states are added?</p>