Page Refresh via JavaScript: A Complete Guide for Beginners

Why Refresh a Page with Code at All?

\n\n

Imagine: you are writing a chat, an online game, or a feedback form. The user sent data — and everything froze. To see the result, they have to press F5 or click the browser button. Inconvenient, right?

\n\n

Now imagine that the page refreshes itself — as soon as the action is completed. Magic? No, just pure JavaScript and a couple of lines of code. That's exactly what we're going to talk about today.

\n\n

The topic seems simple at first glance, but even experienced developers sometimes confuse the location.reload() and window.location.href methods. We'll cover all the options, pitfalls, and best practices. Let's go!

\n\n

The Main Character: location.reload()

\n\n

The most popular and correct way to refresh a page via JavaScript is the location.reload() method. It does exactly what it says on the tin: reloads the current document.

\n\n

// The simplest option\nlocation.reload();

\n\n

But there is a nuance. This method takes one optional parameter — a boolean value forceGet.

\n\n

\n
• location.reload() — reloads the page using the browser cache if possible.
\n
• location.reload(true) — forces a load from the server, ignoring the cache.
\n

\n\n

The difference is noticeable when you work with dynamic data. If you need to guarantee getting the latest version of the page — use true.

\n\n

Comparison: reload() vs window.location.href

\n\n

On Stack Overflow, people often ask: "Can I just assign window.location.href = window.location.href?"

\n\n

Short answer: you can, but it's a crutch. Long answer — see the table.

\n\n

Comparison table of page reload methods

\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

Method	Behavior	Uses cache	Recommended
location.reload()	Reloads the page	Yes (by default)	✅ Yes
location.reload(true)	Forced reload from server	No	✅ Yes
window.location.href = window.location.href	Redirects to the same page	Yes	⚠️ With caution
window.location = window.location	Same thing, shorter	Yes	⚠️ With caution
history.go(0)	Navigates to the current page in history	Yes	❌ Deprecated

\n\n

As you can see, location.reload() is the most reliable and predictable method. Other options may work inconsistently across different browsers.

\n\n

Automatic Refresh at a Set Interval

\n\n

Sometimes you need the page to refresh automatically — for example, to display exchange rates or server status. This is where setTimeout or setInterval come to the rescue.

\n\n

Refresh 5 seconds after loading

\n\n

// Wait 5 seconds, then reload\nsetTimeout(function() {\n    location.reload(true);\n}, 5000);

\n\n

Periodic refresh every 30 seconds

\n\n

// Refresh the page every 30 seconds\nsetInterval(function() {\n    location.reload();\n}, 30000);

\n\n

Important: Do not overuse automatic reloading. If the page