Explore the 5 most efficient ways to handle the common scenario of Refresh or Reload page in JavaScript, and identify the appropriate use cases to use one of these different approaches.
Anuj Sharma
Last Updated Jan 4, 2025
Reloading pages programmatically is a very common use-case in javascript, to reflect the new set of information on the web page. There are a few ways to refresh page in JavaScript with a click of a button or on the form submit.
In this quick blog, we will cover the 5 most efficient ways to reload page in javascript.
This is the standard and most frequently used way to reload a page programmatically in JS. It reloads the current page from the cache.
Note: If you want to force a reload from the server (bypassing the cache), you can pass true as an argument(<forceGet>) example - location.reload(true). It only works in "Firefox"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script>
// Reload from cache (default)
function reloadPageFromCache() {
window.location.reload();
console.log("reload from cache");
}
// Pass true to force a reload bypassing the cache. Defaults to false. Only supported in Firefox.
function reloadPage() {
window.location.reload(true);
}
</script>
</head>
<body>
<h1>Page Reload Example: window.location.reload()</h1>
<button onclick="reloadPageFromCache()">Reload page (From Cache)</button>
<button onclick="reloadPage()">Reload page</button>
</body>
</html>href property of the location interface contains the current URL and setting the the value of href is generally used to redirect the page to another URL. This feature can also be used to do the page reloading, in this case rather than providing any other URL, we can assign the current URL itself which causes a page reload.
Note: this is generally not the preferred way to reload the page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script>
function reloadPageWithHref() {
window.location.href = window.location.href;
}
</script>
</head>
<body>
<h1>Page Reload Example: window.location.href</h1>
<button onclick="reloadPageWithHref()">
Reload with href
</button>
</body>
</html>
assign() method of location interface is generally used to redirect programmatically to the new URL given as part of the input, and this can be used to reload the current page by passing the current page URL using location.href.
function reloadPageWithAssign() {
window.location.assign(window.location.href);
}
//Example usage
//<button onclick="reloadPageWithAssign()">Reload with Assign()</button>replace() method of location interface is also used to redirect programmatically to the new URL given as part of the input, and this can be used to reload the current page by passing the current page URL using location.href.
The main difference between assign() and replace() methods is that the replace() method doesn't store the current URL as part of the history.
function reloadPageWithReplace() {
window.location.replace(window.location.href);
}
//Example usage
//<button onclick="reloadPageWithReplace()">Reload with replace</button>This is not a very common approach to reload page in JavaScript. In this approach, a new query param is added as part of the URL and then assign the new URL with the added query param. This behaviour is like a new URL because of the added query param.
function reloadWithQueryParameter() {
const url = new URL(window.location.href);
url.searchParams.set('reloaded', 'true'); // Add or update a query parameter
window.location = url.href;
}
//Example usage
//<button onclick="reloadWithQueryParameter()">Reload with parameter</button>history.go() Or Using Meta taggo(<delta>) method of the History interface can load a specific page from the browser history. It takes an optional numeric parameter delta. This parameter value can be used to load backwards or forward pages. Positive(+ve) values can be used to load forward history pages and negative(-ve) values can be used to load backward history pages.
To reload the current page, go() or go(0) can be used to refresh or reload page in javascript, check the example below 👇👇
Example
// Load 2 pages forward from the history
history.go(2);
// Load 1 page backwards from the history
history.go(-1);
📌 Reload the current page
history.go();
or
history.go(0);http-equiv Meta tagThis meta tag name is a short form of http-equivalent, because all the values used as part of this tag are HTTP equivalent.
http-equiv can have different values, but to refresh the page, It should have the value as http-equiv="refresh". There is another parameter to this meta tag called content, where we can define the number of seconds (Non-negative, otherwise ignored) after which the page will reload.
<meta http-equiv="refresh" content="5">In the above example, content="5" means the page will automatically refresh in 5 sec, and this time will calculate once the page load() event gets triggered.
window.location.reload(): This is the most common and generally preferred method for page reload in JavaScript.window.location.replace(): Use this when you want to reload the current page and also want to prevent the user from going back to the reloaded page in the browser's history for example after form submissions or card transactions.Anuj Sharma
Last Updated Jan 4, 2025
Explore the most common ways to reverse a string in javascript including the most optimal way for frontend interviews with O(1) time complexity.
Anuj Sharma
Last Updated Jan 5, 2025
A comprehensive explanation about using javascript:void(0) in javascript. When to use javascript:void(0) and how it works with examples of using it with anchor tag.
Anuj Sharma
Last Updated Jan 2, 2025
Understand important web authorization techniques to enhance role-based authentication for any web application with popular techniques like Session & JSON Web Token (JWT)
Vivek Chavan
Last Updated Dec 23, 2024
You will get a clear understanding about working with any rest api and common concepts asked during interviews
Anuj Sharma
Last Updated Jan 9, 2025
Go through different ways to display dates using javascript date object. It covers examples of date object usage to understand the main concepts of javascript date object.
Anuj Sharma
Last Updated Dec 27, 2024
An Interview-focused explanation of Promise Polyfill in JavaScript which helps to understand both Functional and ES6 custom promise implementation.
© 2024 FrontendGeek. All rights reserved
