Table of Contents
JavaScript location reload true refreshes the page at the current URL with data from the server.
window.location.reload(true)
The default behavior of the reload method is false, which refreshes the page with the browser's cached data.
window.location.reload()
But, what exactly is the window, location object or reload method? What is the alternative way to refresh the page without JavaScript location reload true?
Find out below.
Understand the window and location objects
JavaScript code interacts with the browser API through the window
object. The object lets you use multiple JavaScript objects like AbortController
and Array
. The (global) objects' names start with capital letters.
For example, you can use the Array
object to create a stack of three elements: window, location, and JavaScript location reload true.
const outline = window.Array('window', 'location', 'JavaScript location reload true')
console.log(outline) // ['window', 'location', 'JavaScript location reload true']
The window object also has window-specific (not JavaScript) objects like document
and location
. The document
object lets you interact with the DOM.
window.document.querySelector(<selector>)
On the other hand, the location
object has information about the current URL. It has attributes like href, protocol, hostname, pathname, and search.
{
"ancestorOrigins": {},
"href": "http://localhost:5500/",
"origin": "http://localhost:5500",
"protocol": "http:",
"host": "localhost:5500",
"hostname": "localhost",
"port": "5500",
"pathname": "/",
"search": "",
"hash": ""
}
Besides, the location object has methods like assign()
, reload()
, replace()
, and toString()
.
Since window
is the root object, you can use its attributes and methods without explicitly attaching them to the object. For example, location.reload()
does the same thing as window.location.reload()
.
The ins and outs of JavaScript location reload true
reload()
method does what pressing f5
or the browser's refresh button does.
location.reload()
location.reload()
refreshes the page from the browser's cache. Browser cache composes temporary assets. Examples of the assets are images and data needed for faster future reloads.
You can invoke a page reload through a button click or run the method in a timer like setTimeout(). For example, you can program the page to automatically refresh after 5 seconds, as follows.
(() => {
setTimeout(() => {
location.reload()
}, 5000)
})()
The outer Immediately Invoked Function Expression (IIFE) runs the setTimeout() function. The setTimeout() function runs a callback function that refreshes the page after 5000 milliseconds using the location.reload()
method.
However, sometimes you may need to refresh a webpage whose data changes dynamically like sports and news websites. That is where JavaScript location reload true comes in.
location.reload(true)
The webpage requests the server to supply it with updated data. Such a type of refresh is called hard refresh. You can turn the feature off by replacing true
with false
or specifying no parameter.
location.reload(true)
// OR
location.reload()
Now that you understand the role of JavaScript location reload true, let me show you how to use it practically.
Lab environment setup
mkdir reloadPage && cd reloadPage touch index.html code .
We create the project directory called reloadPage
and navigate to it. Next, we create the HTML file to implement code to refresh the page. Lastly, we open the project directory with Visual Studio Code.
Practical example
Let's write the code in index.html to refresh the web page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript location reload true</title>
</head>
<body>
<button onclick="refreshPage()">Refresh Page</button>
<script>
const refreshPage = () => location.reload()
</script>
</body>
</html>
We run the refreshPage()
function whenever the button gets clicked. The function implements JavaScript location reload. You can launch the web page using Editor's Live Server extension or copy the HTML file's path and open it in a web browser.
We can be more creative by redesigning the page body and button on page refresh. Let's do that by adding main.js and style.css, then linking them to index.html.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="main.js" defer></script>
<title>JavaScript location reload true</title>
</head>
<body>
<button>Refresh Page</button>
</body>
</html>
style.css
.body {
background-color: #212121;
margin: 3rem auto;
width: 50%;
}
.button {
padding: 1rem;
border-radius: .4rem;
border: .3rem solid #212121;
background-color: green;
color: #f7f8fc;
cursor: pointer;
}
We make the body dark and push the elements toward its center. We also make the button green and enlarge it.
main.js
const btn = document.querySelector('button')
btn.addEventListener('click', () => {
location.reload()
document.body.classList.add('body')
btn.classList.add('button')
})
The new (body and button) styles do not get applied on the page until we click the button. The button click initiates an IIFE which refreshes the page,
location.reload()
applying the .body
and .button
classes to the body and the button, respectively.
If the new data came from a web server, we could add the true
parameter to refresh the web page.
location.reload(true)
Summary
JavaScript location reload true refreshes the page server-side.
window.location.reload(true)
// OR
location.reload(true)
Removing the true
parameter leads to refreshing the page with the browser's cache.
window.location.reload()
// OR
location.reload()
// OR
location.reload(false)
Further Reading
location.reload() - Web APIs | MDN