Refresh page - JS

You want a page to refresh. You may want to do this to get new data after a user performs a certain action. How can you do this using JavaScript?

There are Web API methods for refreshing a page: location.reload() and history.go(). These methods are not part of the JavaScript language but are used with JavaScript.

Using location.reload()

The read-only properties window.location and document.location (which is the same as window.document.location) return a Location object, which contains information about the current URL. The Location object has a reload() method that can be used to reload the current page. For example, reload() can be used to refresh a page using a “Refresh page” button:

<button id="btnRefresh" type="button">
    Refresh page
</button>

The "Refresh page" button element is selected and stored in a variable. You can then add a "click" event to it:

const refreshBtn = document.getElementById("btnRefresh");

function handleClick() {
    window.location.reload();
}

refreshBtn.addEventListener("click", handleClick);

We can replace window.location.reload() in our previous code example with history.go().

🕶 The page is refreshed when the “Refresh page” button is clicked.