Single Page Application (SPA) is very popular recently. However, the semantics of URL is sometime lost. For example, when we try to bookmark an interesting page in SPA, we indeed can only bookmark the landing page.

The pushState and replaceState methods in HTML5 History API can be used to solve partially this issue mentioned above. These methods are well explained in Mozilla Developer Network (MDN).

MDN says “history.replaceState() operates exactly like history.pushState() except that replaceState() modifies the current history entry instead of creating a new one.” as of 11/19/2016.

I just want to point out replaceState() modifies (and, in fact, replaces) the current history entry in my experience.

To learn how to use History API, I recommend these resources as the start:

  1. https://developer.mozilla.org/en-US/docs/Web/API/History_API
  2. https://css-tricks.com/using-the-html5-history-api/ by Robin Rendle, CSS-Tricks