Moving forward and backward

window.history.back();

window.history.forward();

To move backward through history, just do:

Similarly, you can move forward (as if the user clicked the Forward button), like this:

Moving to a specific point in history

You can use the go() method to load a specific page from session history, identified by its relative position to the current page (with the current page being, of course, relative index 0).

To move back one page (the equivalent of calling back()):

window.history.go(-1);

To move forward a page, just like calling forward():

window.history.go(1);

Adding and modifying history entries

HTML5 introduced the history.pushState() and history.replaceState() methods, which allow you to add and modify history entries, respectively. These methods work in conjunction with the window.onpopstate event.

The onpopstate property

The onpopstate property of the WindowEventHandlers mixin is the EventHandler for processing popstate events on the window.

A popstate event is dispatched to the window each time the active history entry changes between two history entries for the same document. If the activated history entry was created by a call to history.pushState(), or was affected by a call to history.replaceState(), the popstate event's state property contains a copy of the history entry's state object.

Note: Calling history.pushState() or history.replaceState() won't trigger a popstate event. The popstate event is only triggered by performing a browser action, such as clicking on the back button (or calling history.back() in JavaScript), when navigating between two history entries for the same document.

MVC architecture

The Model View Controller software architecture pattern

Model View Controller (MVC) is a software architecture pattern, commonly used to implement user interfaces: it is therefore a popular choice for architecting web apps. In general, it separates out the application logic into three separate parts, promoting modularity and ease of collaboration and reuse. It also makes applications more flexible and welcoming to iterations.