A simple example of how to use Window.location.hash to implement the browser's forward/backward function when Ajax is being manipulated

We know that Window.history objects are provided early in JavaScript, and that the forward (), go (), and Back () methods of the History object can be used to facilitate such navigation functions as forward and backward between different pages. However, Ajax operations cannot be navigated with the browser's forward and backward buttons, because the browser does not add AJAX operations to the history. But with Location.hash, we are able to move forward and backward on our own AJAX operations. For more information about Window.location.hash and how to use them, refer to these 2 articles below.

Location.hash detailed and 6 things should Know about Fragment URLs.

We need to know the following 2 points:

1. If the location.hash changes, the URL of the browser address bar will change and the browser will generate 1 historical records.

2. If the location.hash has changed, a Hashchange event will be generated and we can handle the event.

<! DOCTYPE html> 

Run this HTML file under Chrome, default to the home page, and click on the button to call back to the next page (until the last page). We can click on the browser's forward and backward buttons to simulate the function of Ajax forward and backward. 



A simple example of how to use Window.location.hash to implement the browser's forward/backward function when Ajax is being manipulated