Kodeclik Blog
How to reload a page with Javascript
Reloading a web page is a common task - we all do it! For instance, if you are watching the scores of your favorite team on ESPN, you might frantically click Reload to make sure you are tracking the latest developments. If you are looking for seats to a show that will open up at a particular time on a given day, you will keep clicking Reload so you don’t miss out on the action! In this blogpost, we’ll explore what it means to reload a page, why you might want to do it, and how to implement and verify reloads programmatically.
Introduction
Whether you’re building dashboards, single-page applications, or interactive demos, you will need to learn the skill of reloading programmatically, i.e., reloading a page not by clicking Reload using your nimble fingers but from inside a program! But fear not, Javascript provides several ways to reload a page, each with its own use cases and nuances.
What does it mean to reload a page?
Reloading a page means instructing the browser to re-fetch and re-render the current document. This process clears the current state of the page (unless you use persistent storage), reloads all resources, and re-executes scripts. As we said before, this is exactly what happens when you press the browser’s refresh button.
Why would you want to reload a page?
There are several scenarios where reloading a page programmatically is useful:
- Refreshing data: Automatically update content from a server at intervals.
- Resetting state: Return an application to its initial state after a user action.
- Clearing errors: Give users a way to recover from transient issues.
- Testing: Demonstrate or debug page lifecycle events.
How to reload a page programmatically with Javascript
The most direct way to reload a page with Javascript is using the window.location.reload() method:
window.location.reload();This method works in all major browsers and mimics the effect of the browser’s refresh button. Here, “window” refers to the global window object in the browser, which represents the open browser window or tab. It is the top-level object for everything in a web page. “location” is a property of the window object. The location object contains information about the current URL (address) of the browser and provides methods for changing or reloading the page. Finally, “reload()” is a method of the location object. When called, it reloads the current document from its source.
How do I know that the page is indeed reloading?
You can easily demonstrate that a page is reloading automatically by displaying a value that changes on each load (such as the current time or a random number), and then using Javascript's setTimeout() to trigger a reload after a delay.
<!DOCTYPE html>
<html>
<body>
<h2>Automatic Page Reload Demo</h2>
<p id="demo"></p>
<p>This page will reload every 5 seconds. Watch the time update!</p>
<script>
// Display the current time
document.getElementById("demo").innerText = "Page loaded at: " + new Date().toLocaleTimeString();
// Reload the page after 5 seconds (5000 milliseconds)
setTimeout(function() {
window.location.reload();
}, 5000);
</script>
</body>
</html>If you now load this page on a browser, it will display something like:
followed by:
followed by:
and so on. Note that each reload updates the time, confirming that the page is refreshing automatically.
How to keep track of state across reloadings
A challenge with page reloads is that any in-memory state is lost. If you want to keep a history or persist information across reloads, you can use localStorage or sessionStorage.
Here’s an example that increments a number on every reload, so you can observe a counter behavior as the reload happens.
<!DOCTYPE html>
<html>
<body>
<h2>Incrementing Counter Demo</h2>
<p id="counter"></p>
<p>This number will increment by 1 every 5 seconds, even after reloads.</p>
<script>
// Get the current count from localStorage, or start at 0
let count = parseInt(localStorage.getItem('count') || '0', 10);
// Display the count
document.getElementById("counter").innerText = "Counter: " + count;
// After 5 seconds, increment the count, save it, and reload the page
setTimeout(function() {
count++;
localStorage.setItem('count', count);
window.location.reload();
}, 5000);
</script>
</body>
</html>The way this program works is to store the counter value in the browser’s localStorage, so it persists across page reloads. (localStorage is specific to your browsing session and is stored in your local computer’s browser.) Every 5 seconds, the script increments the counter, saves it, and reloads the page. On each reload, the updated value is retrieved and displayed, so you see the number increase over time.
Running, i.e., loading, the above page will give behavior like this:
What are other ways to reload a page?
Alternative methods include:
- window.location.href = window.location.href; This reassigns the current URL, triggering a reload.
- history.go(0); This navigates to the current page in the browser’s history stack, effectively reloading it.
- Finally, you can pass an optional boolean parameter to reload(), like window.location.reload(true);. If set to true, it tells some browsers (notably Firefox) to perform a "hard reload," bypassing the cache and fetching everything from the server. However, this parameter is non-standard and not universally supported, so it's best to use window.location.reload(); for general compatibility.
Summary
In summary, if you would like to refresh a page, say to ensure it displays the latest data, window.location.reload(); is the standard Javascript way to programmatically refresh the current page in any modern browser.
Want to learn Javascript with us? Sign up for 1:1 or small group classes.
