HTML5 History API and the history object
Browsers use a similar stack called the history
stack. In JavaScript, you can access it through the history
object, for which there are several methods available. The history object is part of the window object and is accessed through the window.history
property. It has been around for years.
Normally, when the user navigates to a new page, the browser pushes the new URL on to its history stack and downloads and draws the new page. When the user presses the back button, the browser pops one page off its history stack and redraws the previous page.
But what if we use Ajax calls to update parts of the screen without needing to load a new page? Then, nothing is going to be pushed on to that stack by the browser. Well, that is true, unless we do it ourselves. And the key to making this possible is the popstate
event and the history.pushState()
function.
pushState()
Each time we create code to update part of the screen, as we did in the examples in the previous...