‘history.pushState’ and POST method

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, using history.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?