I am learning about the History (Web) API and how single page application frameworks do it under the hood.
A traditional Website works as follows:-
- You are on
www.example.com/enter_data
page. - This page contains a form.
- You enter some data and submit.
- It submits to
www.example.com/data_submitted
with a POST request and loads that page. - Right now, it shows
www.example.com/data_submitted
in the browser address bar. - If you press the browser refresh button, it shows a confirmation message, asking if you want to re-send the data.
- Agreeing to it would send another POST request to the same URL with the same data. (Ignore the pitfalls for now.)
A single-page-application-equivalent would work as follows:-
- You are on
www.example.com/enter_data
page. - This page contains a form.
- You enter some data and submit.
- The application makes an Ajax POST request to
www.example.com/data_submitted
. - It replaces the page content with the response received.
- It changes the URL in the browser address bar to
www.example.com/data_submitted
, usinghistory.pushState
. - Right now, it shows
www.example.com/data_submitted
in the browser address bar. - If you press the browser refresh button, it makes a GET request to
www.example.com/data_submitted
. - I want it to make a POST request after asking for confirmation, like in the previous example, as if it were a traditional Website.
Is it possible to “store a POST request” with history.pushState
, along with its associated data? If not, is there another way?
How do browsers do it, as in the traditional example above? How do browsers store history entries along with the HTTP method used?