About
Kodeclik is an online coding academy for kids and teens to learn real world programming. Kids are introduced to coding in a fun and exciting way and are challeged to higher levels with engaging, high quality content.
Popular Classes
Scratch Coding
Minecraft Coding
TinkerCAD
Roblox Studio
Python for Kids
Javascript for Kids
Pre-Algebra
Geometry for Kids
Copyright @ Kodeclik 2025. All rights reserved.
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.
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.
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.
There are several scenarios where reloading a page programmatically is useful:
The most direct way to reload a page with Javascript is using the window.location.reload() method:
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.
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.
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.
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.
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:
Alternative methods include:
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.
window.location.reload();<!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><!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>